<template>
	<view :style="colorStyle" style="padding-bottom: 40rpx;">
		<view class="approval" v-if="status==1">
			已实名认证
		</view>
		<form @submit.stop="formSubmit" v-if="status==0||status==1||status==null" :disabled="status==1?true:false">
			<view class='addAddress'>
				<view class='list'>
					<view class="listItem">
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>{{$t(`姓名`)}}</view>
							<input type='text' :placeholder='$t(`请输入`)' name='name' v-model="infoForm.name"
								placeholder-class='placeholder'></input>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>{{$t(`身份证`)}}</view>
							<input type='text' :placeholder='$t(`请输入`)' name='id' v-model="infoForm.id"
								placeholder-class='placeholder'></input>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>{{$t(`手机号`)}}</view>
							<input type='text' :placeholder='$t(`请输入`)' name='phone' v-model="infoForm.phone"
								placeholder-class='placeholder'></input>
						</view>
					</view>
					<view  class="listItem">
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>{{$t(`企业名称`)}}</view>
							<input type='text' :placeholder='$t(`请输入`)' name='companyName' v-model="infoForm.companyName"
								placeholder-class='placeholder'></input>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>{{$t(`企业统一社会信用代码`)}}</view>
							<input type='text' :placeholder='$t(`请输入`)' name='companyId' v-model="infoForm.companyId"
								placeholder-class='placeholder'></input>
						</view>
					</view>
					<view  class="picContent">
						<view class="picTitle">
							<text>营业执照</text>
							<text>(请上传格式为jpg、png；大小不要超过5MB的图片)</text>
						</view>
						<view class="picContainer">
							<view class="picItem" v-for="(item,index) in infoForm.companyResPic" :key="index">
								<image :src="item" mode="aspectFill"></image>
								<text class='iconfont icon-guanbi1 font-num del' @click="DelPic(index,'companyResPic')"></text>
							</view>
							
							<view class='pictrue acea-row row-center-wrapper row-column bor' v-if="infoForm.companyResPic.length<4" @click="uploadpic(index,'companyResPic')">
								<text class='iconfont icon-icon25201'></text>
								<view>{{$t(`上传图片`)}}</view>
							</view>
						</view>
						
					</view>
					<view  class="picContent">
						<view class="picTitle">
							<text>店铺门头</text>
							<text>(请上传格式为jpg、png；大小不要超过5MB的图片)</text>
						</view>
						<view class="picContainer">
							<view class="picItem" v-for="(item,index) in infoForm.companyPics" :key="index">
								<image :src="item" mode="aspectFill"></image>
								<text class='iconfont icon-guanbi1 font-num del' @click="DelPic(index,'companyPics')"></text>
							</view>
							
							<view class='pictrue acea-row row-center-wrapper row-column bor' v-if="infoForm.companyPics.length<9" @click="uploadpic(index,'companyPics')">
								<text class='iconfont icon-icon25201'></text>
								<view>{{$t(`上传图片`)}}</view>
							</view>
						</view>
					</view>
				</view>
				<button class='keepBnt' form-type="submit" :disabled="status==1?true:false">{{$t(`提交资料`)}}</button>
				
			</view>
		</form>
		<view class="resultContent" v-if="status!=0">
			<view class="result" v-if="status==3">
				<view class="flag">
					<image :src="`${baseurl}/static/images/approval.png`" mode=""></image>
					<text>审核中</text>
				</view>
			</view>
			<view class="result" v-if="status==2">
				<view class="flag">
					<image :src="`${baseurl}/static/images/fail1.png`" mode=""></image>
					<text>未通过</text>
				</view>
				<view class="failReason">
					<view class="failTitle">
						拒绝原因
					</view>
					<view class="failContent">
						{{reason}}
					</view>
				</view>
				<button class='keepBnt' form-type="submit" @click="resetRenz">{{$t(`重新认证`)}}</button>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import { setRealInfo } from '@/api/api.js';
	import {getUserInfo} from '@/api/user.js';
	export default {
		components: {
			
		},
		
		data() {
			return {
				
				status:0, //0未认证  1通过  2拒绝  3审核中
				reason:'',
				baseurl:'',
				infoForm:{
					name:null,
					id:null,
					phone:null,
					companyName:'',
					companyId:'',
					companyResPic:[],
					companyPics:[],
				},
				
			};
		},
		
		onLoad(options) {
			this.baseurl = this.$baseurl;
			this.getUserInfoHandle()
		},
		methods: {
			uploadpic(index,val) {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', (res)=>{
					if(val=='companyResPic'){
						this.infoForm.companyResPic.push(res.data.url);
					}
					if(val=='companyPics'){
						this.infoForm.companyPics.push(res.data.url);
					}
					
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},
			DelPic(index,val) {
				let that = this;
				let pic;
				if(val=='companyResPic'){
					pic = this.infoForm.companyResPic[index];
					that.infoForm.companyResPic.splice(index, 1);
				}
				if(val=='companyPics'){
					pic = this.infoForm.companyPics[index];
					that.infoForm.companyPics.splice(index, 1);
				}
				
				
			},
			formSubmit(e) {
				console.log(e)
				let that = this,
					value = e.detail.value;
				if (!value.name.trim()) return that.$util.Tips({
					title: that.$t(`请填写姓名`)
				});
				if (!value.id) return that.$util.Tips({
					title: that.$t(`请填写身份证`)
				});
				if (!value.phone) return that.$util.Tips({
					title: that.$t(`请填写手机号`)
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				
				if (!value.companyName) return that.$util.Tips({
					title: that.$t(`请填写企业名称`)
				});
				if (!value.companyId) return that.$util.Tips({
					title: that.$t(`请填写企业统一社会信用代码`)
				});
				// uni.showLoading({
				// 	title: that.$t(`保存中`),
				// 	mask: true
				// })
				setRealInfo({
					realname:this.infoForm.name,
					idcardno:this.infoForm.id,
					phone:this.infoForm.phone,
					company_name:this.infoForm.companyName,
					company_code:this.infoForm.companyId,
					business_licens_ide:this.infoForm.companyResPic,
					shop_img_id:this.infoForm.companyPics,
				}).then(res => {
					
					if(res.code=='100014'){
						uni.setStorageSync('mark',this.infoForm.companyName)
						this.status = 3
					}
				})
				
			},
			resetRenz(){
				
				this.status = 0
			},
			getUserInfoHandle() {
				let that = this;
				getUserInfo().then(res => {
					
					this.status = res.data.renzheng.status;
					this.reason = res.data.renzheng.reason;
					this.infoForm.name = res.data.renzheng.realname;
					this.infoForm.id = res.data.renzheng.idcardno;
					this.infoForm.phone = res.data.renzheng.phone;
					this.infoForm.companyName = res.data.renzheng.company_name;
					this.infoForm.companyId = res.data.renzheng.company_code;
					if(res.data.renzheng.business_licens_ide&&res.data.renzheng.business_licens_ide.length>0){
						this.infoForm.companyResPic = JSON.parse(res.data.renzheng.business_licens_ide);
					}
					if(res.data.renzheng.business_licens_ide&&res.data.renzheng.shop_img_id.length>0){
						this.infoForm.companyPics = JSON.parse(res.data.renzheng.shop_img_id);
					}
					
					
					
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	// .fontcolor {
	// 	color: var(--view-theme);
	// }

	// .addAddress .list {
	// 	background-color: #fff;
	// }
	.list{
		.listItem{
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 24rpx;
		}
		.picContent{
			
			margin: 24rpx;
			background: #FFFFFF;
			padding:30rpx;
			.picTitle{
				&>text:first-child{
					
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
				}
				&>text:last-child{
					
					font-size: 22rpx;
					color: #999999;
					margin-left:24rpx;
				}
			}
			.picContainer{
				margin-top: 29rpx;
				display: flex;
				flex-wrap: wrap;
				.picItem{
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					position: relative;
					image{
						width: 160rpx;
						height: 160rpx;
						background: #F1F2F2;
						border-radius: 10px;
					}
					.del {
						position: absolute;
						top: 0;
						right: 0;
						z-index:99;
					}
				}
			}
			.pictrue {
				position: relative;
				font-size: 22rpx;
				color: #bbb;
				width: 160rpx;
				height: 160rpx;
				background: #F1F2F2;
				border-radius: 10px;
				
			
				
			}
		}
	}

	.addAddress .list .item {
		border-top: 1rpx solid #eee;
		padding: 40rpx 30rpx;
		flex-wrap: nowrap;
	}

	.addAddress .list .item .name {
		width: 295rpx;
		font-size: 30rpx;
		color: #333;
	}

	.addAddress .list .item .address {
		// width: 412rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.addAddress .list .item input {
		// width: 475rpx;
		flex:1;
		font-size: 30rpx;
		text-align: right;
	}

	.addAddress .list .item .placeholder {
		color: #ccc;
	}

	.addAddress .list .item picker {
		width: 475rpx;
	}

	.addAddress .list .item picker .picker {
		width: 410rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item picker .iconfont {
		font-size: 43rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.keepBnt {
		margin:40rpx 24rpx;
		height: 98rpx;
		background: #A8D178;
		border-radius: 49px;
		border: 1px solid #A8D178;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 98rpx;
	}
	.approval{
		
		height: 76rpx;
		background: rgba(228, 136, 78, 0.1);
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #E4884E;
		line-height: 76rpx;
		padding-left: 24rpx;
	}
	.resultContent{
		.result{
			.flag{
				margin-top:87rpx;
				
				display: flex;
				flex-direction: column;
				text-align: center;
				width: 100%;
				align-items: center;
			}
			
			image{
				width:160rpx;
				height:160rpx;
			}
			text{
				
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 36rpx;
				color: #333333;
				margin-top:30rpx;
			}
			.failReason{
				margin: 24rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 40rpx 30rpx;
				.failTitle{
					font-size: 30rpx;
					color: #333333;
				}
				.failContent{
					margin-top:21rpx;
					padding:30rpx 24rpx;
					background: #F9F9F9;
					border-radius: 10px;
					font-size: 30rpx;
					color: #E4884E;
				}
			}
		}
	}
</style>
