<template>
	<view class="content">
		<!-- <view class="mask" v-if="CertificateStatus!='2'">
			<cmd-result-page src="https://gw.alipayobjects.com/zos/rmsportal/HWuSTipkjJRfTWekgTUG.svg" text="等待审核" subtext="已提交申请"></cmd-result-page>
		</view> -->
		<view class="box-cont" >
			<view class="name"><input type="text" placeholder="请输入姓名" @blur="blurname" /></view>
					<view class="name"><input type="text" placeholder="请输入身份证号码" maxlength="18" @blur="blurnumber" /></view>
					<view style="padding-left: 50upx;" v-show="numberError"><text style="color:#DD524D;">身份证号码有误</text></view>
					<view style="padding-left:10upx;">
						<text style="color:#DD524D;">{{ time }}</text>
					</view>
					<view class="idbox">
						<view class="idboxTitle">身份证照片(正面)</view>
						<view class="idboxConten">
							<view class="idboxConten_left" @click="uploadIdentityImg('front')">
								<image src="http://mp.emshop.eonfox.com/zrhzstatic/muying/camera.png"></image>
								<view class="idboxConten_left_text">选择身份证照片</view>
							</view>
							<view class="idboxConten_right">
								<image v-if="JSONS.front_image_id" :src="qiniuaddress + JSONS.front_image_id" mode="aspectFill" />
								<image v-else src="http://mp.emshop.eonfox.com/zrhzstatic/muying/idcard1.png"></image>
							</view>
						</view>
						<!-- <view class="idboxFront" @click="uploadIdentityImg('front')">
							<image  v-if="JSONS.front_image_id" :src="qiniuaddress+JSONS.front_image_id" mode="aspectFill"/>
							<view v-else>
								<view style="font-size:140upx;">+</view>
								<view>正面照片</view>
								<view>(文字清晰，四角周全)</view>
							</view>
						</view> -->
						<view class="idboxTitle">身份证照片(背面)</view>
						<view class="idboxConten">
							<view class="idboxConten_left" @click="uploadIdentityImg('back')">
								<image src="http://mp.emshop.eonfox.com/zrhzstatic/muying/camera.png"></image>
								<view class="idboxConten_left_text">选择身份证照片</view>
							</view>
							<view class="idboxConten_right">
								<image v-if="JSONS.back_image_id" :src="qiniuaddress + JSONS.back_image_id" mode="aspectFill" />
								<image v-else src="http://mp.emshop.eonfox.com/zrhzstatic/muying/idcard2.png"></image>
							</view>
						</view>
						<!-- <view class="idboxBack" @click="uploadIdentityImg('back')">
							<image v-if="JSONS.back_image_id" :src="qiniuaddress+JSONS.back_image_id" mode="aspectFill"  />
							<view v-else>
								<view style="font-size:140upx;">+</view>
								<view>背面照片</view>
								<view>(文字清晰，四角周全)</view>
							</view>
						</view> -->
					</view>
					<view class="area">
						<view class="areaBox" @click="showMulLinkageTwoPicker">
							<view class="areaBox_left">
								{{ Address }}
							</view>
							<view class="areaBox_right"><image src="http://mp.emshop.eonfox.com/zrhzstatic/muying/back.png"></image></view>
						</view>
						<view class="detailAreaBox">
							<textarea type="text" placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等" class="homeRight" v-model="addresst" v-show="inputDisplay"></textarea>
						</view>
					</view>
			<mpvue-picker  ref="mpvuePicker" @onConfirm="onConfirm" @onCancel="onCancel"></mpvue-picker>

			<button type="primary" class="primary" @click="next">确认提交</button>
		</view>


	</view>
</template>

<script>
	import cmdResultPage from "@/components/cmd-result-page/cmd-result-page.vue"
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';

import city from '../../common/city.data.js';
import eonfox from '@/components/eonfox/eonfox.js';
import fns from '@/components/eonfox/fns.js';
var ef = new eonfox();
export default {
	data() {
		return {
			img_index: 'headImgOne',
			img_type: 'front',
			province: [],
			province_index: 0,
			province_data: '',
			citys: [],
			citys_index: 0,
			city_data: '',
			username: '',
			cardNumber: '',
			address: '',
			addresss: '',
			addressc: '',
			addresst: '',
			headImgOne: '',
			headImgTwo: '',
			Front_image_id: '',
			Back_image_id: '',
			display: true,
			displayx: true,
			numberError: false,
			time: '',
			CertificateStatus: 0,
			JSONS: {},
			qiniuaddress: '',
			phoneShow: true,
			phoneShowTwo: false,
			Address: '选择地址',
			Sprovince: '',
			Scity: '',
			Sdistrict: '',
			inputDisplay: true
		};
	},
	onLoad() {
		for (var i in city) {
			this.province.push(city[i].label);
		} //省数组赋值
		var cityChildren = city[this.province_index].children; //获取该省城市
		console.log(cityChildren);
		for (var i in cityChildren) {
			this.citys.push(cityChildren[i].label);
		} //城市数组赋值
	},
	onShow() {
		var that = this;
		ef.submit({
			request: {
				s: ['APPLICATIONCONFIG'],
				Authentication: ['USERIDENTITYSELFSTATE'],
				Editstate: ['USERIDENTITYSELFEDITGET'],
				config: ['APPLICATIONCONFIG']
			},
			callback: function(data) {
				console.log(data);
				var dataList = fns.checkError(data, ['s', 'Authentication'], function(erron, error) {
					uni.showToast({
						title: error,
						icon: 'none'
					});
				});
				//判断当前是否为编辑状态
				const editstate = data.data.Editstate.data;
				if (editstate) {
					that.JSONS = editstate;
					console.log('JSONS', that.JSONS);
				}
				//七牛云地址
				if (data.data.config && data.data.config.data.qiniu_domain) {
					that.qiniuaddress = data.data.config.data.qiniu_domain;
				}
				console.log(dataList.Authentication,'审核状')
				if (dataList.Authentication == 1) {
					that.CertificateStatus = 1;
					console.log('审核状态', that.CertificateStatus);
				}
				if (that.CertificateStatus == 1) {
					console.log('时间', data);
					var times = data.data.s.data.user_identity.expire_time / 3600;
					that.time = '认证失效时间还有' + times / 24 + '天' + (times % 24) + '小时';
					console.log('时间', that.time);
				}
				//通过审核后
			},
			error: function(err) {
				console.log('出错啦', err);
			}
		});
	},
	components: {
		mpvuePicker,

		cmdResultPage
	},
	methods: {
		//选择地址
		onConfirm(e) {
			this.inputDisplay = true;
			console.log(e);
			this.Address = e.label;
			var arr = this.Address.split('-');
			console.log('arr', arr);
			this.Sprovince = arr[0];
			this.Scity = arr[1];
			this.Sdistrict = arr[2];
			console.log(this.Sprovince, this.Scity, this.Sdistrict);
		},
		onCancel() {
			this.inputDisplay = true;
		},

		error(e) {
			fns.err(e.detail);
		},
		photo(type) {
			var _this = this;
			wx.getSetting({
				success(res) {
					console.log('auth', res.authSetting);
					if (!res.authSetting['scope.camera']) {
						wx.authorize({
							scope: 'scope.camera',
							success() {
								console.log('已同意授权');
								// 用户已经同意
								console.log('已同意授权', type);
								_this.takePhoto(type);
							}
						});
					} else {
						console.log('已授权');
						console.log('已同意授权', type);
						_this.takePhoto(type);
					}
				}
			});
		},
		takePhoto(type) {
			console.log('........', type);
			var _this = this;
			console.log('+++++++++相机分割线+++++++++++++++++++++++++');
			const ctx = uni.createCameraContext();
			console.log('ctx', ctx);
			ctx.takePhoto({
				quality: 'high',
				success: res => {
					console.log('takephoto-re', res.tempImagePath);
					var img = res.tempImagePath;
					ef.left_token(function(left_token) {
						//encodeURIComponent  encodeURI
						// var uploadUrl=ef.api_server_url+"?"+encodeURI('data=[["USERIDENTITYSELFUPLOAD",[{"type":"'+_this.img_type+'"}]]]')+"&token="+left_token;
						const uploadUrl = ef.api_server_url + '?' + encodeURI(`data=[["USERIDENTITYSELFUPLOAD",[{"type":"${type}"}]]]`) + '&token=' + left_token;
						uni.uploadFile({
							url: uploadUrl,
							filePath: img,
							fileType: 'image',
							name: 'file',
							success: res => {
								console.log('上传完成:', res);
								res = JSON.parse(res.data);
								console.log(res);
								res = res.data[0];

								// 是否成功
								if (res.errno == 0) {
									// 判断图片类型
									if (type == 'front') {
										_this.JSONS.front_image_id = res.data;
									} else {
										_this.JSONS.back_image_id = res.data;
									}
									uni.showToast({
										title: '上传成功',
										success() {
											_this.phoneShow = !_this.phoneShow;
											_this.phoneShowTwo = !_this.phoneShowTwo;
										}
									});
									console.log('JSONS.front_image_id',_this.JSONS.front_image_id)
								} else {
									uni.showToast({
										title: res.error,
										icon: 'none'
									});
								}
							},
							fail: err => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					});
				},
				fail() {
					fns.err('打开相机失败');
				},
				complete() {
					console.log('打开相机');
				}
			});
			console.log('+++++++++相机分割线+++++++++++++++++++++++++');
		},
		provinceChange: function(e) {
			console.log('省index:', e.target.value);
			this.province_index = e.target.value; //以选择序号省显示改变
			this.province_data = city[e.target.value].label; //省赋值
			console.log('province:', city[e.target.value].label);
			this.citys = []; //先清空城市
			this.citys_index = 0;
			var cityChildren = city[e.target.value].children;
			for (var i in cityChildren) {
				this.citys.push(cityChildren[i].label);
			} //城市数组更换
		},
		cityChange: function(e) {
			this.citys_index = e.target.value;
			this.city_data = city[this.province_index].children[this.citys_index].label;
			console.log('市：', e.target.value);
			console.log('市：', this.city_data);
		},
		next() {
			var that = this;
			// that.address=that.addresss+that.addressc+that.addresst;
			console.log('姓名', that.username);
			console.log('姓名', that.cardNumber);
			console.log('姓名', that.address);
			ef.submit({
				request: {
					s: [
						'USERIDENTITYSELFADD',
						[
							{
								real_name: that.username,
								card_number: that.cardNumber,
								card_address: that.addresst,
								province: that.Sprovince,
								city: that.Scity,
								district: that.Sdistrict
							}
						]
					],
					y: ['USERSELF']
				},
				callback: function(data) {
					console.log(data);
					var fns_ = fns.checkError(data, ['s'], function(erron, error) {
						fns.err('认证', error);
						return;
					});
					if (data.data.s.errno == 0) {
						uni.showToast({
							title: '已提交，等待审核',
							success() {
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 2000);
							}
						});
					}
				},
				error: function(err) {
					fns.err('', err, 1);
				}
			});
		},
		blurname: function(event) {
			this.username = event.target.value;
		},
		blurnumber: function(event) {
			var that = this;
			that.cardNumber = event.target.value;
			console.log('身份证号码');
			if (!/[0-9]{18}/.test(that.cardNumber)) {
				that.numberError = true;
			} else {
				that.numberError = false;
			}
		},
		bluraddresss: function(event) {
			this.addresss = event.target.value;
		},
		bluraddresc: function(event) {
			this.addressc = event.target.value;
		},
		bluraddress: function(event) {
			this.addresst = event.target.value;
		},
		// 上传身份证
		uploadIdentityImg(type) {
			const _this = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				success: res => {
					wx.showLoading({
						title: '上传中'
					});
					console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
					const file = res.tempFilePaths[0];
					ef.left_token(function(left_token) {
						//encodeURIComponent  encodeURI
						const uploadUrl = ef.api_server_url + '?' + encodeURI(`data=[["USERIDENTITYSELFUPLOAD",[{"type":"${type}"}]]]`) + '&token=' + left_token;
						uni.uploadFile({
							url: uploadUrl,
							filePath: file,
							fileType: 'image',
							name: 'file',
							success: res => {
								console.log('上传完成1:', res);
								res = JSON.parse(res.data);
								console.log(res);
								res = res.data[0];
								// 是否成功
								if (res.errno == 0) {
									// 判断图片类型
									if (type === 'front') {
										_this.JSONS.front_image_id = res.data;
									} else {
										_this.JSONS.back_image_id = res.data;
									}
									uni.showToast({
										title: '上传成功'
									});
								} else {
									uni.showToast({
										title: res.error,
										icon: 'none'
									});
								}
							},
							fail: err => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					});
				},
				fail: err => {
					console.log('chooseImage fail', err);
					uni.showToast({
						title: '你取消了图片上传',
						icon: 'none',
						duration: 2000,
						success() {
							_this.display = !_this.display;
						}
					});
				}
			});
		},
		ModifyThePicture() {
			var _this = this;
			_this.display = !_this.display;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				// sourceType: ['album'],
				success: res => {
					console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
					var imageSrc = res.tempFilePaths[0];
					ef.left_token(function(left_token) {
						//encodeURIComponent  encodeURI
						var uploadUrl = ef.api_server_url + '?' + encodeURI('data=[["USERIDENTITYSELFUPLOAD",[{"type":"front"}]]]') + '&token=' + left_token;
						uni.uploadFile({
							url: uploadUrl,
							filePath: imageSrc,
							fileType: 'image',
							name: 'file',
							success: res => {
								console.log('上传完成:', res);

								var dataList = fns.checkError(JSONS.parse(res.data), ['0'], function(erron, error) {
									console.log('上传错误', res.data);
									uni.showToast({
										title: error,
										icon: 'none'
									});
								});
								console.log('dataList:', dataList[0]);
								_this.Front_image_id = dataList[0];
								if (dataList[0]) {
									uni.showToast({
										title: '上传成功',
										icon: 'none',
										duration: 1000,
										success() {
											_this.headImgOne = imageSrc;
										}
									});
								}
							},
							fail: err => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					});
				},
				fail: err => {
					console.log('chooseImage fail', err);
					uni.showToast({
						title: '你取消了图片上传',
						icon: 'none',
						duration: 2000,
						success() {
							_this.display = !_this.display;
						}
					});
				}
			});
		},
		ModifyThePictureTwo() {
			var _this = this;
			_this.displayx = !_this.displayx;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album'],
				success: res => {
					console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
					var imageSrc = res.tempFilePaths[0];
					ef.left_token(function(left_token) {
						//encodeURIComponent  encodeURI
						var uploadUrl = ef.api_server_url + '?' + encodeURI('data=[["USERIDENTITYSELFUPLOAD",[{"type":"back"}]]]') + '&token=' + left_token;
						uni.uploadFile({
							url: uploadUrl,
							filePath: imageSrc,
							fileType: 'image',
							name: 'file',
							success: res => {
								console.log('上传完成:', res);

								var dataList = fns.checkError(JSONS.parse(res.data), ['0'], function(erron, error) {
									console.log('上传错误', res.data);
									uni.showToast({
										title: error,
										icon: 'none'
									});
								});
								console.log('dataList:', dataList[0]);
								_this.Back_image_id = dataList[0];
								if (dataList[0]) {
									uni.showToast({
										title: '上传成功',
										icon: 'none',
										duration: 1000,
										success() {
											_this.headImgTwo = imageSrc;
										}
									});
								}
							},
							fail: err => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					});
				},
				fail: err => {
					console.log('chooseImage fail', err);
					uni.showToast({
						title: '你取消了图片上传', //JSONS.stringify(err)
						icon: 'none',
						duration: 2000,
						success() {
							_this.displayx = !_this.displayx;
						}
					});
				}
			});
		}
	}
};
</script>

<style>
page{
	background-color: #F5F5F5;
}
.homeRight{
	width: 100%;
	height:100%;
}
.content{
	font-size: 28upx
}
.name{
	display: flex;
	width: 690upx;
	margin-left :30upx;
	border-radius: 10upx;
	height: 80upx;
	justify-content :center;
	align-items :center  ;
	flex-direction: row;
	padding-left :10upx;
	background-color :#FFFFFF;
	margin-top :20upx;
}
.primary{
	width :690upx;
	margin: 40px auto;
	color: #fff;
	background:linear-gradient(to right, #F29B87,#F8C6B5);
	z-index: 999;
}

.name input{
	width: 100%;
	height:40upx;
	line-height: 40upx;
	float:left;
	font-size: 28upx;
}
 textarea{
	font-size: 28upx;
}



.idbox{
	width: 690upx;
	margin-left: 30upx;
}
.idboxTitle{
	width: 100%;
	height: 80upx;
	line-height: 80upx;
	font-size: 30upx;
	color: #333333;
}
.idboxConten{
	width: 100%;
	/* height: 230upx; */
	background-color: #FFFFFF;
	border-radius: 10upx;
	padding: 30upx 0;
	display: flex;
}
.idboxConten_left{
	width: 200upx;
	height: 200upx;
	background-color: #F1F1F1;
	margin-left: 30upx;
}
.idboxConten_left image{
	width: 120upx;
	height: 100upx;
	margin-left: 40upx;
	margin-top: 20upx;
}
.idboxConten_left_text{
	width: 100%;
	height: 40upx;
	margin-top: 20upx;
	text-align: center;
	color: #333333;
}
.idboxConten_right{
	width: 320upx;
	height: 200upx;
	margin-left: 90upx;
}
.idboxConten_right image{
	width: 100%;
	height: 100%;
}
.area{
	width: 690upx;
	margin-left: 30rpx;
	background-color: #FFFFFF;
	border-radius: 10upx;
	margin-top: 30upx;
	padding-left: 3%;
}
.areaBox{
	width: 100%;
	height: 80upx;
	line-height: 80upx;
	border-bottom: #E4E4E4 solid 1upx;
	display: flex;
}
.areaBox_left{
	width: 94%;
	color: #333333;
}
.areaBox_right{
	width: 6%;
}
.areaBox_right image{
	width: 20upx;
	height: 25upx;
}
.detailAreaBox{
	width: 100%;
	height: 110upx;
	color: #333333;
	padding-top: 10upx;
}
.mask{
	top: 0;
	left: 0;
	background: #F5F5F5;
	width: 100%;
	height: 100vh;
	position: absolute;
	z-index: 1000;
}
</style>
