<template>
	<view class="box">
		<view class="info">
			<u-form :model="form" ref="qualification" label-width="0">
				<text class="title">{{`${identity==1?'医师':'药师'}资格证书`}}</text>
				<u-form-item prop="qualifications" :border-bottom="false">
					<view class="info-hiht">
						<text>请上传资格证书</text>
						<text class="info-highlight">国徽页、照片页、个人信息页以及变更注册页</text>
					</view>
					<view class="flex-row flex-jus-sp">
						<view slot="addBtn" class="addBtn flex-col flex-ali-center flex-jus-center bg">
							<image src="/static/preview/s1.jpg" mode="" style="z-index: 1" v-if="identity==2"></image>
							<image src="/static/preview/yd1.jpg" mode="" style="z-index: 1"  v-if="identity==1" ></image>
							<view class="addBtn_hiht flex-col" @click="previewImage([])">
								<view style="height: 40rpx;">示例图</view>
								<!-- <view style="height: 40rpx;">点击查看</view> -->
							</view>
						</view>
						<d-upload :file-list="[form['qualifications'][0]]"
							@on-choose-complete="form['qualifications'][0]=$refs.qua.lists[0]"
							:customStyle="{margin: 0}" :custom-btn="true" ref="qua" :max-count="1" width="307rpx"
							height="180rpx">
							<view slot="addBtn" style="padding-top: 24rpx;" class="addBtn flex-col flex-ali-center">
								<u-icon name="camera" color="#C4C7CC" size="67"></u-icon>
								<d-text text="点击上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
					<view class="flex-row flex-jus-sp" style="margin-top: 32rpx;">
						<view slot="addBtn" class="addBtn flex-col flex-ali-center flex-jus-center bg">
							<image src="/static/preview/ys2.jpg" mode="" style="z-index: 1" v-if="identity==1"></image>
							<image  src="/static/preview/s1.jpg" mode="" style="z-index: 1" v-if="identity==2"></image>
							<view class="addBtn_hiht flex-col" @click="previewImage([])">
								<view style="height: 40rpx;">示例图</view>
								<!-- <view style="height: 40rpx;">点击查看</view> -->
							</view>
						</view>
						<d-upload :file-list="[form['qualifications'][1]]"
							@on-choose-complete="form['qualifications'][1]=$refs.qua1.lists[0];this.$refs.qualification.validate()"
							:customStyle="{margin: 0}" :custom-btn="true" ref="qua1" :max-count="1" width="307rpx"
							height="180rpx">
							<view slot="addBtn" style="padding-top: 24rpx;" class="addBtn flex-col flex-ali-center">
								<u-icon name="camera" color="#C4C7CC" size="67"></u-icon>
								<d-text text="点击上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
					<view style="margin-top: 32rpx;">
						<d-upload :file-list="form['qualifications']['list']"
							@on-choose-complete="form['qualifications']['list']=$refs.qua2.lists"
							:customStyle="{margin: 0}" :custom-btn="true" ref="qua2" width="128rpx" height="128rpx">
							<view slot="addBtn" class="addBtn flex-col flex-ali-center goOn">
								<u-icon name="camera" color="#C4C7CC" size="48"></u-icon>
								<d-text text="继续上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="info" v-if="identity==1">
			<u-form :model="form" ref="practice" label-width="0">
				<text class="title">{{`${identity==1?'医师':'药师'}执业证书`}}</text>
				<u-form-item prop="practice" :border-bottom="false">
					<view class="info-hiht">
						<text>请上传执业证书</text>
						<text class="info-highlight">国徽页、照片页、个人信息页以及变更注册页</text>
					</view>
					<view class="flex-row flex-jus-sp">
						<view slot="addBtn" class="addBtn flex-col flex-ali-center flex-jus-center bg">
							<image src="/static/preview/ys3.jpg" mode=""></image>
							<view class="addBtn_hiht flex-col" @click="previewImage([])">
								<view style="height: 40rpx;">示例图</view>
								<!-- <view style="height: 40rpx;">点击查看</view> -->
							</view>
						</view>
						<d-upload :file-list="[form['practice'][0]]"
							@on-choose-complete="form['practice'][0]=$refs.pra.lists[0]" :customStyle="{margin: 0}"
							:custom-btn="true" ref="pra" :max-count="1" width="307rpx" height="180rpx">
							<view slot="addBtn" style="padding-top: 24rpx;" class="addBtn flex-col flex-ali-center">
								<u-icon name="camera" color="#C4C7CC" size="67"></u-icon>
								<d-text text="点击上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
					<view class="flex-row flex-jus-sp" style="margin-top: 32rpx;">
						<view slot="addBtn" class="addBtn flex-col flex-ali-center flex-jus-center bg">
							<image src="/static/preview/ys4.jpg" mode=""></image>
							<view class="addBtn_hiht flex-col" @click="previewImage([])">
								<view style="height: 40rpx;">示例图</view>
								<!-- <view style="height: 40rpx;">点击查看</view> -->
							</view>
						</view>
						<d-upload :file-list="[form['practice'][1]]"
							@on-choose-complete="form['practice'][1]=$refs.pra1.lists[0];this.$refs.practice.validate()"
							:customStyle="{margin: 0}" :custom-btn="true" ref="pra1" :max-count="1" width="307rpx"
							height="180rpx">
							<view slot="addBtn" style="padding-top: 24rpx;" class="addBtn flex-col flex-ali-center">
								<u-icon name="camera" color="#C4C7CC" size="67"></u-icon>
								<d-text text="点击上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
					<view style="margin-top: 32rpx;">
						<d-upload :file-list="form['practice']['list']"
							@on-choose-complete="form['practice']['list']=$refs.pra2.lists" :customStyle="{margin: 0}"
							:custom-btn="true" ref="pra2" width="128rpx" height="128rpx">
							<view slot="addBtn" class="addBtn flex-col flex-ali-center goOn">
								<u-icon name="camera" color="#C4C7CC" size="48"></u-icon>
								<d-text text="继续上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="info" v-if="identity==1">
			<u-form :model="form" ref="position" label-width="0">
				<text class="title">{{`${identity==1?'医师职称证书':'药师职称证书（非必填）'}`}}</text>
				<u-form-item prop="position" :border-bottom="false">
					<view class="info-hiht">
						<text>请上传职称证书</text>
						<text class="info-highlight">国徽页、照片页、个人信息页以及变更注册页</text>
					</view>
					<view class="flex-row flex-jus-sp">
						<view slot="addBtn" class="addBtn flex-col flex-ali-center flex-jus-center bg">
							<image src="/static/preview/ys5.jpg" mode=""></image>
							<view class="addBtn_hiht flex-col" @click="previewImage([])">
								<view style="height: 40rpx;">示例图</view>
								<!-- <view style="height: 40rpx;">点击查看</view> -->
							</view>
						</view>
						<d-upload :file-list="[form['position'][0]]"
							@on-choose-complete="form['position'][0]=$refs.pos.lists[0]" :customStyle="{margin: 0}"
							:custom-btn="true" ref="pos" :max-count="1" width="307rpx" height="180rpx">
							<view slot="addBtn" style="padding-top: 24rpx;" class="addBtn flex-col flex-ali-center">
								<u-icon name="camera" color="#C4C7CC" size="67"></u-icon>
								<d-text text="点击上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
					<view class="flex-row flex-jus-sp" style="margin-top: 32rpx;">
						<view slot="addBtn" class="addBtn flex-col flex-ali-center flex-jus-center bg">
							<!-- <image src="../../../../static/Promise.png" mode=""></image> -->
							<image src="/static/preview/ys5.jpg" mode=""></image>
							<view class="addBtn_hiht flex-col" @click="previewImage([])">
								<view style="height: 40rpx;">示例图</view>
								<!-- <view style="height: 40rpx;">点击查看</view> -->
							</view>
						</view>
						<d-upload :file-list="[form['position'][1]]"
							@on-choose-complete="form['position'][1]=$refs.pos1.lists[0];this.$refs.position.validate()"
							:customStyle="{margin: 0}" :custom-btn="true" ref="pos1" :max-count="1" width="307rpx"
							height="180rpx">
							<view slot="addBtn" style="padding-top: 24rpx;" class="addBtn flex-col flex-ali-center">
								<u-icon name="camera" color="#C4C7CC" size="67"></u-icon>
								<d-text text="点击上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
					<view style="margin-top: 32rpx;">
						<d-upload :file-list="[form['position']['list']]"
							@on-choose-complete="form['position']['list']=$refs.pos2.lists" :customStyle="{margin: 0}"
							:custom-btn="true" ref="pos2" width="128rpx" height="128rpx">
							<view slot="addBtn" class="addBtn flex-col flex-ali-center goOn">
								<u-icon name="camera" color="#C4C7CC" size="48"></u-icon>
								<d-text text="继续上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<d-previewImage ref="previewImage" :opacity="0"></d-previewImage>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {

					}
				}
			},
			identity: {
				type: [Number, String],
				default: uni.getStorageSync('role') || 1
			},
		},
		data() {
			return {
				form: this.info,
				rules: {
					qualifications: [{
						required: true,
						validator: (rule, value, callback) => {
							if (this.form['qualifications'][0] && this.form['qualifications'][1]) {
								callback();
							} else {
								callback(new Error(`请上传${this.identity==1?'医师':'药师'}资格证书`));
							}
						},
						trigger: ['change', 'blur']
					}],
					practice: [{
						required: true,
						validator: (rule, value, callback) => {
							if (this.form['practice'][0] && this.form['practice'][1]) {
								callback();
							} else {
								callback(new Error(`请上传医师执业证书`));
							}
						},
						trigger: ['change', 'blur']
					}],
					// position: [{
					// 	required: true,
					// 	validator: (rule, value, callback) => {
					// 		if (this.form['position'][0]&&this.form['position'][1]) {
					// 			callback();
					// 		} else {
					// 			callback(new Error(`请上传医师职称证书`));
					// 		}
					// 	},
					// 	trigger: ['change', 'blur']
					// }]
				}
			};
		},
		created() {
			this.$nextTick(() => {
				this.$refs.qualification.setRules(this.rules);
				this.identity == 1 && this.$refs.practice.setRules(this.rules);
				// this.$refs.position.setRules(this.rules);
			})
		},
		methods: {
			previewImage(urls) {
				// this.$refs.previewImage.open(urls);
			},
			async submit() {
				let position = true;
				// this.identity == 1 && (position = await this.$refs.position.validate())
				let practice = true;
				this.identity == 1 && (practice= await this.$refs.practice.validate())
				let valid = await this.$refs.qualification.validate();
				if(this.identity==1){
					if (practice && valid) {
						this.$emit('submit_data', this.form);
						// uni.setStorageSync('info_submit_practice', this.form)
					}
				}else{
					if (valid) {
						this.$emit('submit_data', this.form);
						// uni.setStorageSync('info_submit_practice', this.form)
					}
				}
			}
		},
		mounted() {

		}
	};
</script>
<style lang="scss" scoped>
	.box {
		padding: 0 20rpx;
		box-sizing: content-box;


	}

	.title {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #31353D;
	}

	.info {
		border-radius: 8rpx;
		background-color: #fff;
		padding: 32rpx 32rpx 0rpx 32rpx;
		margin-top: 20rpx;

		.info-hiht {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #A7ABB0;
			height: 80rpx;
			line-height: 40rpx;
			margin-bottom: 32rpx;
		}

		.info-highlight {
			color: #FFAB40;
		}
	}

	.slot-btn {
		width: 289rpx;
		height: 170rpx;
		border-radius: 8rpx;
		background-color: #F3F4F5;
	}

	.addBtn {
		width: 307rpx;
		height: 180rpx;
		background: #F3F4F5;
		border-radius: 8rpx;
		position: relative;

		image {
			width: 307rpx;
			height: 180rpx;
			border-radius: 8rpx;
			z-index: 99999;
		}

		&_hiht {
			position: absolute;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			top: 38rpx;
		}
	}

	.goOn {
		padding-top: 24rpx;
		width: 128rpx;
		height: 128rpx;
	}
</style>