<!--
 * @desc: 知情同意
 * @Author: gaowenya
 * @Date: 2023-06-21 14:27
 * @LastEditors: 
 * @LastEditTime: 
-->
<template>
	<div class="Informed-container">
		<h1>
			急性缺血性卒中“血管内治疗”手术知情同意书
			<a-icon
				type="down"
				v-if="!showDetails"
				@click="showDetails = true"
			/>
			<a-icon type="up" v-else @click="showDetails = false" />
		</h1>
		<div
			:style="{ height: showDetails ? 'auto' : '0' }"
			style="transition: all 1s; overflow: hidden"
		>
			<div
				v-html="content"
				class="card-content ql-editor content-detail"
				style="white-space: pre-wrap"
			></div>
		</div>
		<div class="informed-list">
			<div class="informed-item">
				<span>谈话医师</span>
				<div
					class="item-img"
					v-if="informed.doctorSign"
					@click="lookSign(informed.doctorSign)"
				>
					<img :src="apiUrl + informed.doctorSign" alt="" />
				</div>
				<a-button
					:disabled="writeAble"
					type="continue"
					shape="round"
					class="item-btn"
					@click="doctorSign = !doctorSign"
					>{{
						informed.doctorSign ? '重新签名' : '点击签名'
					}}</a-button
				>
			</div>
			<div class="informed-item">
				<span>日期：</span>
				<a-input
					:disabled="writeAble"
					@focus="changeDate('doctorTime')"
					:value="getDoctorTime"
					class="item-input"
					readOnly
				/>
			</div>
			<signature
				class="item-sign"
				ref="doctorSign"
				@close="doctorSignClose"
				@reset="handeReset('doctorSign')"
				v-if="doctorSign"
			>
			</signature>
		</div>
		<div class="informed-info">
			患者本人或家属意见:经慎重考虑，同意介入检查治疗。对以上可能发生的意外和并发症已知。如发生上述情况，表示理解。
		</div>
		<div class="informed-list pb40">
			<div class="informed-item">
				<span>患者本人签名：</span>
				<div class="item-img" v-if="informed.patientSign">
					<img :src="apiUrl + informed.patientSign" alt="" />
				</div>
				<a-button
					:disabled="writeAble"
					type="continue"
					shape="round"
					class="item-btn"
					@click="patientSign = !patientSign"
					>{{
						informed.patientSign ? '重新签名' : '点击签名'
					}}</a-button
				>
			</div>
			<div class="informed-item">
				<span>患者联系方式：</span>
				<a-input
					:disabled="writeAble"
					v-model="informed.patientContact"
					class="item-input"
				/>
			</div>
			<signature
				class="item-sign"
				ref="patientSign"
				@close="patientSignClose"
				@reset="handeReset('patientSign')"
				v-if="patientSign"
			>
			</signature>

			<div class="informed-item">
				<span>授权的代签人签名：</span>
				<div class="item-img" v-if="informed.empowerSign">
					<img :src="apiUrl + informed.empowerSign" alt="" />
				</div>
				<a-button
					:disabled="writeAble"
					type="continue"
					shape="round"
					class="item-btn"
					@click="empowerSign = !empowerSign"
					>{{
						informed.empowerSign ? '重新签名' : '点击签名'
					}}</a-button
				>
			</div>
			<signature
				class="item-sign"
				ref="empowerSign"
				@close="empowerSignClose"
				@reset="handeReset('empowerSign')"
				v-if="empowerSign"
			>
			</signature>
			<div class="informed-item">
				<span>授权的代签人与患者关系：</span>
				<a-input
					:disabled="writeAble"
					v-model="informed.empowerRelation"
					class="item-input"
				/>
			</div>
			<div class="informed-item">
				<span>授权的代签人联系方式：</span>
				<a-input
					:disabled="writeAble"
					v-model="informed.empowerMobile"
					class="item-input"
				/>
			</div>
			<div class="informed-item">
				<span>签字人身份证号码：</span>
				<a-input
					v-if="writeAble"
					:disabled="writeAble"
					v-model="informed.legalIdcard"
					class="item-input"
				/>
				<keyboard
					v-else
					placeHolder=""
					class="item-input"
					:index-num="indexNum"
					@keyboard-input="handleKeyBoard"
					:old-value="informed.legalIdcard"
				/>
			</div>
			<div class="informed-item">
				<span>日期：</span>
				<a-input
					:disabled="writeAble"
					@focus="changeDate('legalTime')"
					:value="getLegalTime"
					class="item-input"
					readOnly
				/>
			</div>
		</div>
		<div class="common-picker">
			<van-datetime-picker
				v-if="picker"
				v-model="currentDate"
				type="date"
				@confirm="confirmPicker"
				@cancel="picker = false"
			/>
		</div>
		<a-button
			:disabled="writeAble"
			class="common-button mt2"
			type="primary"
			size="large"
			shape="round"
			@click="submit"
			v-if="!disabled"
			>提交</a-button
		>
		<a-modal
			class="patient-create patient-form"
			:width="650"
			:maskClosable="false"
			:destroyOnClose="true"
			v-model="lookVisable"
			title="查看签名"
			:footer="null"
		>
			<div class="modal-content">
				<img :src="currentSign" alt="" />
			</div>
		</a-modal>
	</div>
</template>

<script>
import keyboard from '../../components/keyboard.vue';
import 'quill/dist/quill.core.css';
import { uploadfile, saveInformedConsent, queryConsentResult } from 'api';
import { mapState } from 'vuex';
import signature from '@/components/signature/signature';
import { imgUrl } from '@/config/setting.js';
export default {
	name: 'Informed',
	data() {
		return {
			indexNum: 0, //必填字段，为键盘索引，每个键盘必须具有唯一值
			apiUrl: imgUrl,
			lookVisable: false,
			currentSign: '',
			currentDate: new Date(),
			disabled: false,
			picker: false,
			informed: {
				doctorSign: '',
				doctorTime: '',
				patientSign: '',
				patientContact: '',
				empowerSign: '',
				empowerRelation: '',
				empowerMobile: '',
				legalIdcard: '',
				legalTime: '',
			},
			doctorSign: false,
			empowerSign: false,
			patientSign: false,
			showDetails: true,
			content: '',
		};
	},
	components: {
		signature,
		keyboard,
	},
	computed: {
		...mapState('patient', ['patientData', 'book', 'writeAble']),
		getDoctorTime() {
			const { informed } = this;
			if (!informed.doctorTime) return;
			return informed.doctorTime.split(' ')[0];
		},
		getPatientTime() {
			const { informed } = this;
			if (!informed.patientTime) return;
			return informed.patientTime.split(' ')[0];
		},
		getLegalTime() {
			const { informed } = this;
			if (!informed.legalTime) return;
			return informed.legalTime.split(' ')[0];
		},
	},
	created() {
		this.content = this.book.find((item) => item.type === 1).content;
	},
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			//TODU
			vm.queryConsentResult();
		});
	},
	methods: {
		handleKeyBoard(value) {
			//value为在输入框里面输入的值
			this.informed.legalIdcard = value;
		},
		lookSign(url) {
			this.lookVisable = true;
			this.currentSign = url;
		},
		confirmPicker(date) {
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			m = m < 10 ? '0' + m : m;
			let d = date.getDate();
			d = d < 10 ? '0' + d : d;
			let dateTime = y + '-' + m + '-' + d;
			this.picker = false;
			this.informed[this.type] = dateTime;
		},
		changeDate(type) {
			this.picker = true;
			this.type = type;
			if (this.informed[type]) {
				this.currentDate = new Date(this.informed[type].split(' ')[0]);
			}
		},
		async queryConsentResult() {
			const { firstAidId } = this.patientData;
			if (!firstAidId) return this.$message.error('缺少急救');
			let res = await queryConsentResult({
				firstAidId,
				type: 1,
			});
			const { code, data, msg } = res;
			if (code === 200) {
				this.utils.merge(this.informed, data);
			}
		},
		// 谈话医师签名：
		doctorSignClose(params) {
			const file = params;
			// 使用FormData传参数和文件
			var form = new FormData();
			// 文件
			form.append('file', file);
			uploadfile(form).then((res) => {
				if (res.code === 200) {
					this.informed.doctorSign = res.url;
					this.$message.success('谈话医师签名保存成功');
					this.doctorSign = false;
				} else {
					this.$message.error('谈话医师签名保存失败');
				}
			});
		},
		// 患者本人签名：
		patientSignClose(params) {
			const file = params;
			// 使用FormData传参数和文件
			var form = new FormData();
			// 文件
			form.append('file', file);
			uploadfile(form).then((res) => {
				console.log('res: ', res);
				if (res.code === 200) {
					this.informed.patientSign = res.url;
					this.$message.success('患者本人签名保存成功');
					this.patientSign = false;
				} else {
					this.$message.error('患者本人签名保存失败');
				}
			});
		},
		// 授权人签名
		empowerSignClose(params) {
			const file = params;
			var form = new FormData();
			form.append('file', file);
			uploadfile(form).then((res) => {
				if (res.code === 200) {
					this.informed.empowerSign = res.url;
					this.$message.success('授权人签名保存成功');
					this.empowerSign = false;
				} else {
					this.$message.error('授权人签名保存失败');
				}
			});
		},
		handeReset(value) {
			this.informed[value] = null;
		},
		async submit() {
			const { informed } = this;
			const reg =
				/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
			// 授权人签名身份证必填
			if (informed.empowerSign) {
				// 身份证不能为空
				if (!informed.legalIdcard)
					return this.$message.success('身份不能为空');
				if (!reg.test(informed.legalIdcard))
					return this.$message.success('身份证格式不正确');
			}

			const { firstAidId } = this.patientData;
			if (!firstAidId) return this.$message.error('缺少急救');
			let res = await saveInformedConsent({
				...informed,
				firstAidId,
				templateText: this.content,
				type: 1,
			});
			const { code, data, msg } = res;
			if (code === 200) {
				this.$message.success('保存成功');
				this.$router.go(-1);
			}
		},
	},
};
</script>

<style scoped lang="less">
.Informed-container {
	padding: 30px 0 30px;

	.mt2 {
		margin-top: 20px;
	}

	.informed-info {
		font-size: 20px;
		text-align: left;
		line-height: 36px;
	}

	.informed-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
		&.pb40 {
			padding-bottom: 40px;
		}
		.informed-item {
			width: 48%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			// margin: 0 10px 20px;
			> span {
				font-size: 16px;
			}

			.item-input {
				width: 50%;
				/deep/ .input-container {
					background: none;
					text-align: left;
					font-size: 16px;
					line-height: 23px;
					padding: 4px 0 4px 10px;
					overflow: hidden;
				}
			}

			.item-sign {
				width: 50%;
			}

			.item-btn {
				color: #7690e5;
				border: 1px solid #7690e5;
				box-sizing: border-box;
			}

			.item-img {
				width: 230px;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}
}
</style>
