<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="padding">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提 交（ 3 / 3 ）</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'
	import {
		getSampleId
	} from '@/utils/index.js'
	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				id:'',
				radio:['食管癌','胃癌','结直肠肿瘤','炎症性肠病','其它器官恶性肿瘤（如乳腺、卵巢等其它器官）'],
				list:[
					{
						label:'婚姻状况',
						titleClass:'title',
						type:'radio',
						value:'maritalStatus',
						required:true,
						opts:[
							{
								value:'a',
								label:'未婚'
							},
							{
								value:'b',
								label:'已婚'
							},
							{
								value:'c',
								label:'离异'
							},
							{
								value:'d',
								label:'丧偶'
							}
						]
					},
					{
						label:'教育程度',
						titleClass:'title',
						type:'radio',
						required:true,
						value:'educationDegree',
						opts:[
							{
								value:'a',
								label:'未上过学'
							},
							{
								value:'b',
								label:'小学'
							},
							{
								value:'c',
								label:'初中'
							},
							{
								value:'d',
								label:'高中'
							},
							{
								value:'e',
								label:'大专及以上'
							}
						],
					},
					{
						label:'家庭现有人口数量',
						titleClass:'title',
						type:'input',
						required:true,
						controType:'number',
						placeholder:'请输入人口数量',
						value:'familyPopulation'
					},
					{
						label:'家庭平均年收入大约为',
						titleClass:'title',
						required:true,
						type:'radio',
						opts:[
							{
								value:'a',
								label:'50万以上'
							},
							{
								value:'b',
								label:'20万-50万'
							},
							{
								value:'c',
								label:'15-20万'
							},
							{
								value:'d',
								label:'10-15万'
							},
							{
								value:'e',
								label:'10万以下'
							}
						],
						value:'averageYearlyIncome'
					},
					{
						label:'饮水主要来源',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'a',
								label:'地窖水、池塘水、浅井水'
							},
							{
								value:'b',
								label:'湖水、河水'
							},
							{
								value:'c',
								label:'深井水、泉水'
							},
							{
								value:'d',
								label:'自来水（经处理）'
							}
						],
						value:'waterSource'
					},
					{
						label:'是否吸烟（烟叶）',
						titleClass:'title',
						required:true,
						type:'radio',
						value:'smoke',
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						child:[
							{
								title:'频率(支/天)',
								show:false,
								value:'cigaretteFrequency',
								titleClass:'title',
								controType:'number',
								placeholder:'请输入频率(单位：支/天)',
								type:'input',
							},
							{
								title:'频率(两/天)',
								show:false,
								value:'tobaccoFrequency',
								titleClass:'title',
								controType:'number',
								placeholder:'请输入频率(单位：两/天)',
								type:'input',
							},
							{
								title:'持续年数',
								show:false,
								required:true,
								controType:'number',
								value:'smokeYears',
								titleClass:'title',
								placeholder:'请输入持续年数',
								type:'input',
							}
						]
					},
					{
						label:'是否饮酒',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						value:'drink',
						child:[
							{
								title:'频率(两/天)',
								show:false,
								value:'drinkFrequency',
								controType:'number',
								titleClass:'title',
								placeholder:'请输入频率(单位：两/天)',
								type:'input',
							},
							{
								title:'持续年数',
								show:false,
								controType:'number',
								value:'drinkYears',
								titleClass:'title',
								placeholder:'请输入持续年数',
								type:'input',
							}
						]
					},
					{
						label:'是否饮茶',
						required:true,
						titleClass:'title',
						type:'radio',
						value:'teaDrinking',
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						child:[
							{
								title:'频率(两/天)',
								show:false,
								value:'teaFrequency',
								controType:'number',
								titleClass:'title',
								placeholder:'请输入频率(单位：两/天)',
								type:'input',
							},
							{
								title:'持续年数',
								show:false,
								value:'teaYears',
								titleClass:'title',
								controType:'number',
								placeholder:'请输入持续年数',
								type:'input',
							}
						]
					},
					{
						label:'食用新鲜蔬菜',
						value:'vegetables',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						]
					},
					{
						label:'食用新鲜水果',
						value:'fruits',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						]
					},
					{
						label:'食用肉蛋奶类',
						value:'meatEggMilk',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						]
					},
					{
						label:'食用豆类食品',
						value:'beanProduct',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						]
					},
					{
						label:'食用腌晒食品',
						value:'pickledDryFood',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						]
					},
					{
						label:'食用油炸食品',
						value:'friedFood',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						],
					},
					{
						label:'食用烫热食品',
						value:'hotFood',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						]
					},
					{
						label:'食用霉变食品',
						value:'mildewFood',
						titleClass:'title',
						type:'radio',
						required:true,
						opts:[
							{
								value:'c',
								label:'经常（≥2次/周）'
							},
							{
								value:'b',
								label:'很少（<2次/周）'
							},
							{
								value:'a',
								label:'从不'
							}
						]
					},
					{
						label:'是否有胃肠炎',
						required:true,
						titleClass:'title',
						type:'radio',
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						value:'enterogastritis',
						child:[
							{
								title:'胃肠炎诊断时年龄',
								show:false,
								required:true,
								value:'enterogastritisAge',
								titleClass:'title',
								controType:'number',
								placeholder:'请输入年龄',
								type:'input',
							}
						]
					},
					{
						label:'是否有胃、十二指肠溃疡',
						required:true,
						titleClass:'title',
						type:'radio',
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						value:'gastricAndDuodenalUlcers',
						child:[
							{
								title:'诊断时年龄',
								show:false,
								value:'gastricAndDuodenalAge',
								required:true,
								titleClass:'title',
								controType:'number',
								placeholder:'请输入年龄',
								type:'input',
							}
						]
					},
					{
						label:'是否有食管炎',
						titleClass:'title',
						required:true,
						type:'radio',
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						value:'oesophagitis',
						child:[
							{
								title:'食管炎诊断时年龄',
								show:false,
								value:'oesophagitisAge',
								controType:'number',
								required:true,
								titleClass:'title',
								placeholder:'请输入年龄',
								type:'input',
							}
						]
					},
					
					{
						label:'是否有肝炎',
						titleClass:'title',
						required:true,
						type:'radio',
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						value:'hepatitis',
						child:[
							{
								title:'肝炎诊断时年龄',
								required:true,
								show:false,
								value:'hepatitisAge',
								controType:'number',
								titleClass:'title',
								placeholder:'请输入年龄',
								type:'input',
							}
						]
					},
					{
						label:'是否有其它消化系统疾病史',
						required:true,
						titleClass:'title',
						type:'radio',
						opts:[
							{value:'a',label:'是'},
							{value:'b',label:'否'},
						],
						value:'otherDiseases',
						child:[
							{
								title:'疾病名称',
								show:false,
								required:true,
								value:'diseasesName',
								titleClass:'title',
								placeholder:'请输入疾病名称',
								type:'input',
							},
							{
								title:'诊断时年龄',
								show:false,
								controType:'number',
								value:'diseasesAge',
								required:true,
								titleClass:'title',
								placeholder:'请输入年龄',
								type:'input',
							}
						]
					},
				],
				form:{
					"maritalStatus":"",
					"educationDegree":"",
					"familyPopulation":"",
					"averageYearlyIncome":"",
					"waterSource":"",
					"smoke":"",
					"cigaretteFrequency":"",
					"tobaccoFrequency":"",
					"smokeYears":"",
					"drink":"",
					"drinkFrequency":"",
					"drinkYears":"",
					"teaDrinking":"",
					"teaFrequency":"",
					"teaYears":"",
					"vegetables":"",
					"fruits":"",
					"meatEggMilk":"",
					"beanProduct":"",
					"pickledDryFood":"",
					"friedFood":"",
					"hotFood":"",
					"mildewFood":"",
					"enterogastritis":"",
					"enterogastritisAge":"",
					"gastricAndDuodenalUlcers":"",
					"gastricAndDuodenalAge":"",
					"oesophagitis":"",
					"oesophagitisAge":"",
					"hepatitis":"",
					"hepatitisAge":"",
					"otherDiseases":"",
					"diseasesName":"",
					"diseasesAge":""
				}
			}
		},
		
		onLoad(option) {
			this.id = option.id || ''
			if(option.id){
				this.getInfo(option.id)
			}
		},
		
		
		methods: {
			
			// 获取信息
			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)    
						this.isShowChild()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			radioChange(val,prop){
				this.$set(this.form,prop,val)
				this.isShowChild()
			},
			
			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)
					}
				}
			},
			
			isShowChild(){
				this.list[5].child[0].show = this.form['smoke'] == 'a'
				this.list[5].child[1].show = this.form['smoke'] == 'a'
				this.list[5].child[2].show = this.form['smoke'] == 'a'
				
				this.list[6].child[0].show = this.form['drink'] == 'a'
				this.list[6].child[1].show = this.form['drink'] == 'a'
				
				this.list[7].child[0].show = this.form['teaDrinking'] == 'a'
				this.list[7].child[1].show = this.form['teaDrinking'] == 'a'
				
				this.list[16].child[0].show = this.form['enterogastritis'] == 'a'
				
				this.list[17].child[0].show = this.form['gastricAndDuodenalUlcers'] == 'a'
				
				this.list[18].child[0].show = this.form['oesophagitis'] == 'a'
				
				this.list[19].child[0].show = this.form['hepatitis'] == 'a'
				
				this.list[20].child[0].show = this.form['otherDiseases'] == 'a'
				
				this.list[20].child[1].show = this.form['otherDiseases'] == 'a'
			},
			
			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(){
				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{
					this.form.checkTime = getSampleId("","YYYY-MM-DD")
					let obj = {
						"id":this.id,
						"auditStatus": -3,
						"data":{
							"data": this.form,
							"diseaseType": this.$store.getters.userInfo.diseaseType,
							"isPrivate": this.$store.getters.userInfo.isPrivate
						}
					}
					
					this.$http.post(`/gastric-cancer-data/wechat/report`,obj).then(res => {
						const d = res.data
						if(d.code == 1){
							uni.showToast({
								icon: 'none',
								title: '信息提交后不可更改，同时请留意通知公告。'
							})
							// #ifdef MP-WEIXIN
							setTimeout(function() {
								wx.switchTab({
									url: '/pages/home/home',
								});
							}, 1000);
							// #endif
						}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>
