<template>

    <div class="layout-page" :style="themeStyle">
        <v-header :title="$t('auth.a4')"></v-header>
        <main class="layout-main">

            <view class="form-item border-b p-md m-b-md" v-if="0">
                <view class="label m-b-xs">{{$t('auth.a7')}}</view>
                <view class="input color-light">
                    <v-picker :value="form.country_id" @change="selectCountry" :list="countryList"
                              range-value="id" range-label="name">
                        <v-input disabled :value="activeCountry.name" :placeholder="$t('auth.a8')">
                            <template #right>
                                <van-icon class="color-default" name="arrow"/>
                            </template>
                        </v-input>
                    </v-picker>
                </view>
            </view>
            <view class="form-item border-b p-md m-b-md" v-if="0">
                <view class="label m-b-xs">{{$t('auth.a9')}}</view>
                <view class="input color-light">
                    <v-input v-model="form.realname" :placeholder="$t('auth.b0')"></v-input>
                </view>
            </view>
            <view class="form-item border-b p-md m-b-md" v-if="0">
                <view class="label m-b-xs">{{$t('auth.b1')}}</view>
                <view class="input color-light">
                    <v-input v-model="form.id_card" :placeholder="$t('auth.b2')"></v-input>
                </view>
            </view>

            <div class="form-item   p-md m-md">
                <div class="color-light p-b-xs">1、{{$t('auth.b5')}}</div>
                <div class="d-flex justify-between m-t-md ">
                    <div class="examples m-r-xs bg-panel-3 p-md rounded-sm box-shadow">
                        <img src="static/img/fill6.png"/>
                    </div>
                    <div
                        @click="getFile('front_img')"
                        class="upload-box d-flex justify-center align-center rounded-sm  bg-panel-3 box-shadow"
                    >
                        <van-icon v-if="!form.front_img" class="color-light fn-30" name="photograph"/>
                        <img v-else :src="form.front_img" alt/>
                    </div>
                </div>
            </div>
            <div class="form-item  p-md m-md">
                <div class="color-light p-b-xs">2、{{$t('auth.b6')}}</div>
                <div class="d-flex justify-between m-t-md">
                    <div class="examples m-r-xs bg-panel-3 p-md rounded-sm box-shadow">
                        <img src="static/img/fill7.png"/>
                    </div>
                    <div
                        @click="getFile('back_img')"
                        class="upload-box d-flex justify-center align-center rounded-sm  bg-panel-3 box-shadow"
                    >
                        <van-icon v-if="!form.back_img" class="color-light fn-30" name="photograph"/>
                        <img v-else :src="form.back_img" alt/>
                    </div>
                </div>
            </div>
            <!-- <div class="form-item p-md m-md ">
              <div class="color-light  p-b-xs">3、{{$t('auth.b7')}}</div>
              <div class="fn-sm ">{{$t('auth.b8')}}。</div>
              <div class="d-flex justify-between m-t-md">
                <div class="examples m-r-xs bg-panel-3 p-md rounded-sm box-shadow">
                  <img src="static/img/fill6.png" />
                </div>
                <div
                  @click="getFile('hand_img')"
                  class="upload-box d-flex justify-center align-center rounded-sm  bg-panel-3 box-shadow"
                >
                  <van-icon v-if="!form.hand_img" class="color-light fn-30" name="photograph" />
                  <img v-else :src="form.hand_img" alt />
                </div>
              </div>
            </div> -->
        </main>
        <div class="p-md">
            <v-button block type="green" class="w-max rounded-lg" @click="topAuth" ref="btn">{{$t('common.submit')}}
            </v-button>
        </div>
        <van-toast id="van-toast"/>
    </div>
</template>
<script>
import utils from "@/utils";
import Profile from "@/api/profile";
import Member from "@/api/member";
import {mapGetters} from "vuex";

export default {
    data() {
        return {
            detail: {},
            countryList: [],
            imgBase: undefined,
            form: {
                // id_card: "",
                // realname: "",
                // country_id: "",
                country_code: "",
                hand_img: "",
                back_img: "",
                front_img: "",
            },
        };
    },
    computed: {
        ...mapGetters(['themeStyle']),
        activeCountry() {
            return (
                this.countryList.find((item) => item.id == this.form.country_id) || {}
            );
        },
        activeIndex() {
            return this.countryList.findIndex((item) => item.id == this.form.country_id)
        },
    },
    methods: {
        getAuthInfo() {
            Profile.getAuthInfo().then((res) => {
                this.detail = res.data;

            });
        },
        // 获取区号
        getCountryCode() {
            Member.getCountryCode()
                .then((res) => {
                    // console.info(res)
                    this.countryList = res.data;
                    this.form.country_id = this.countryList[res.data.length - 1].id;
                })
                .catch(() => {
                });
        },
        selectCountry(value) {
            this.form.country_id = value
        },
        // 认证
        primaryAuth() {
            let data = this.form;
            data.country_code = this.activeCountry.country_code;
            Profile.primaryAuth(data, {btn: this.$refs.btn}).then(() => {
                this.$toast.success(this.$t('auth.b4'));
                this.$back();
            }).catch(() => {
            });
        },
        getFile(name) {
            // console.log(name)
            this.$getFile({count: 9}).then((res) => {
                this.upLoadImg(res, name);
            })
        },
        // 上传图片
        upLoadImg(chooseImageRes, name) {
			console.log(chooseImageRes);
            Member.uploadImage(chooseImageRes).then((res) => {
                this.form[name] = res.data.url;
                this.$toast.success(this.$t('auth.c1'));
            });
        },
        // 提交审核
        topAuth() {
            let data = this.form;
            // if (!data.hand_img) {
            //   this.$toast(this.$t('auth.b7'));
            //   return;
            // }
            if (!data.back_img) {
                this.$toast(this.$t('auth.c2'));
                return;
            }
            if (!data.front_img) {
                this.$toast(this.$t('auth.c3'));
                return;
            }
            Profile.topAuth(data, {btn: this.$refs.btn})
                .then(() => {
                    // alert($t('auth.c4') );


                    this.$toast.success(this.$t('auth.c4') + "。");
                    clearTimeout(this.timer); //清除延迟执行
                    this.timer = setTimeout(()=>{  //设置延迟执行
                        this.$router.push("/pages/base/index");
                    },1000);
                    // this.$back();
                })
                .catch(() => {
                });
        },
    },
    created() {
        // this.$router.push("/pages/base/index");
        // this.$toast.success(this.$t('auth.c4') + "。");
        // alert(this.$t('auth.c4'));


        this.getAuthInfo();
        this.getCountryCode();
    },
};
</script>
<style lang="scss" scoped>
	.layout-page{
		background-color: #121212 !important;
		background: none;
	}
.examples {
    width: 122px;
    height: 70px;
    display: flex;
    align-items: center;

    img {
        width: 100%;
    }
}

.upload-box {
    width: 150px;
    height: 100px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.bg-panel-3{
	background-color: #242424;
}
</style>
