<template>
	<view class="questionnaire">
		<form @submit="formSubmit">
			<template v-for="(item,index) in list">
				<view v-if="item.type == 'radio'" class="margin-top padding sict-label" :key="item.value">
					<view>
						<span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" v-if="item.required">*</span>
						{{index+1}}、 {{item.label}}
					</view>
					<view class="text-right  sict-value">
						<radio-group>
							<view>
								<view class="label" v-for="(opt, optIndex) in item.opts" :key="opt.label" @click="radioChange(opt.value,item.value)">
									<radio :class="form[item.value]== opt.value ?'checked':''" :checked="form[item.value]== opt.value?true:false"
									 :value="opt.value"></radio>
									<view style="display: inline-block;" class="right">{{opt.label}}</view>
								</view>
							</view>
						</radio-group>
					</view>
				</view>

				<template v-else-if="item.type == 'picker'">
					<view class="cu-form-group margin-top padding-rl" :key="item.value">
						<view :class="item.titleClass"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx"
							 v-if="item.required">*</span>{{index+1}}、{{item.label}}</view>
						<picker @change="updatePickerVal($event,item.value)" :value="form[item.value]" :range="item.opts">
							<view class="picker">
								{{form[item.value]>-1?item.opts[form[item.value]]:'请选择'}}
							</view>
						</picker>
					</view>
				</template>

				<template v-else-if="item.type == 'input'">
					<view class="cu-form-group margin-top padding-rl" :key="item.value">
						<view :class="item.titleClass">
							<span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" v-if="item.required">*</span>
							{{index+1}}、{{item.label}}</view>
						<input class="text-right" :placeholder="item.placeholder" :type="item.controType" :value="form[item.value]" name="input"
						 @input="updateInputVal($event,item.value)"></input>
					</view>
				</template>

				<view class="margin-top-xs" v-show="item.child && childItem.show" v-for="(childItem,childIndex) in item.child" :key="childItem.value">
					<view class="margin-top-sm padding-rl sict-label cu-form-group">
						<view>
							<span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" v-if="childItem.required">*</span>
							{{childItem.title}}
						</view>
						<checkbox v-if="childItem.type == 'radio'" :class="form[childItem.value]?'checked':''" :checked="form[childItem.value]?true:false"
						 :value="childItem.value"></checkbox>

						<picker v-else-if="childItem.type == 'picker'" range-key="label" @change="updatePickerVal($event,childItem.value)"
						 :value="form[childItem.value]" :range="childItem.opts">
							<view class="picker">
								{{form[childItem.value]>-1?childItem.opts[form[childItem.value]].label:'请选择'}}
							</view>
						</picker>

						<input class="text-right" v-else-if="childItem.type == 'input'" :type="childItem.controType" :placeholder="childItem.placeholder"
						 :value="form[childItem.value]" name="input" @input="updateInputVal($event,childItem.value)"></input>
					</view>
				</view>
			</template>
			<view class="cu-form-group margin-top-sm">
				<view class="uni-padding-wrap uni-common-mt">
					<view class="padding-top padding-bottom">
						<checkbox-group @change="checkboxChange($event,'agree')">
							<view class="fl" style="line-height:40upx">
								<span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>9、
							</view>
							<label>
								<checkbox value="A" :checked="form.agree == 'a'" class="fl" style="margin-top:4upx" />
								<view style="padding-left:132upx" @click="modalNameAgree = 'Modal'">
									我已阅读或听懂本
									《<span class="text-bold sict-green-word">
										知情同意书
									</span>》
									{{signUpFlag?'的讲解，理解了全部情况。一些问题已与相关人员讨论，并得到满意解决，我同意参加此次筛查。':'，受检本人已经理解并同意参加本筛查。'}}
								</view>
							</label>
						</checkbox-group>
					</view>
				</view>
				</checkbox-group>
			</view>
			<view class="padding">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提 交（ 1 / 3 ）</button>
			</view>
		</form>

		<view class="cu-modal" :class="modalNameAgree=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end text-bold">
					<view class="content">知情同意书</view>
					<view class="action" @tap="modalNameAgree = ''">
						<text class="cuIcon-close text-black"></text>
					</view>
				</view>
				<view class="padding-xl green-word">
					<div class="text-left">
						<rich-text style="white-space:pre-wrap;word-break:break-all;" :nodes="content"></rich-text>
					</div>
					<button @click="modalNameAgree = ''" class="cu-btn block bg-blue margin-tb-sm lg">我知道了</button>
				</view>
			</view>
		</view>


		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示消息</view>
					<view class="action" @tap="modalName = ''">
						<text class="cuIcon-close text-black"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{msg}}
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-gray" @tap="modalName = ''">取消</button>
						<button class="cu-btn line-blue text-blue margin-left" @tap="hideModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import validate from '@/utils/validate.js'
	import {
		getAge,
		getSampleId
	} from '@/utils/index.js'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				content: '',
				id: '',
				modalName: '',
				modalNameAgree: '',
				msg: '',
				list: [{
						label: '姓名',
						type: 'input',
						required: true,
						value: 'name',
						placeholder: '请输入姓名'
					},
					{
						label: '身份证号',
						type: 'input',
						required: true,
						value: 'IDCard',
						placeholder: '请输入身份证号'
					},
					{
						label: '医保卡号',
						type: 'input',
						value: 'medicalCard',
						placeholder: '请输入医保卡号'
					},
					{
						label: '手机号码',
						type: 'input',
						required: true,
						value: 'cellphone',
						placeholder: '请输入手机号码'
					},
					{
						label: '联系电话',
						type: 'input',
						value: 'telephone',
						placeholder: '请输入联系电话'
					},
					{
						label: '家庭住址',
						type: 'input',
						required: true,
						value: 'address',
						placeholder: '请输入家庭住址'
					},
					{
						label: '身高(cm)',
						type: 'input',
						value: 'height',
						placeholder: '请输入身高'
					},
					{
						label: '体重(kg)',
						type: 'input',
						value: 'weight',
						placeholder: '请输入体重'
					}
				],
				form: {
					"name": "",
					"IDCard": "",
					"address": "",
					"cellphone": "",
					"height": "",
					"weight": "",
					"telephone": "",
					"medicalCard": ""
				}
			}
		},

		onLoad(option) {
			this.id = option.id || ''
			if (option.id) {
				this.getInfo(option.id)
			} else {
				this.form.name = this.$store.getters.userInfo.name
				this.form.cellphone = this.$store.getters.userInfo.phoneNumber
			}
		},

		mounted() {
			this.getAgree()
		},

		methods: {
			getAgree() {
				this.$http.get(`/gastric-cancer-data/consent?hospitalId=${this.$store.getters.userInfo.hospitalId}`).then(res => {
					const d = res.data
					if (d.code == 1) {
						this.content = d.object.content
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取信息
			getInfo(id) {
				this.$http.get(`/gastric-cancer-data/report/selectReportBySampleId?id=${id}`).then(res => {
					const d = res.data
					if (d.code == 1) {
						this.form = Object.assign(this.form, d.object.reportContent.data)
					}
				}).catch(err => {
					console.log(err)
				})
			},

			radioChange(val, prop) {
				this.$set(this.form, prop, val)
			},
			// 更新复选框绑定的表单内容
			checkboxChange(e) {
				if (e.detail.value.length > 0) {
					// this.modalName = 'Modal'
					this.form.agree = 'a'
				} else {
					this.form.agree = 'b'
				}
			},

			radioChange2(index, checkList, val) {
				for (var i = 0, lenI = checkList.length; i < lenI; ++i) {
					if (index == i) {
						this.$set(checkList[i], 'checked', !checkList[i].checked)
					} else {
						this.$set(checkList[i], 'checked', false)
					}
				}
			},

			Switch(e, prop) {
				this.form[prop] = e.detail.value
			},

			// 更新输入框绑定的表单内容
			updateInputVal(event, props) {
				this.form[props] = event.target.value
			},

			// 更新下拉框绑定的表单内容
			updatePickerVal(event, props) {
				this.$set(this.form, props, event.detail.value)
			},
			// 提交信息
			formSubmit() {
				console.log(this.form)
				let flag = true
				let msg = ''
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].required) {
						if (!this.form[this.list[i].value]) {
							flag = false
							uni.showToast({
								icon: 'none',
								title: "第" + (i + 1) + "项有必填数据未填写"
							})
							break
						}
						if (this.form[this.list[i].value] == 'a' && this.list[i].child && this.list[i].child.length > 0) {
							for (let j = 0; j < this.list[i].child.length; j++) {
								if (this.list[i].child[j].required && !this.form[this.list[i].child[j].value]) {
									flag = false
									uni.showToast({
										icon: 'none',
										title: "第" + (i + 1) + "大项的第" + (j + 1) + "子项有必填数据未填写"
									})
									break
								}
							}
						}
						if (!flag) {
							break
						}
					}
				}

				if (!flag) {
					return false
				} else {
					let sex = parseInt(this.form.IDCard.substr(16, 1)) % 2 == 1
					let age = getAge(this.form.IDCard)
					if ((sex && (age > 79 || age < 40)) || (!sex && (age > 79 || age < 50))) {
						this.modalName = "DialogModal1"
						this.msg = "对不起，您不符合筛查标准，感谢您的参与！"
						this.saveData(-2, ['01'])
					} else {
						this.saveData(-5, [])
					}
				}
			},
			saveData(code, illegalReason) {
				let obj = {
					"auditStatus": code,
					"illegalReason": illegalReason,
					"data": {
						"data": {},
						"diseaseType": this.$store.getters.userInfo.diseaseType,
						"isPrivate": this.$store.getters.userInfo.isPrivate
					}
				}
				obj.data.data = Object.assign({}, this.form)
				obj.data.data.hospitalId = this.$store.getters.userInfo.hospitalId
				obj.data.data.age = getAge(this.form.IDCard) + ''
				obj.data.data.sex = parseInt(this.form.IDCard.substr(16, 1)) % 2 == 1 ? 'a' : 'b'
				obj.data.data['sex-1'] = obj.data.data.sex
				obj.data.data.birthday = this.form.IDCard.substr(6, 4) + '-' + this.form.IDCard.substr(10, 2) + '-' + this.form.IDCard
					.substr(12, 2)
				obj.data.data['birthday-1'] = obj.data.data.birthday
				obj.data.data.sampleId = getSampleId("", "YYYYMMDD-hhmm") + '-' + parseInt(Math.random() * 1000)
				obj.data.data.checkTime = getSampleId("", "YYYY-MM-DD")

				if (this.id) {
					obj.id = this.id
				}

				this.$http.post(`/gastric-cancer-data/wechat/report`, obj).then(res => {
					const d = res.data
					if (d.code == 1) {
						if (code == -5) {
							this.id = this.id || d.object
							uni.navigateTo({
								url: `/personModule/vanguardSignUp/vanguardExclusion/index?id=${this.id}`
							})
						}
					} else {
						this.modalName = "DialogModal1"
						this.msg = d.message
					}
				}).catch(err => {
					console.log(err)
				})
			},

			hideModal() {
				this.modalName = ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sict-title {
		padding: 20upx 0;
		padding-right: 20upx;
		word-break: break-all;
		text-align: justify
	}

	.sict-label {
		background-color: white;
		font-size: 30upx;
		text-align: justify;
	}

	.sict-value {
		margin-top: 15upx;

		.right {
			margin-left: 10upx;
			vertical-align: bottom;
		}

		.label {
			// display: inline-block;
			text-align: left;
			padding: 20upx 0;
			padding-left: 30upx;
			border-bottom: 2upx solid #d3d3d3;

			&:last-child {
				border-bottom: 0;
			}
		}
	}

	uni-radio-group {
		border: 2upx solid #d3d3d3;
		border-radius: 8upx;
		margin-left: 20upx;
		display: block;
	}

	radio-group {
		border: 2upx solid #d3d3d3;
		border-radius: 8upx;
		margin-left: 20upx;
		display: block;
	}

	.icon-right {
		font-family: cuIcon;
		font-size: 34upx;
		color: #8799a3;
		line-height: 100upx;
		width: 60upx;
		text-align: right;
		margin: auto;
	}

	.uni-list-cell {
		.list-item {
			border-bottom: 2upx solid #d3d3d3;
			padding: 20upx 0;
			padding-left: 30upx;
		}

		&:last-child {
			.list-item {
				border-bottom: 0;
			}
		}
	}

	.uni-list {
		margin-left: 20upx;
		border: 2upx solid #d3d3d3;
		border-radius: 8upx;
	}
</style>

<style>
	.questionnaire .uni-collapse-cell__title:after {
		border-bottom: 0 !important;
	}
</style>
