<template>
	<view :style="appThemeStyle">
		<u-form :model="form" ref="uForm" label-width="140rpx">
			<!-- {{JSON.stringify(setting)}} -->
			<u-form-item label="意向配送区域" prop="region">
				<select-region ref="sRegion" :disabled="disabled" v-model="form.region" />
			</u-form-item>
			<u-form-item label="姓名" prop="real_name">
				<u-input v-model="form.real_name" :disabled="disabled" placeholder="请输入商户姓名" />
			</u-form-item>
			<u-form-item label="手机号码" prop="mobile">
				<u-input v-model="form.mobile" maxlength="11" :disabled="disabled" placeholder="请输入商户手机号" />
			</u-form-item>
			<Partner :form="form"></Partner>
			<u-form-item v-for="(item,imageIndex) in imageList" :key="imageIndex" :label="itemLabel[imageIndex]"
				:prop="itemProp[imageIndex]">
				<view class="image-preview">
					<image mode="widthFix" :src="item.path" class="sfz" @click="chooseImage(imageIndex)"></image>
					<text class="image-delete iconfont icon-shanchu" @click="deleteImage(imageIndex)"></text>
				</view>
			</u-form-item>
			<view class="form-license dis-flex flex-x-center flex-y-center">
				<view class="license-radio dis-flex flex-y-center" @click="isRead = !isRead">
					<text class="license-icon f-38 iconfont icon-radio"
						:class="[isRead ? 'c-violet' : 'col-bb']"></text>
					<text class="f-28 col-80">我已阅读并了解</text>
				</view>
				<text @click="handleShowLicense()" class="f-28 c-violet">【{{ setting.words.apply.words.license.value }}】</text>
			</view>
		</u-form>
		<!-- 入驻协议弹窗 -->
		<u-modal v-model="showLicense" title="入驻协议">
			<scroll-view class="pops-content" :scroll-y="true">
				<text>{{ setting.license }}</text>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	import SelectRegion from '@/components/select-region/select-region'
	import {
		isMobile
	} from '@/utils/verify'
	import Empty from '@/components/empty'
	import * as ApplyApi from '@/api/apply.js'
	import * as UploadApi from '@/api/upload'
	import SettingModel from '@/common/model/dealer/Setting'

	// 图片上传类型
	const itemProp = ["sfz1", "sfz2", "yyzz"]
	// 图片上传名称
	const itemLabel = ["身份证(正)", "身份证(反)", "营业执照"]
	// 用户选择的图片列表
	const imageList = [{
			path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/6b52b67ed9291757163c10ef96be1a54.png',
			size: 100
		},
		{
			path: 'http://dev.gxwebsoft.com/hainiu/uploads/10001/20220522/55faad35f5ee30f3e8791bdfd2f75eb9.png',
			size: 100
		}
	]
	
	// 表单字段元素
	const form = {
		// 入驻类型 （商家10001,配送员10002,社区门店10003,省代10004）
		grade_id: 10001,
		company: '',
		real_name: '',
		phone: '',
		mobile: '',
		region: [],
		detail: '',
	}
	
	// 表单验证规则
	const rules = {
		real_name: [{
			required: true,
			message: '请输入您的真实姓名',
			trigger: ['blur', 'change']
		}],
		company: [{
			required: true,
			message: '请输入您的公司名称',
			trigger: ['blur', 'change']
		}],
		phone: [{
			required: true,
			message: '请输入联系电话',
			trigger: ['blur', 'change']
		}],
		mobile: [{
			required: true,
			message: '请输入手机号',
			trigger: ['blur', 'change']
		}, {
			// 自定义验证函数
			validator: (rule, value, callback) => {
				// 返回true表示校验通过，返回false表示不通过
				return isMobile(value)
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['blur'],
		}],
		region: [{
			required: true,
			message: '请选择省市区',
			trigger: ['blur', 'change'],
			type: 'array'
		}],
		detail: [{
			required: true,
			message: '请输入详细地址',
			trigger: ['blur', 'change']
		}],
	}
	
	const maxImageLength = 2
	
	
	export default {
		components: {
			Empty
		},
		props: {
			record: {
				type: Object,
				default: null
			},
			setting: {
				type: Object,
				default: null
			},
		},
		data() {
			return {
				itemProp,
				itemLabel,
				imageList,
				form,
				rules,
				// 入驻协议阅读状态
				isRead: false,
				// 显示入驻协议弹窗
				showLicense: false,
				// 按钮禁用
				disabled: false,
			}
		},
		created() {
		  // 设置分类列表高度
		  this.getSetting()
		},
		// onLoad(options) {
		// 	const app = this
		// 	this.getSetting()
		// 	// 获取用户坐标
		// 	app.getLocation((res) => {
		// 	  app.getData(res.longitude, res.latitude)
		// 	})
			
		// },
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 获取分销设置
			getSetting() {
				const app = this
				console.log("app.setting: ",this.setting);
				// SettingModel.data()
				// 	.then(setting => {
				// 		// 赋值属性
				// 		app.words = setting.words.apply.words
				// 		app.background = setting.background.apply
				// 		app.license = setting.license.license
				// 		// 设置当前页面标题
				// 		// app.setPageTitle(setting.words.apply.title)
				// 	})
			},
			// 显示入驻协议弹窗
			handleShowLicense() {
				this.showLicense = true
			},

		}
	}
</script>

<style lang="scss" scoped>
	.form-license {
		padding: 20rpx;
	}
	// 上传凭证
	.row-voucher {
		padding: 24rpx 20rpx;
	
		.image-list {
			padding: 0 20rpx;
			margin-top: 20rpx;
			margin-bottom: -20rpx;
	
			&:after {
				clear: both;
				content: " ";
				display: table;
			}
	
			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
	
			.image-picker,
			.image-preview {
				width: 184rpx;
				height: 184rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				float: left;
	
				&:nth-child(3n+0) {
					margin-right: 0;
				}
			}
	
			.image-picker {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: 1rpx dashed #ccc;
				color: #ccc;
	
				.choose-icon {
					font-size: 48rpx;
					margin-bottom: 6rpx;
				}
	
				.choose-text {
					font-size: 24rpx;
				}
			}
	
			.image-preview {
				position: relative;
	
				.image-delete {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					height: 42rpx;
					width: 42rpx;
					background: rgba(0, 0, 0, 0.64);
					border-radius: 50%;
					color: #fff;
					font-weight: bolder;
					font-size: 22rpx;
					z-index: 10;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.pops-content{padding: 20rpx;}
	.sfz,
	.sfz1,
	.sfz2,
	.yyzz {
		width: 140rpx;
		padding-top: 20rpx;
		padding-right: 10rpx;
	}
	
</style>
