<template>
	<view class="personAttestation">
		<!-- <view class="status_bar">这里是状态栏</view> -->
		<far-bottom></far-bottom>
		<scroll-view :style="{ height: phoneHight }" :scroll-y="true">
			<!-- <image :src="grrzBack" class="wid750 "></image> -->
			<view class="mainView absolute0">
				<!-- 基本信息 -->
				<view class="informationView marginAuto">
					<view class="p30">
						<view>
							<view class="line inlineBlock verticalM"></view>
							<text class="colorBlack font28 verticalM marginL10">基本信息</text>
						</view>
						<view class="marginT29">
							<view class="inputView">
								<text class="colorBlack font24 verticalM">姓名</text>
								<input placeholder="请输入真实姓名" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="userInfo.name" />
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">身份证</text>
								<input placeholder="请输入正确的身份证号码" class="colorBlack font24 inlineBlock verticalM p0p50" v-model="userInfo.cardnum" />
							</view>
							<view class="inputView marginT18">
								<text class="colorBlack font24 verticalM">联系电话</text>
								<input placeholder="请输入联系电话" class="colorBlack font24 inlineBlock verticalM p0p50" type="number" v-model="userInfo.phone" />
							</view>
						</view>
					</view>
				</view>
				<!-- 基本信息 -->
				<!-- 上传证件 -->
				<view class="uploadView marginAuto marginT35">
					<view class="p30">
						<view>
							<view class="line inlineBlock verticalM"></view>
							<text class="colorBlack font28 verticalM marginL10">上传证件</text>
						</view>
						<view class="marginT29 flex">
							<view class="uploadButton inlineBlock textC" @click="uploadFiles(1)" v-if="picArray[0] == '' || picArray[0] == undefined">
								<image :src="sfzZ" class="upLoadImg marginT30auto"></image>
								<view class="marginT35"><text class="color999999 font24 ">身份证正面</text></view>
							</view>
							<view class="uploadButton inlineBlock textC" v-else @click="uploadFiles(1)"><image :src="picArray[0]" class="imageHave"></image></view>
							<view class="uploadButton inlineBlock textC" @click="uploadFiles(2)" v-if="picArray[1] == '' || picArray[1] == undefined">
								<image :src="sfzB" class="upLoadImg marginT30auto"></image>
								<view class="marginT35"><text class="color999999 font24 ">身份证反面</text></view>
							</view>
							<view class="uploadButton inlineBlock textC" v-else @click="uploadFiles(2)"><image :src="picArray[1]" class="imageHave"></image></view>
						</view>
					</view>
				</view>
				<!-- 上传证件 -->
				
				<!-- 更多信息 -->
				<view class="uploadView marginAuto marginT35" style="height: auto;" v-if="orderSubmitInfoData.diyformid">
					<view class="p30">
						<view>
							<view class="line inlineBlock verticalM"></view>
							<text class="colorBlack font28 verticalM marginL10">更多信息</text>
						</view>
						<form-item ref="formItem" :gopay="gopay" :gopaytwo="gopaytwo" :orderSubmitInfo="orderSubmitInfoData"></form-item>
					</view>
				</view>
				
				<!-- 协议 -->
				<view class="marginT40">
					<view class="pL30">
						<view class="bor1gray" v-if="agree == false" @click="agree = true"></view>
						<image :src="imgfixUrls + 'merchant/tyXy.png'" class="image22" v-if="agree == true" @click="agree = false"></image>
						<text class="font24 color999999 marginL10"  @click="agree = !agree">阅读并同意</text>
						<text class="font24 color4F6D8C" @click="showPop">《用户协议条款》</text>
					</view>
				</view>
				<!-- 协议 -->

				<!-- 提交按钮 -->
				<view class="marginT70auto textC" :class="agree == true ? 'submitButton' : 'submitButton1'" @click="setInfo">
					<text class="lineHeight80 colorW font28">提交</text>
				</view>
				<!-- 提交按钮 -->
				<popAgreement :show="show" @clickmask="closePop" :buttonColor="buttonColor" :textInfo="userInfo.agreement"></popAgreement>
			</view>
		</scroll-view>
		<view  v-if="type == 1">
			<TabBars :tabBarAct="0" pageType="18"></TabBars>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import TabBars from '@/components/template/tabBar.vue';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
import popAgreement from '@/components/template/popAgreement';
import formItem from '@/components/template/formItem.vue'
export default {
	components: {
		popAgreement,
		TabBars,
		formItem
	},
	data() {
		return {
			agree: false,
			phoneHight: null,
			show: false,
			buttonColor: 'rgba(255,68,68,1)',
			userInfo: {},
			picArray: [],
			id: null,
			rzType: null,
			type:null,
			gopay:true,
			orderSubmitInfoData:{},
			gopaytwo:true
		};
	},
	computed: {
		grrzBack() {
			let _this = this;
			return _this.imageRoot + 'grrzBack.png';
		},
		sfzZ() {
			let _this = this;
			return _this.imageRoot + 'sfzZ.png';
		},
		sfzB() {
			let _this = this;
			return _this.imageRoot + 'sfzB.png';
		}
	},
	onLoad(e) {
		let _this = this;
		_this.type  = e.type;
		_this.rzType = e.rzType;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight + 'px';
			}
		});
		uni.getStorage({
			key: 'userinfo',
			success: async function(res) {
				_this.init(res.data.mid);
				_this.id = res.data.mid;
			}
		});
	},
	methods: {
		init(mid) {
			let _this = this;
			// #ifdef H5
			wxApi.wxRegister();
			// #endif
			_this.getInfo(mid);
		},
		// 信息设置接口
		getInfo(mid) {
			let _this = this;
			let data = {
				type: 1,
				sid: mid,
				operation: 'get'
			};
			App._post_form('&p=attestation&do=infoSet', data, res => {
				_this.userInfo = res.data;
				_this.orderSubmitInfoData = res.data;
				_this.gopaytwo = false;
				setTimeout(()=>{
					_this.gopaytwo = true;
				},2000)
				for(let i=0;i<res.data.pic.length;i++){
					_this.picArray.push(res.data.pic[i])
				}
			});
		},
		setInfo() {
			let _this = this;
			_this.gopay = false;
			setTimeout(()=>{
				_this.gopay = true;
			},2000)
			let data = {
				type: 1,
				sid: _this.id,
				operation: 'set',
				att_id: _this.userInfo.att_id,
				name: _this.userInfo.name,
				phone: _this.userInfo.phone,
				pic: _this.userInfo.pic,
				cardnum: _this.userInfo.cardnum
			};
			if(_this.userInfo.name==''){
				uni.showToast({
					icon:'none',
				    title: '姓名不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.userInfo.phone==''){
				uni.showToast({
					icon:'none',
				    title: '联系电话不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.userInfo.cardnum==''){
				uni.showToast({
					icon:'none',
				    title: '身份证号不能为空',
				    duration: 2000
				});
				return ;
			}
			if(_this.userInfo.pic.length<2){
				uni.showToast({
					icon:'none',
				    title: '请上传证件正反面',
				    duration: 2000
				});
				return ;
			}
			setTimeout(()=>{
				if(_this.$refs.formItem){
					if( _this.$refs.formItem.ifrequired == false){
						uni.showToast({
							icon: 'none',
							title: '请完善必填信息'
						});
						return
					}
					let datas = _this.$refs.formItem.formList;
					data.datas = JSON.stringify(datas);
					App._post_form('&p=attestation&do=infoSet',data, res => {
						App.navigationTo({
							url: 'pages/subPages/attestationCenter/index?rzType=' + _this.rzType
						});
					});
				}else{
					App._post_form('&p=attestation&do=infoSet',data, res => {
						App.navigationTo({
							url: 'pages/subPages/attestationCenter/index?rzType=' + _this.rzType
						});
					});
				}
				
			})
			// App._post_form('&p=attestation&do=infoSet', data, res => {
			// 	App.navigationTo({
			// 		url: 'pages/subPages/attestationCenter/index?rzType=' + _this.rzType
			// 	});
			// });
		},
		// 文件上传接口
		async uploadFiles(type) {
			let _this = this;
			// #ifdef H5
			if(App.getClientType() == 2){
			     let res = await App.browser_upload(6);
			     for (let i = 0; i < res.tempFilePaths.length; i++) {
			     	let aa = await App._upLoad(res.tempFilePaths[i]);
			     	if (type == 1) {
			     		_this.userInfo.pic.splice(0, 1, aa.data.image);
			     		_this.picArray.splice(0, 1, aa.data.img);
			     	} else {
			     		_this.userInfo.pic.splice(1, 1, aa.data.image);
			     		_this.picArray.splice(1, 1, aa.data.img);
			     	}
			     }
			
			     return
			    }
			wxApi.choseImage(res => {
				wxApi.uoloadIg(res.localIds[0], data => {
					if (data.errMsg === 'uploadImage:ok') {
						uni.showLoading({});
						let requestData = {
							upload_type: 2,
							id: data.serverId
						};
						App._post_form(
							'&do=uploadFiles',
							requestData,
							res => {
								if (res.errno === 0) {
									if (type == 1) {
										_this.userInfo.pic.splice(0, 1, res.data.image);
										_this.picArray.splice(0, 1, res.data.img);
									} else {
										_this.userInfo.pic.splice(1, 1, res.data.image);
										_this.picArray.splice(1, 1, res.data.img);
									}
								}
							},
							false,
							() => {
								uni.hideLoading();
							}
						);
					} else {
						uni.hideLoading();
						App.showError('上传失败');
					}
				});
			});
			// #endif
			// #ifndef H5
			wx.chooseImage({
				count: 6,
				sourceType: ['album', 'camera'],
				success: async function(res) {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						let aa = await App._upLoad(res.tempFilePaths[i]);
						if (type == 1) {
							_this.userInfo.pic.splice(0, 1, aa.data.image);
							_this.picArray.splice(0, 1, aa.data.img);
						} else {
							_this.userInfo.pic.splice(1, 1, aa.data.image);
							_this.picArray.splice(1, 1, aa.data.img);
						}
					}
				}
			});
			// #endif
		},
		closePop() {
			let _this = this;
			_this.show = false;
		},
		showPop() {
			let _this = this;
			_this.show = true;
		}
	}
};
</script>

<style lang="less">
.submitButton1 {
	width: 690upx;
	height: 80upx;
	background: #999999;
	border-radius: 40upx;
	pointer-events: none;
}
.bor1gray {
	width: 21upx;
	height: 21upx;
	display: inline-block;
	background: white;
	border: 1upx solid #999999;
	border-radius: 50%;
}
.personAttestation {
	padding-bottom: 100upx;
	font-size: 0;
	background-color: #f8f8f8;
}
.wid750 {
	width: 750upx;
	height: 340upx;
}
.informationView {
	width: 690upx;
	height: 402upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.marginAuto {
	margin: auto;
}
.absolute0 {
	// position: absolute;
	// top: 179upx;
	width: 750upx;
}
.line {
	width: 8upx;
	height: 27upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 4upx;
}
.colorBlack {
	color: rgba(51, 51, 51, 1);
}
.font28 {
	font-size: 28upx;
}
.font24 {
	font-size: 24upx;
}
.inlineBlock {
	display: inline-block;
}
.verticalM {
	vertical-align: middle;
}
.marginL10 {
	margin-left: 10upx;
}
.p30 {
	padding: 30upx;
}
.pL30 {
	padding: 0 30upx;
}
.marginT29 {
	margin-top: 29upx;
}
.marginT40 {
	margin-top: 40upx;
}
.inputView {
	width: 630upx;
	height: 83upx;
	background: rgba(250, 250, 250, 1);
	border-radius: 10upx;
	> text {
		display: inline-block;
		line-height: 83upx;
		width: 126upx;
		text-align: right;
	}
	> input {
		height: 100%;
		width: 400upx;
	}
}
.marginT18 {
	margin-top: 18upx;
}
.marginT35 {
	margin-top: 35upx;
}
.marginT30auto {
	margin: 30upx auto 0 auto;
}
.p0p50 {
	padding: 0 50upx;
}
.uploadView {
	width: 690upx;
	height: 379upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.uploadButton {
	width: 290upx;
	height: 263upx;
	background: rgba(248, 248, 248, 1);
	border-radius: 10upx;
}
.imageHave {
	width: 290upx;
	height: 263upx;
}
.flex {
	display: flex;
	justify-content: space-between;
}
.upLoadImg {
	width: 212upx;
	height: 141upx;
}
.color999999 {
	color: rgba(153, 153, 153, 1);
}
.color4F6D8C {
	color: #4f6d8c;
}
.textC {
	text-align: center;
}
.image22 {
	width: 22upx;
	height: 22upx;
}
.submitButton {
	width: 690upx;
	height: 80upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 40upx;
}
.marginT70auto {
	margin: 70upx auto 20upx auto;
}
.lineHeight80 {
	line-height: 80upx;
}
.colorW {
	color: rgba(255, 255, 255, 1);
}
//
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	padding-bottom: 15px;
	background-color: transparent;
	position: fixed;
	top: 0px;
	z-index: 99;
}
</style>
