<template>
	<view class="questionnaire">
		<form @submit="formSubmit">
			<template v-for="(item,index) in list">
				<template v-if="item.type == 'radio'">
					<view class="margin-top padding sict-label" :key="item.value" v-show="!item.hidden">
						<view v-show="!item.hidden">
							<span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" :style="{opacity: item.required ? 1 : 0}">*</span>
							{{item.label}}
						</view>
						<view class="text-right  sict-value" v-show="!item.hidden">
							<radio-group @change="showChange($event,item)">
								<view>
									<view class="label" v-for="(opt, optIndex) in item.opts" :key="opt.label">
										<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>
				<template v-else-if="item.type == 'picker'">
					<view class="cu-form-group margin-top padding-rl" v-show="!item.hidden" :key="item.value">
						<view :class="item.titleClass"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx"
							 :style="{opacity: item.required ? 1 : 0}">*</span>{{item.label}}</view>
						<picker @change="updatePickerVal($event,item)" range-key="label" mode="selector" :value="form[item.value]" :range="item.opts">
							<view class="picker">
								{{form[item.value]?form[item.value]:'请选择'}}
							</view>
						</picker>
					</view>
				</template>

				<template v-else-if="item.type == 'pickerMore'">
					<view class="margin-top" :key="index">
						<uni-collapse>
							<uni-collapse-item :title="item.label" :open="true" :required="item.required">
								<view class="padding-lr">
									<view class="uni-list">
										<checkbox-group @change="showChange($event,item)">
											<label class="uni-list-cell uni-list-cell-pd" v-for="(itemCheck,indexCheck) in item.opts" :key="itemCheck.value"
											 @click="checkboxChange(indexCheck,itemCheck,item)">
												<view class="list-item">
													<view class="fl">
														<checkbox :value="itemCheck.value" :checked="itemCheck.checked" />
													</view>
													<view style="padding-left:60upx">{{itemCheck.label}}</view>
												</view>
											</label>
										</checkbox-group>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>
				</template>

				<template v-else-if="item.type == 'date'">
					<view class="cu-form-group margin-top padding-rl" v-show="!item.hidden" :key="item.value">
						<view :class="item.titleClass"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx"
							 :style="{opacity: item.required ? 1 : 0}">*</span>{{item.label}}</view>
						<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="updatePickerVal($event,item)">
							<view class="picker">
								{{form[item.value]?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" v-show="!item.hidden">
						<view :class="item.titleClass">
							<span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx" :style="{opacity: item.required ? 1 : 0}">*</span>
							{{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="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="padding">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提 交</button>
			</view>
		</form>
	</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'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				id: '',
				radio: [],
				list: [

					{
						label: '当前状况',
						required: true,
						value: 'currentStatus',
						titleClass: 'title',
						type: 'pickerMore',
						opts: [{
							value: '已经确诊',
							label: '已经确诊'
						}, {
							value: '疑似诊断',
							label: '疑似诊断'
						}, {
							value: '亲密接触者',
							label: '亲密接触者'
						}, {
							value: '居家观察/正在接受集中医学观察',
							label: '居家观察/正在接受集中医学观察'
						}, {
							value: '已解除集中医学观察',
							label: '已解除集中医学观察'
						}, {
							value: '无上述情况',
							label: '无上述情况'
						}],
						showList: [{
								value: '亲密接触者',
								show: [32, 35, 38, 40, 43, 45, 47]
							},

							{
								value: '居家观察/正在接受集中医学观察',
								show: [49, 50]
							},
						]
					},

					{
						label: '停留湖北',
						required: true,
						value: 'hubeiStopped',
						titleClass: 'title',
						type: 'radio',
						num: 32,
						hidden: true,
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}],
						show: [33, 34],
						showValue: ['1']
					},
					{
						label: '到达湖北日期',
						required: true,
						value: 'hubeiStopStartDate',
						titleClass: 'title',
						type: 'date',
						num: 33,
						hidden: true
					},
					{
						label: '离开湖北日期',
						required: true,
						value: 'hubeiStopEndDate',
						titleClass: 'title',
						type: 'date',
						num: 34,
						hidden: true
					},

					{
						label: '途径湖北',
						required: true,
						value: 'hubeiPassed',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}],
						show: [36, 37],
						num: 35,
						hidden: true,
						showValue: ['1']
					},
					{
						label: '途径湖北到达日期',
						required: true,
						value: 'hubeiPassStartDate',
						titleClass: 'title',
						type: 'date',
						num: 36,
						hidden: true
					},
					{
						label: '途径湖北离开日期',
						required: true,
						value: 'hubeiPassEndDate',
						titleClass: 'title',
						type: 'date',
						num: 37,
						hidden: true
					},
					{
						label: '接触湖北人员',
						required: true,
						value: 'hubeiContacted',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}],
						show: [39],
						num: 38,
						hidden: true,
						showValue: ['1']
					},
					{
						label: '接触湖北人员接触时间',
						required: true,
						value: 'hubeiContactDate',
						titleClass: 'title',
						type: 'date',
						num: 39,
						hidden: true
					},
					{
						label: '家属停留或途径湖北',
						required: true,
						value: 'hubeiFamilyStopped',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}],
						show: [41, 42],
						num: 40,
						hidden: true,
						showValue: ['1']
					},
					{
						label: '家属停留或途径湖北到达日期',
						required: true,
						value: 'hubeiFamilyStopStartDate',
						titleClass: 'title',
						type: 'date',
						num: 41,
						hidden: true
					},
					{
						label: '家属停留或途径湖北离开日期',
						required: true,
						value: 'hubeiFamilyStoppEndDate',
						titleClass: 'title',
						type: 'date',
						num: 42,
						hidden: true
					},
					{
						label: '家属接触湖北人员',
						required: true,
						value: 'hubeiFamilyContacted',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}],
						show: [44],
						num: 43,
						hidden: true,
						showValue: ['1']
					},
					{
						label: '家属接触湖北人员接触时间',
						required: true,
						value: 'hubeiFamilyContactDate',
						titleClass: 'title',
						type: 'date',
						num: 44,
						hidden: true
					},
					{
						label: '接触过已确诊或疑似患者',
						required: true,
						value: 'patientContact',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}],
						show: [46],
						num: 45,
						hidden: true,
						showValue: ['1']
					},
					{
						label: '接触患者时间',
						required: true,
						value: 'patientContactDate',
						titleClass: 'title',
						type: 'date',
						num: 46,
						hidden: true
					},
					{
						label: '家属接触过已确诊或疑似患者',
						required: true,
						value: 'familyPatientContact',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}],
						show: [48],
						num: 47,
						hidden: true,
						showValue: ['1']
					},
					{
						label: '家属接触患者时间',
						required: true,
						value: 'familyPatientContactDate',
						titleClass: 'title',
						type: 'date',
						num: 48,
						hidden: true
					},
					{
						label: '隔离地址',
						required: true,
						value: 'quarantineAdress',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 49,
						hidden: true
					},
					{
						label: '隔离开始日期',
						required: true,
						value: 'quarantineDate',
						titleClass: 'title',
						type: 'date',
						num: 50,
						hidden: true
					},
					{
						label: '当日症状',
						required: true,
						value: 'symptom',
						titleClass: 'title',
						type: 'pickerMore',
						opts: [{
							value: '发热',
							label: '发热'
						}, {
							value: '咳嗽',
							label: '咳嗽'
						}, {
							value: '流涕',
							label: '流涕'
						}, {
							value: '咽痛',
							label: '咽痛'
						}, {
							value: '咳痰',
							label: '咳痰'
						}, {
							value: '胸痛',
							label: '胸痛'
						}, {
							value: '肌肉酸痛/关节痛',
							label: '肌肉酸痛/关节痛'
						}, {
							value: '气促',
							label: '气促'
						}, {
							value: '腹泻',
							label: '腹泻'
						}, {
							value: '以上均无',
							label: '以上均无'
						}]
					},

					{
						label: '是否离沪',
						required: true,
						value: 'left',
						titleClass: 'title',
						type: 'radio',
						opts: [{
								value: '0',
								label: '否'
							},
							{
								value: '1',
								label: '是'
							}
						],
						show: [13, 14, 15, 16, 17, 18, 19, 20, 21],
						showValue: ['1']
					},
					{
						label: '离沪原因',
						required: true,
						value: 'leftReason',
						titleClass: 'title',
						type: 'picker',
						opts: [{
							value: 'a',
							label: '探亲'
						}, {
							value: 'b',
							label: '出差'
						}, {
							value: 'b',
							label: '旅游'
						}, {
							value: 'b',
							label: '其他'
						}],
						num: 13,
						hidden: true,
					},
					{
						label: '离沪出发日期',
						required: true,
						value: 'leftDate',
						titleClass: 'title',
						type: 'date',
						num: 14,
						hidden: true,
					},
					{
						label: '离沪方式',
						required: true,
						value: 'leftVehicle',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '火车',
							label: '火车	'
						}, {
							value: '飞机',
							label: '飞机'
						}, {
							value: '客车',
							label: '客车'
						}, {
							value: '自驾',
							label: '自驾'
						}],
						num: 15,
						show: ['16'],
						showValue: ['火车', '飞机'],
						hidden: true,
					},
					{
						label: '离沪车次/航班',
						required: true,
						value: 'leftVehicleNum',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 16,
						hidden: true,
					},
					{
						label: '离沪到达日期',
						required: true,
						value: 'leftReachDate',
						titleClass: 'title',
						type: 'date',
						num: 17,
						hidden: true,
					},
					{
						label: '离沪目的地',
						required: true,
						value: 'leftTarget',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 18,
						hidden: true,
					},
					{
						label: '离沪具体地址',
						required: true,
						value: 'leftAddress',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 19,
						hidden: true,
					},
					{
						label: '离沪同行者姓名（没有填无）',
						required: true,
						value: 'leftDependentNames',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 20,
						hidden: true,
					},
					{
						label: '离沪同行者联系方式（没有填无）',
						required: true,
						value: 'leftDependentPhones',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 21,
						hidden: true,
					},
					{
						label: '是否返沪',
						required: true,
						value: 'backed',
						titleClass: 'title',
						type: 'radio',
						show: [23, 24, 25, 26, 27, 28, 29],
						showValue: ['1'],
						opts: [{
							value: '0',
							label: '否'
						}, {
							value: '1',
							label: '是'
						}]
					},
					{
						label: '返沪出发地',
						required: true,
						value: 'backFrom',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 23,
						hidden: true,
					},
					{
						label: '返沪出发日期',
						required: true,
						value: 'backDate',
						titleClass: 'title',
						type: 'date',
						num: 24,
						hidden: true,
					},
					{
						label: '返沪方式',
						required: true,
						value: 'backVehicle',
						titleClass: 'title',
						type: 'radio',
						opts: [{
							value: '火车',
							label: '火车	'
						}, {
							value: '飞机',
							label: '飞机'
						}, {
							value: '客车',
							label: '客车'
						}, {
							value: '自驾',
							label: '自驾'
						}],
						show: ['26'],
						showValue: ['火车', '飞机'],
						num: 25,
						hidden: true,
					},
					{
						label: '返沪车次/航班',
						required: true,
						value: 'backVehicleNum',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 26,
						hidden: true,
					},
					{
						label: '返沪到达日期',
						required: true,
						value: 'backReachedDate',
						titleClass: 'title',
						type: 'date',
						num: 27,
						hidden: true,
					},
					{
						label: '返沪同行者姓名（没有填无）',
						required: true,
						value: 'backDependentNames',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 28,
						hidden: true,
					},
					{
						label: '返沪同行者联系方式（没有填无）',
						required: true,
						value: 'backDependentPhones',
						titleClass: 'title',
						placeholder: '请输入',
						type: 'input',
						num: 29,
						hidden: true,
					},
				],
				form: {}
			}
		},

		onLoad(option) {
			// 获取信息
			this.$http.post(`/sict-ncov/report`, this.form).then(res => {
				console.log(res)
			})
			const data = {
				currentStatus: '亲密接触者'
			}
			for (let k in data) {
				const val = data[k]
				if (val) {
					const item = this.list.find(child => child.value == k)
					if (item) {
						this.showChange({
							value: val
						}, item)
						if (item.type == "pickerMore") {
							console.log(1,22)
							item.opts.forEach(opt => {
								val.split(',').forEach(v => {
									if (v === opt.label) {
										console.log(opt)
										this.$set(opt, 'checked', true)
									}
								})
							})

						}
					}
				}
			}
		},


		methods: {
			// 更新复选框绑定的表单内容
			checkboxChange(index, obj, item) {
				const checkList = item.opts
				const prop = item.value
				for (let i = 0, lenI = checkList.length; i < lenI; ++i) {
					if (index == i) {
						this.$set(checkList[i], 'checked', !checkList[i].checked)
					}
				}
				// 处理以上均无情况 
				const nullList = ['无上述情况', '以上均无']
				if (nullList.includes(obj.label)) {
					for (var i = 0, lenI = checkList.length; i < lenI; ++i) {
						this.$set(checkList[i], 'checked', false)
					}
					this.$set(checkList[checkList.length - 1], 'checked', true)
					this.form[prop] = obj.label
				} else {
					this.$set(checkList[checkList.length - 1], 'checked', false)
					const values = []
					for (var i = 0, lenI = checkList.length; i < lenI; ++i) {
						if (checkList[i].checked) {
							values.push(checkList[i].label)
						}
					}
					this.form[prop] = values.join(',')
				}

			},
			radioChange(val, prop) {
				this.$set(this.form, prop, val)
				this.isShowChild()
			},
			// 隐藏/显示
			showChange(evt, item) {
				const prop = item.value
				const type = item.type
				if (type === 'radio') {
					const val = evt.value || evt.target.value
					this.$set(this.form, prop, val)
					for (let i = 0; i < this.list.length; i++) {
						const current = this.list[i]
						if (current.value == prop && current.show) {
							current.show.forEach(child => {
								this.list.forEach(row => {
									if (child == row.num) {
										this.$set(row, 'hidden', !current.showValue.includes(val))
									}
								})
							})
						}
					}
				}
				// 复选框展示和隐藏
				if (type === 'pickerMore') {
					let val = evt.value || evt.detail.value;
					const showList = item.showList
					if (showList && showList.length > 0) {
						showList.forEach(item => {
							item.show.forEach(child => {
								this.list.forEach(row => {
									if (child == row.num) {
										this.$set(row, 'hidden', !val.includes(item.value))
									}
								})
							})
						})

					}
				}



			},
			isShowChild() {
				this.list[10].hidden = this.form['returnToWork'] == 'a'
			},

			Switch(e, prop) {
				this.form[prop] = e.detail.value
			},
			// 更新输入框绑定的表单内容
			updateInputVal(event, props) {
				this.form[props] = event.target.value
			},
			// 更新下拉框绑定的表单内容
			updatePickerVal(event, item) {
				const opts = item.opts
				const prop = item.value
				const val = event.detail.value
				if (!opts) {
					this.$set(this.form, prop, val)
					return
				}
				this.$set(this.form, prop, opts[val].label)
			},
			// 提交信息
			formSubmit() {
				let flag = true
				let msg = ''
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].required) {
						const val = this.form[this.list[i].value]
						if (!val && !this.list[i].hidden && this.list[i].required) {
							flag = false
							uni.showToast({
								icon: 'none',
								title: `${this.list[i].label }未填写`
							})
							break
						}
						if (!flag) {
							break
						}
					}
				}

				if (!flag) {
					return false
				} else {
					this.$http.post(`/sict-ncov/report/daily`, this.form).then(res => {
						const d = res.data
						if (d.code == 1) {

							uni.navigateBack()
							uni.showToast({
								icon: 'success',
								title: '提交成功'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: d.message
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			}
		}
	}
</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>
