<template>
	<!-- #ifdef H5 -->
	<zj-page-layout :hasFooter="true">
		<template slot="header">
			<view class="mode">
				<view class="content">
					<h3>联系信息</h3>
					<view class="item flex">
						<view class="required">姓名</view>
						<view class="flex" style="flex: 1;">
							<input v-model="name" type="text" placeholder="请输入姓名">
						</view>
					</view>
					<view class="item flex">
						<view class="">身份证号</view>
						<view class="flex" style="flex: 1;">
							<input v-model="idcard" maxlength="18" type="text" placeholder="请输入身份证号">
						</view>
					</view>
					<view class="item">
						<view class="imgs" @tap="toChooseImg('idCardImg')">
							<image class="del" @tap.stop="idCardImg = ''" v-show="idCardImg"
								src="/static/mine/workerEnter/del.png" mode="aspectFill"></image>
							<image id="img" v-if="idCardImg" :src="idCardImg" mode="aspectFill"
								@tap.stop="previewImage(idCardImg)"></image>
							<view v-else class="addimg">
								<image src="/static/mine/workerEnter/camera.png" mode="aspectFit"></image>
							</view>
							<view class="text">身份证正面</view>
						</view>
					</view>
					<view class="zhu">注意：支持PNG、JPG、JPEG，每张大小不可超过1M</view>
				</view>
			</view>
		</template>

		<template slot="footer">
			<view class="flex xieyi">
				<image :src=" isChecked ? '/static/mine/workerEnter/them_check.png' : '/static/mine/workerEnter/gray_uncheck.png' "
				mode="" @tap.stop="isChecked = !isChecked"></image>
				<view class="">我已阅读并同意</view>
				<view class="notification" @tap="navToPage('/packageMine/pages/agreement?type=3')">《服务协议》</view>
			</view>
			<view class="btn" @click="submit()">提交审核</view>
		</template>
	</zj-page-layout>
	<!-- #endif -->

	<!-- #ifndef H5 -->
	<web-view :src="webViewHref(`/packageMine/pages/distributorEnter`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
	<!-- #endif -->
</template>

<script>
	// #ifdef H5
	import { uploadImgFull } from '@/common/utils/util.js';
	import verify from '@/common/utils/verify.js';
	export default {
		data() {
			return {
				isShowWebsitDialog: false,
				isChecked: false,
				name: '',
				idcard: '',
				idCardImg: '',
				imageUrl: this.$imageUrl,
			}
		},

		onLoad() {
			this.getUser()
		},
		computed: {

		},

		methods: {
			getUser(){
				this.$api.get('/user/user/detail', {
					userId: this.$store.state.user.userId,
				}).then(res => {
					this.idcard = res.data.idCard
					this.idCardImg = res.data.idCardImg
					// this.name = res.data.nickName
				})
			},
			
			// 选择图片
			async toChooseImg(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: res => {
						this.uploadImage(res.tempFilePaths[0], type);
					},
					fail: err => {
						console.log(err);
					}
				})
			},

			// 上传文件
			async uploadImage(file, type) {
				let data = await uploadImgFull(file);
				uni.hideLoading()
				this[type] = data.url;
			},

			// 预览图片
			previewImage(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			},

			async checkForm() {
				if (!this.name) {
					this.$tips('请输入姓名！');
					return true
				}
				//  else if (!this.idcard) {
				// 	this.$tips('请输入身份证号码！');
				// 	return true
				// } else if (!verify.isIdCard(this.idcard)) {
				// 	this.$tips('身份证号码格式不正确，请输入正确身份证号码！');
				// 	return true
				// } else if (!this.idCardImg) {
				// 	this.$tips('请上传身份证正面照！');
				// 	return true
				// }
				 else if(!this.isChecked){
					this.$tips('请先阅读并同意服务协议！')
					return true
				}
			},

			async submit() {
				const that = this
				let is_save = await this.checkForm()
				if (!is_save) {
					this.$api.postJson('/user/apply', {
						idCard: this.idcard,
						idCardImg: this.idCardImg,
						name: this.name,
						type: 'SERVICE',
					}, true, true, true).then(res => {
						if (res.code == 200) {
							this.$toast('提交审核成功！')
							setTimeout(()=>{
								this.$navToPage({
								    delta: 1
								}, 'navigateBack')
							},1500)
						} else {
							this.$tips(res.msg)
						}
					})
				}
			},
			navToPage(url){
				this.$navToPage({
					url
				})
			}
		},
	}

	// #endif
	// #ifndef H5
	export default {
		data() {
			return {
				pam: {},
			}
		},
		onLoad(pam) {
			this.pam = pam;
		}
	}
	// #endif
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
	}
	.flex_asb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.mode {
		background-color: #ffffff;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		h3 {
			margin-bottom: 60rpx;
		}
		.required:before {
			content: '*';
			color: #ff0000;
		}
		.item {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;
			box-sizing: border-box;
			input {
				flex: 1;
				text-align: right;
				padding: 0 20rpx;
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.imgs {
		text-align: center;
		position: relative;
		#img {
			width: 690rpx;
			height: 320rpx;
			padding: 30rpx 0;
		}
		.addimg {
			width: 690rpx;
			height: 320rpx;
			border: 1rpx solid #eeeeee;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 30rpx 0;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
		.text {
			color: #999999;
		}
		.del {
			width: 38rpx !important;
			height: 38rpx !important;
			position: absolute;
			right: -14rpx;
			top: 8rpx;
			z-index: 9;
		}
	}
	.zhu{
		margin-top: 30rpx;
		color: #ffa700;
	}
	.btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #0379FF;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}
	.notification{
		color: #0379FF;
	}
	.xieyi{
		padding: 30rpx;
		font-size: 28rpx;
		image{
			border: 2rpx #00BFFF;
			border-radius: 50%;
			height: 40rpx;
			width: 40rpx;
			vertical-align: sub;
			margin-right: 30rpx;
		}
	}
</style>