<template>
	<view class="wrap">
		<view class="banner">
			<image src="https://wx.fujinyangche.com/nvrnetwork/images/renzheng_banner.png"></image>
		</view>
		<view class="title">企业认证资料提交</view>
		<view class="add_wrap">
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">公司全称</text>
				<input class="inp_name" v-model="companyName" placeholder="输入您的公司全称" placeholder-class="inp_name_place"></input>
			</view>
			<view class="write_data_item">
				<text class="write_data_item_lf" space="ensp">法人姓名</text>
				<input class="inp_name" placeholder="输入您的法人姓名" v-model="legalPerson" placeholder-class="inp_name_place"></input>
			</view>
		</view>
		<view class="choose_image">
			<view class="choose_image_item" v-for="item,index in list" :key="index">
			    <view class="left">
					<view class="left_title">{{item.title}}</view>
					<view class="left_com">{{item.com}}</view>
			    </view>
			    <view :class="['right',item.class]">
					<image mode="aspectFill" :src="url + item.url" @tap="chooseImage(index)"></image>
			    </view>
			</view>
		</view>
		<view class="explain">
			<view class="other">
				<view class="iconfont gantan"></view>
				<view class="other_title">其他说明</view>
			</view>
			<view class="other_tit"><view class="radius"></view>支持JPG、JPEG、PNG格式</view>
			<view class="other_tit tit2"><view class="radius"></view>上传图片必须为实物图片，并且露出四个角</view>
			<view class="agree clear" @tap="changeCheck">
				<view class="check"><image :src="check == 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image></view>
				<view class="agree_title">我已阅读并同意<navigator open-type="navigate" hover-class="none" url="../agreement/agreement" class="i">《企业认证服务协议》</navigator></view>
			</view>
		</view>
		<view class="footer">
			<button class="submit" @tap="save">提交</button>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import api from "../../../../api.js";
	export default {
		data() {
			return {
				companyName:'',//公司名称
				legalPerson:'',//法人姓名
				list:[
					{title:'企业营业执照',com:'营业执照中信息必须与工商信息一致，照片清晰',class:'right1',url:'',},
					{title:'法人身份证正面',com:'法定代表人身份证姓名必须与企业法定代表人姓名一致，要求照片清晰',class:'right2',url:'',},
					{title:'法人身份证反面',com:'要求照片清晰',class:'right3',url:'',},
				],
				url:app.globalData.url,
				descriptor:{
				  companyName: {
				    type: "string",
				    required: true,
				    message:'请输入公司名称'
				  },
				  legalPerson: {
				    type: "string",
				    required: true,
				    message:'请输入公司法人姓名'
				  },
				  businessImg:{
					type: "string",
					required: true,
					message:'请上传营业执照'  
				  },
				  idFrontImg:{
					type: "string",
					required: true,
					message:'请上传身份证正面'   
				  },
				  idReverseImg:{
				  	type: "string",
				  	required: true,
				  	message:'请上传身份证反面'   
				  }
				},//表单验证协议
				check:0,//是否同意协议
			}
		},
		methods: {
			//上传图片
			chooseImage(index){
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album', 'camera'],
				    success: res => {
				        const tempFilePaths = res.tempFilePaths[0];
				        uni.uploadFile({
							url: app.globalData.url + '/nvrnetwork/authentication/upload_img',
							filePath: tempFilePaths,
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data);
								console.log(data);
								this.list[index].url = data.data;
							}
				        })
				    }
				})
			},
			// 同意协议点击按钮
			changeCheck(){
			    if(this.check == 0){
			        this.check = 1;
			    }else{
			        this.check = 0;
			    }
			},
			//提交按钮
			save(){
				let data = {
					token:app.globalData.token,
					companyName: this.companyName,
					legalPerson: this.legalPerson,
					businessImg:this.list[0].url,
					idFrontImg:this.list[1].url,
					idReverseImg:this.list[2].url,
				}
				this.$schema(data,this.descriptor);
				if(this.check == 0){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请同意协议'
					})
				}else{
					api.submitVipData(data).then((res)=>{
						console.log(res)
					})
				}
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	  background-color: #f9f9f9;
	}
	.add_wrap{
	  width:100%;
	  padding:0 30rpx;
	  box-sizing: border-box;
	}
	.write_data_item{
	  width:100%;
	  padding:0 30rpx;
	  height:100rpx;
	  background-color: #ffffff;
	  line-height: 100rpx;
	  box-sizing: border-box;
	  margin-bottom: 20rpx;
	}
	.select_messgae_item_text{
	  width:100%;
	  height:100%;
	  overflow: hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	}
	.write_data_item_lf{
	  font-size: 30rpx;
	  color:#666666;
	  float:left;
	}
	.write_data_item_rg{
	  float:right;
	  font-size: 30rpx;
	  color:#222222;
	}
	.inp_name{
	  width:75%;
	  float:right;
	  height:100%;
	  text-align:right;
	}
	.setCity{
	  height:98rpx;
	}
	.inp_name_place{
	  font-size: 30rpx;
	  color:#999999;
	  text-align: right;
	}
	.check{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  float:left;
	  margin-top:6rpx;
	}
	.check image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.banner{
	  width:100%;
	  height:328rpx;
	}
	.banner image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.title{
	  font-size: 32rpx;
	  color:#222222;
	  text-align: center;
	  font-weight: bold;
	  margin:60rpx 0 56rpx 0;
	}
	.choose_image{
	  width:100%;
	  padding:0 30rpx;
	  box-sizing: border-box;
	}
	.choose_image_item{
	  width:100%;
	  height:230rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 0px 12rpx 0px rgba(85,85,85,0.1);
	  border-radius:6rpx;
	  padding:38rpx 54rpx 0 30rpx;
	  box-sizing: border-box;
	  margin-bottom: 20rpx;
	}
	.left{
	  width:306rpx;
	  height:100%;
	  float:left;
	}
	.left_title{
	  font-size: 30rpx;
	  color:#222222;
	}
	.left_com{
	  font-size: 22rpx;
	  color:#BFBFBF;
	  line-height: 32rpx;
	  margin-top:12rpx;
	}
	.right{
	  width:244rpx;
	  height:154rpx;
	  position: relative;
	  float:right;
	  overflow: hidden;
	}
	.right1{
	  background-image: url('https://wx.fujinyangche.com/nvrnetwork/images/choose01.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.right2{
	  background-image: url('https://wx.fujinyangche.com/nvrnetwork/images/choose02.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.right3{
	  background-image: url('https://wx.fujinyangche.com/nvrnetwork/images/choose03.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	}
	.right image{
	  display: block;
	  width:100%;
	  height:100%;
	  position: absolute;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%);
	}
	.explain{
	  width:100%;
	  padding:0 30rpx 140rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	  margin-top:36rpx;
	}
	.other{
	  display: flex;
	  align-items: center;
	}
	.gantan{
	  width:32rpx;
	  height:32rpx;
	  color:#F08300;
	  display: inline-block;
	  vertical-align: text-bottom;
	}
	.other_title{
	  height: 64rpx;
	  line-height: 64rpx;
	  font-size: 28rpx;
	  color:#666666;
	  display: inline-block;
	  margin-left: 8rpx;
	}
	.other_tit{
	  font-size: 24rpx;
	  color:#999999;
	  margin-top:24rpx;
	  position: relative;
	  padding-left: 18rpx;
	  box-sizing: border-box;
	}
	.tit2{
	  margin-top:10rpx;
	}
	.agree{
	  margin-top:34rpx;
	}
	.check{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  background:rgba(239,239,239,1);
	  border:1px solid rgba(208,208,208,1);
	  display: inline-block;
	  vertical-align: text-bottom;
	}
	.right_icon{
	  width:28rpx;
	  height:28rpx;
	  border-radius: 50%;
	  background:#E77817;
	  color:#ffffff;
	  display: inline-block;
	  vertical-align: text-bottom;
	}
	.agree_title{
	  font-size: 28rpx;
	  color:#222222;
	  display: inline-block;
	  margin-left: 6rpx;
	}
	.i{
	  display: inline;
	  color:#F08300;
	}
	.radius{
	  width:8rpx;
	  height:8rpx;
	  background-color: #F08300;
	  border-radius: 50%;
	  position: absolute;
	  top:14rpx;
	  left:0rpx;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%)
	}
</style>
