<template>
	<v-page
		style="height:auto!important;min-height: 100%!important;background: none;background-color: #121212 !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')" start="1873-1-01"
						:end="new Date().toLocaleDateString()" :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>
			<div class="form-item border-b p-md" style="padding-bottom: 30px !important;position: relative;">
				<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-4 p-md rounded-sm">
						<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-4">
						<van-icon v-if="!form.front_img" class="color-light fn-30" name="photograph" />
						<img v-else :src="form.front_img" alt />
					</div>
				</div>
				<el-progress
				  v-if="boll"
				  :percentage="uploadProgress"
				  :status="uploadStatus"
				  :stroke-width="10"
				  class="my-2"
				></el-progress>
			</div>
			<div class="form-item border-b p-md" style="padding-bottom: 30px !important;position: relative;">
				<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-4 p-md rounded-sm">
						<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-4">
						<van-icon v-if="!form.back_img" class="color-light fn-30" name="photograph" />
						<img v-else :src="form.back_img" alt />
					</div>
				</div>
				<el-progress
				  v-if="boll1"
				  :percentage="uploadProgress1"
				  :status="uploadStatus1"
				  :stroke-width="10"
				  class="my-2"
				></el-progress>
			</div>
			<view class="p-md ">
				<v-button block type="white" 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: "",
					phone: "",
					country_code: "",
					back_img: "",
					front_img: "",
				},
				id_range: [{
					value: 0,
					text: this.$t('auth.d1')
				}, {
					value: 1,
					text: this.$t('auth.d2')
				}, {
					value: 2,
					text: this.$t('auth.d3')
				}],
				uploadProgress: 0,    // 新增进度状态
				uploadStatus: null,// 新增状态类型
				progressInterval: null,
				boll:false,
				uploadProgress1: 0,    // 新增进度状态
				uploadStatus1: null,// 新增状态类型
				boll1:false,
				continueUploading:true,
				continueUploading1:true
			};
		},
		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: {
			getFile(name) {
			    // console.log(name)
			    this.$getFile({count: 9}).then((res) => {
			        this.upLoadImg(res, name);
			    })
			},
			// 上传图片
			upLoadImg(chooseImageRes, name) {
				if(name=='front_img'){
					this.uploadStatus = null // 重置状态
					this.uploadProgress = 0 // 重置进度
					this.boll = true
				}else{
					this.uploadStatus1 = null // 重置状态
					this.uploadProgress1 = 0 // 重置进度
					this.boll1 = true
				}
				
				clearInterval(this.progressInterval); // 清除之前的定时器
				
				this.progressInterval = setInterval(() => {
				  if (this.uploadProgress < 100&&name=='front_img'&&this.continueUploading) {
				    this.uploadProgress += Math.floor(Math.random() * 3) + 1;
					setTimeout(() => {
					  this.continueUploading = false;
					  // 暂停3秒后继续累加
					  setTimeout(() => {
					    this.continueUploading = true;
					  }, 3000); // 这里的3000毫秒表示暂停3秒后继续
					}, 1000);
				  }else if(this.uploadProgress1 < 100&&name=='back_img'&&this.continueUploading1){
					this.uploadProgress1 += Math.floor(Math.random() * 4) + 1;
					setTimeout(() => {
					  this.continueUploading1 = false;
					  // 暂停3秒后继续累加
					  setTimeout(() => {
					    this.continueUploading1 = true;
					  }, 2600); // 这里的3000毫秒表示暂停3秒后继续
					}, 1000);
				  }
				}, 50);
				
			    Member.uploadImage(chooseImageRes).then((res) => {
			        this.form[name] = res.data.url;
					if(res.data.url){
						if(name=='front_img'){
							setTimeout(() => {
							  this.uploadStatus = 'success'
							  this.uploadProgress = 100
							  clearInterval(this.progressInterval); // 清除之前的定时器
							  setTimeout(() => {
							  	this.boll = false
							  },3000)
							}, 2000)
						}else{
							setTimeout(() => {
							  this.uploadStatus1 = 'success'
							  this.uploadProgress1 = 100
							  clearInterval(this.progressInterval); // 清除之前的定时器
							  setTimeout(() => {
							  	this.boll1 = false
							  },3000)
							}, 2000)
						}
					}
			        // this.$toast.success(this.$t('auth.c1'));
			    }).catch(() => {
					if(name=='front_img'){
						this.uploadStatus = 'exception'
						this.uploadProgress = 100
					}else{
						this.uploadStatus1 = 'exception'
						this.uploadProgress1 = 100
					}
				});
			},
			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;
				}
				if (!data.back_img) {
				    this.$toast(this.$t('auth.c2'));
				    return;
				}
				if (!data.front_img) {
				    this.$toast(this.$t('auth.c3'));
				    return;
				}

				Profile.newAuth(data, {btn: this.$refs.btn}).then((res) => {
					// 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;
		background-color: #242424;
	}

	/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.7) !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;
	}

	.bg-panel-3 {
		background-color: #242424;
	}
	
	.bg-panel-4 {
		background-color: #000;
	}

	::v-deep uni-input {
		border: 1px solid #e5e5e5;
	}
	.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;
	    }
	}
	
	.el-progress {
	  position: absolute;
	  bottom: 8px;
	  right:-15px;
	  width: 300rpx;
	  // margin-top: 10px;
	  
	  &-bar {
	    padding-right: 45px;
	  }
	  
	  &__text {
	    font-size: 12px!important;
	  }
	}
</style>