<template>
	<view class="box">
		<view class="info">
			<u-form :model="form" ref="card" label-width="0">
				<text class="title">身份证</text>
				<u-form-item prop="card" :border-bottom="false">
					<view class="flex-row flex-jus-sp">
						<d-upload :file-list="[form['card'][0]]"
							@on-choose-complete="form['card'][0]=$refs.card1.lists[0]" :customStyle="{margin: 0}"
							:custom-btn="true" ref="card1" :max-count="1" width="289rpx" height="170rpx">
							<image slot="addBtn" src="../../../../static/image/sfz-f.png"
								style="width: 289rpx;height: 170rpx;">
							</image>
						</d-upload>
						<d-upload :file-list="[form['card'][1]]"
							@on-choose-complete="form['card'][1]=$refs.card2.lists[0];$refs.card.validate()"
							:customStyle="{margin: 0}" :custom-btn="true" ref="card2" :max-count="1" width="289rpx"
							height="170rpx">
							<image slot="addBtn" src="../../../../static/image/sfz.png"
								style="width: 289rpx;height: 170rpx;">
							</image>
						</d-upload>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="info flex-col" v-if="identity==1">
			<text class="title">工作照</text>
			<d-text text="建议上传正面穿白大褂的形象照"></d-text>
			<u-form :model="form" ref="work" label-width="0" style="margin-top: 24rpx;">
				<u-form-item prop="work" :border-bottom="false">
					<view class="flex-row">
						<view class="addBtn">
							<image src="../../../../static/image/ys-sl.png"></image>
							<view class="">
								示例
							</view>
						</view>
						<d-upload :file-list="[form['work']]"
							@on-choose-complete="form['work']=$refs.work1.lists[0];$refs.work.validate()"
							:customStyle="{margin: 0}" :custom-btn="true" ref="work1" :max-count="1" width="128rpx"
							height="128rpx">
							<view slot="addBtn" style="padding-top: 24rpx;" class="addBtn flex-col flex-ali-center">
								<u-icon name="camera" color="#C4C7CC" size="40"></u-icon>
								<d-text text="点击上传" size="24rpx"></d-text>
							</view>
						</d-upload>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="info flex-row" style="padding: 0 32rpx;">
			<u-form :model="form" ref="signature" label-width="260rpx">
				<u-form-item label="签章样式" prop="signature" :border-bottom="false" label-width="260rpx">
					<u-radio-group v-model="form.signature" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.type" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
		</view>
		<view class="info flex-row" style="padding: 0 32rpx;" v-show="form['signature']==2">
			<u-form :model="form" ref="write" label-width="260rpx" label-position="top">
				<u-form-item label="医生手写签名" prop="write" :border-bottom="false">
					<d-text text="提交即认为您同意在开药时，使用自己的手写签名"></d-text>
					<view class="signature flex-col flex-jus-center flex-ali-center" @click="$emit('affirm')">
						<block v-if="!form.write">
							<image src="../../../../static/image/qm.png"></image>
							<text>点击签名</text>
						</block>
						<u-image v-else width="646rpx" height="200rpx" mode="aspectFit" border-radius="8rpx"
							:src="'data:image/jpeg;base64,'+form.write">
							<u-loading slot="loading"></u-loading>
						</u-image>
					</view>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			identity: {
				type: [Number, String],
				default: uni.getStorageSync('identity') || uni.getStorageSync('role') || 1
			}
		},
		data() {
			return {
				list: [{
						name: '电子签章',
						type: 1,
						disabled: true
					},
					{
						name: '手写签名',
						type: 2
					},
				],
				form: this.info,
				radio: '',
				rules: {
					card: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.form['card'][0] || !this.form['card'][1]) {
								callback(new Error('请选择身份证'));
								return
							}
							callback();
						},
						trigger: ['change', 'blur']
					}],
					work: [{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.form['work']) {
								callback(new Error('请选择工作照'));
								return
							}
							callback();
						},
						trigger: ['change', 'blur']
					}],
					signature: [{
						required: true,
						validator: (rule, value, callback) => {
							if (this.form['signature']) {
								callback();
							} else {
								callback(new Error('请选择签章样式'));
							}
						},
						trigger: ['change', 'blur']
					}],
					write: [{
						required: true,
						validator: (rule, value, callback) => {
							if (this.form['write']) {
								callback();
							} else {
								callback(new Error('手写签名不能为空'));
							}
						},
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		watch: {
			form: {
				handler() {
					this.form['write'] && this.$refs.write.validate()
				},
				deep: true
			}
		},
		async onReady() {
			this.$refs.card.setRules(this.rules);
			this.$refs.work && this.$refs.work.setRules(this.rules);
			this.$refs.signature.setRules(this.rules);
		},
		methods: {
			radioGroupChange(e) {
				this.form['signature'] = e
				e == 2 && this.$refs.write.setRules(this.rules);
			},
			async submit() {
				let write = true
				let work = true
				this.$refs.write && (write = await this.$refs.write.validate())
				let signature = await this.$refs.signature.validate();
				this.$refs.work && (work = await this.$refs.work.validate())
				let card = await this.$refs.card.validate();
				// if (write && work && card) {
				// 	this.$emit('submit_data', this.form);
				// }
				
				if (write && work && signature && card) {
					this.$emit('submit_data', this.form);
				}
			}
		},
		mounted() {
		
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		padding: 0 20rpx;
		box-sizing: content-box;
	}
	
	.info {
		border-radius: 8rpx;
		background-color: #fff;
		padding: 32rpx 32rpx 0rpx 32rpx;
		margin-top: 20rpx;
	}

	.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;
	}

	.hiht {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #C4C7CC;
		margin-right: 16rpx;
	}

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

	.addBtn {
		position: relative;
		width: 128rpx;
		height: 128rpx;
		margin-right: 32rpx;

		image {
			width: 128rpx;
			height: 96rpx;
			border-radius: 8rpx;
		}

		view {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 128rpx;
			height: 32rpx;
			background-color: #FFAB40;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 32rpx;
			text-align: center;
		}
	}

	.addBtn {
		width: 128rpx;
		height: 128rpx;
		background: #F3F4F5;
		border-radius: 8rpx;
	}

	.signature {
		width: 646rpx;
		height: 200rpx;
		background: #F3F4F5;
		border-radius: 8rpx;

		text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}

		image {
			height: 48rpx;
			width: 48rpx;
		}
	}
</style>