<template>
  <v-page style="height:auto!important;min-height: 100%!important;">
    <v-header :title="$t('auth.a1')"></v-header>
    <main class=" m-lg  bg-panel-3 rounded-md p-x-md box-shadow">
      <!-- 姓名 -->
      <view class="form-item border-b p-md m-b-md">
        <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">
        <view class="label m-b-xs">{{$t('auth.c5')}}</view>
        <view class="input color-light">
          <uni-datetime-picker type="date" :placeholder="$t('auth.d4')" :clear-icon="false" v-model="form.birthday" @maskClick="maskClick" />
        </view>
      </view>
			<!-- 证件号类型 -->
			<view class="form-item border-b p-md m-b-md">
				<view class="label m-b-xs">{{$t('auth.c6')}}</view>
				<view class="input color-light">
					<uni-data-select
					:placeholder="$t('auth.d5')"
								v-model="form.identification_type"
								:localdata="id_range"
								@change="changeID"
							></uni-data-select>
				</view>
			</view>
      <!-- 证件号 -->
      <view class="form-item border-b p-md m-b-md">
        <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>
      <!-- 居住地址 -->
      <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.c7')}}</view>
        <view class="input color-light">
          <v-input v-model="form.address" :placeholder="$t('auth.c8')"></v-input>
        </view>
      </view>
			<!-- 城市 -->
      <!-- <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.d7')}}</view>
        <view class="input color-light">
          <v-input v-model="form.city" :placeholder="$t('auth.d8')"></v-input>
        </view>
      </view> -->
			<!-- 邮政区号 -->
      <!-- <view class="form-item border-b p-md m-b-md">
        <view class="label m-b-xs">{{$t('auth.d9')}}</view>
        <view class="input color-light">
          <v-input v-model="form.postal_code" :placeholder="$t('auth.d10')"></v-input>
        </view>
      </view> -->
      <!-- 国籍区号 -->
      <view class="form-item border-b p-md m-b-md">
        <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="name2">
            <v-input disabled :value="activeCountry.name2" :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">
        <view class="label m-b-xs">{{$t('auth.c9')}}</view>
        <view class="input color-light">
          <v-input v-model="form.phone" :placeholder="$t('auth.d0')"></v-input>
        </view>
      </view>
	  <view class="p-md ">
	    <v-button block type="blue" class="w-max rounded-md" ref="btn" @click="primaryAuth">{{$t('auth.b3')}}</v-button>
	  </view>
    </main>
	
	
    
    <van-toast id="van-toast" />
  </v-page>
</template>
<script>
import Profile from "@/api/profile";
import Member from "@/api/member";
export default {
  data() {
    return {
      detail: {},
      countryList: [],
      form: {
				area_code: "",
        realname: "",
				birthday: "",
				identification_type: "",
        id_card: "",
				address: "",
				// city: "",
				// postal_code: "",
        country_id: "",
        country_code: "",
				phone: ""
      },
	  id_range: [{ value: 0, text: this.$t('auth.d1') },{ value: 1, text: this.$t('auth.d2') },{ value: 2, text: this.$t('auth.d3') }],
	};
  },
  computed: {
    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.countryList = res.data.map(item=>{
						return {
							...item,
							name2: '+'+item.country_code+'('+item.name+')'
						}
					});
          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;
			console.log(data);
			if(!data.realname){
				uni.showToast({
					title: this.$t('auth.b0'),
					icon: 'none'
				})
				return;
			}
			if(!data.birthday){
				uni.showToast({
					title: this.$t('auth.d4'),
					icon: 'none'
				})
				return;
			}
			if(data.identification_type===""){
				uni.showToast({
					title: this.$t('auth.d5')+this.$t('auth.c6'),
					icon: 'none'
				})
				return;
			}
			if(!data.id_card){
				uni.showToast({
					title: this.$t('auth.b2'),
					icon: 'none'
				})
				return;
			}
			if(!data.address){
				uni.showToast({
					title: this.$t('auth.c8'),
					icon: 'none'
				})
				return;
			}
			if(!data.phone){
				uni.showToast({
					title: this.$t('auth.d0'),
					icon: 'none'
				})
				return;
			}
			
      Profile.primaryAuth(data,{btn:this.$refs.btn}).then(() => {
        this.$toast.success(this.$t('auth.b4'));
        setTimeout(()=>{
					this.$back();
				}, 1500)
      }).catch(()=>{});
    },
		changeID(e){
			console.log(e);
			this.form.identification_type = this.id_range[e].text;
		}
  },
  created() {
    this.getAuthInfo();
    this.getCountryCode();
  },
	options: {
		styleIsolation: 'shared'
	},
};
</script>
<style lang="scss" scoped>
/deep/.uni-date-x--border{
	border: none;
}
/deep/.uni-date-x{
	background-color: transparent;
	color: $plain;
}
/deep/.uni-date__x-input{
	padding-left: 0px;
	// color: grey;
}
/deep/.uni-select__selector{
	background-color: $panel-3;
}
/deep/.uni-select__input-text{
	color: $plain;
}
/deep/.uni-select__input-placeholder{
	color: grey;
}
// 修改uni-datetime-picker的年月列表样式
.uni-picker-view-indicator, .uni-picker-view-mask{
	background-color: rgba(255,255,255,0.5)!important;
}
// 修改uni-datetime-picker的年月列表样式,以下的修改无效
/deep/.uni-picker-view-indicator, /deep/uni-resize-sensor{
	background-color: #fff;
}
/deep/.uni-picker-view-mask::before, uni-picker-view-column::before{
    content: ''!important;
	width: 100%!important;
	height: 34px!important;
	background: rgba(255,255,255,0.5)!important;
	position: absolute!important;
	top: calc(50% - 17px)!important;
	border-top: 1px solid #c9c9c9!important;
	border-bottom: 1px solid #c9c9c9!important;
}
::v-deep.uni-picker-view-mask::before{
    content: '';
	width: 100%;
	height: 34px;
	background: rgba(255,255,255,0.5);
	position: absolute;
	top: calc(50% - 17px);
	border-top: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
}
>>>.uni-picker-view-mask::before{
    content: '';
	width: 100%;
	height: 34px;
	background: rgba(255,255,255,0.5);
	position: absolute;
	top: calc(50% - 17px);
	border-top: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
}
</style>