<template>
	<view class="exclusion">
		<form @submit="formSubmit">
			<template v-for="(item,index) in list">
				<view v-if="item.type == 'radio'" class="margin-top padding sict-label" :key="index">

					<view>
						<span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</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>

				<view v-else-if="item.type == 'picker'" :key="index">
					<view class="margin-top">
						<uni-collapse>
							<uni-collapse-item :title="index+1 +'、' + item.label" :open="true" :required="item.required">
								<view class="padding-lr">
									<view class="uni-list">
										<checkbox-group>
											<label class="uni-list-cell uni-list-cell-pd" v-for="(itemCheck,indexCheck) in item.opts" :key="itemCheck.value"
											 @click="checkboxChange(indexCheck,item.opts,itemCheck,item.value)">
												<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>
				</view>
			</template>

			<view class="padding">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提交（2 / 2）</button>
			</view>

		</form>
		
		<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">
					抱歉，您暂不符合筛查标准，具体详情请查看首页筛查公告，感谢您的参与！
				</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'

	export default {
		components: {
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				modalName:'',
				form: {
					'withinOneYear': null,
					'subtotalGastrectomy': null,
					'ppi': null,
					"symptom": [],
					"diseasesHistory": [],
					'possibilityOfCancer': null,
					'seriousIllness': null
				},
				id: '',
				list: [
					{
						label: '距上次胃镜检查间隔时间一年内',
						value: 'withinOneYear',
						type: 'radio',
						eliminateVal:'02',
						opts: [{
								value: 'a',
								label: '是'
							},
							{
								value: 'b',
								label: '否'
							},
						]
					},
					{
						label: '胃大部切除术手术史',
						value: 'subtotalGastrectomy',
						eliminateVal:'03',
						type: 'radio',
						opts: [{
								value: 'a',
								label: '是'
							},
							{
								value: 'b',
								label: '否'
							},
						]
					},
					{
						label: '两周内服用PPI（埃索美拉唑、泮托拉唑、雷贝拉唑、兰索拉唑等）或H2受体拮抗剂（法莫替丁等）',
						value: 'ppi',
						eliminateVal:'04',
						type: 'radio',
						opts: [{
								value: 'a',
								label: '是'
							},
							{
								value: 'b',
								label: '否'
							},
						]
					},
					{
						label: '有下列一种或多种症状',
						value: 'symptom',
						required: true,
						type: 'picker',
						opts: [
							{
								value: 'a',
								eliminateVal:'05',
								label: '6个月内缺铁性贫血'
							},
							{
								value: 'b',
								eliminateVal:'06',
								label: '12个月内消化道出血（黑便、血便等）'
							},
							{
								value: 'c',
								eliminateVal:'07',
								label: '体重减轻（非减肥原因6个月内体重减轻≥4.5Kg）'
							},
							{
								value: 'd',
								eliminateVal:'08',
								label: '经常性腹泻'
							},
							{
								value: 'e',
								eliminateVal:'09',
								label: '吞咽困难或哽噎感'
							},
							{
								value: 'f',
								eliminateVal:'10',
								label: '腹部肿块'
							},
							{
								value: 'g',
								label: '以上均无'
							}
						],
					},
					{
						label: '有以下任何一种或多种疾病史',
						value: 'diseasesHistory',
						required: true,
						type: 'picker',
						opts: [
							{
								value: 'a',
								eliminateVal:'11',
								label: '食管癌'
							},
							{
								value: 'b',
								eliminateVal:'12',
								label: '胃癌'
							},
							{
								value: 'c',
								eliminateVal:'13',
								label: '结直肠肿瘤'
							},
							{
								value: 'd',
								eliminateVal:'14',
								label: '炎症性肠病'
							},
							{
								value: 'e',
								eliminateVal:'15',
								label: '其它器官恶性肿瘤（如乳腺、卵巢等其它器官）'
							},
							{
								value: 'f',
								label: '以上均无'
							}
						]
					},
					{
						label: '是否有影像、肿瘤标志物等检查高度怀疑罹患肿瘤可能',
						value: 'possibilityOfCancer',
						eliminateVal:'16',
						type: 'radio',
						opts: [{
								value: 'a',
								label: '是'
							},
							{
								value: 'b',
								label: '否'
							},
						]
					},
					{
						label: '是否有严重心、肺、肝、肾功能不全，或严重精神疾患',
						value: 'seriousIllness',
						eliminateVal:'17',
						type: 'radio',
						opts: [{
								value: 'a',
								label: '是'
							},
							{
								value: 'b',
								label: '否'
							},
						]
					}
				],
			}
		},

		onLoad(option) {
			this.id = option.id || ''
			if (option.id) {
				this.getInfo(option.id)
			}
		},

		methods: {
			hideModal(){
				this.modalName = ''
				// #ifdef MP-WEIXIN
				setTimeout(function() {
					wx.switchTab({
						url: '/pages/home/home',
					});
				}, 1000);
				// #endif
				
			},
			// 获取信息
			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)    

						for (let i = 0; i < this.list[3].opts.length; i++) {
							if (this.form['symptom'].indexOf(this.list[3].opts[i].value) > -1) {
								this.$set(this.list[3].opts[i], 'checked', true)
							}
						}

						for (let i = 0; i < this.list[4].opts.length; i++) {
							if (this.form['diseasesHistory'].indexOf(this.list[4].opts[i].value) > -1) {
								this.$set(this.list[4].opts[i], 'checked', true)
							}
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 更新复选框绑定的表单内容
			checkboxChange(index, checkList, obj, prop) {
				for (var i = 0, lenI = checkList.length; i < lenI; ++i) {
					if (index == i) {
						this.$set(checkList[i], 'checked', !checkList[i].checked)
					}
				}

				// 处理以上均无情况
				if (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)
				} else {
					this.$set(checkList[checkList.length - 1], 'checked', false)
				}
			},

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

			updatePickerVal(event, props) {
				this.form[props] = event.detail.value
			},

			radioChange(event, props) {
				this.$set(this.form, props, event)
			},

			// 提交信息
			formSubmit() {
				
				// 症状
				this.form['symptom'] = []
				for (let i = 0, lenI = this.list[3].opts.length; i < lenI; ++i) {
					if (this.list[3].opts[i].checked) {
						this.form['symptom'].push(this.list[3].opts[i].value)
					}
				}
				
				// 疾病
				this.form['diseasesHistory'] = []
				for (let i = 0, lenI = this.list[4].opts.length; i < lenI; ++i) {
					if (this.list[4].opts[i].checked) {
						this.form['diseasesHistory'].push(this.list[4].opts[i].value)
					}
				}
				
				let rules = [{
						name: 'withinOneYear',
						required: true,
						errmsg: '请选择距上次胃镜检查间隔时间'
					},
					{
						name: 'subtotalGastrectomy',
						required: true,
						errmsg: '请选择是否有胃大部切除术手术史'
					},
					{
						name: 'ppi',
						required: true,
						errmsg: '请选择服用药物情况'
					},
					{
						name: 'symptom',
						required: true,
						errmsg: '请选择是否有描述症状'
					},
					{
						name: 'diseasesHistory',
						required: true,
						errmsg: '请选择是否有疾病史'
					},
					{
						name: 'possibilityOfCancer',
						required: true,
						errmsg: '请选择必填项'
					},
					{
						name: 'seriousIllness',
						required: true,
						errmsg: '请选择必填项'
					}
				]

				let valLoginRes = validate.validate(this.form, rules)

				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					})
					return false
				} else {
					let flag = true
					let temp_arr = []
				    this.list.forEach(item => {
						if(item.type == 'radio'){
							if(this.form[item.value] != 'b'){
								flag = false
								// 字段填充值
								temp_arr.push(item.eliminateVal)
							}
						}
						if(item.type == 'picker'){
							if(this.form[item.value] != item.opts[item.opts.length-1].value   ){
								flag = false
								// 字段填充值
								item.opts.forEach(itemOpt => {
									if(itemOpt.checked){
										temp_arr.push(itemOpt.eliminateVal)	
									}
								})
							}
						}
					})
					if(flag){
						this.saveData(-3,[])
					}else{
						this.modalName = "DialogModal1"
						this.saveData(-1,temp_arr)
					}
				}
			},
			
			saveData(code,illegalReason){
				let obj = {
					"id": this.id,
					"illegalReason":illegalReason,
					"auditStatus": code,
					"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) {
						if (code == -3){
							let that = this
							// uni.navigateTo({
							// 	url: `/personModule/signUp/questionnaire/questionnaire?id=${this.id}`
							// })
							uni.showToast({
								icon: 'none',
								title: '信息提交后不可更改，同时请留意通知公告，及时参与采血。'
							})
							setTimeout(function() {
								wx.switchTab({
									url: '/pages/index/stomach',
								});
								// let modeUrl =  that.$store.getters.userInfo.modeUrl 
								// uni.navigateTo({
								// 	url: modeUrl
								// })
							}, 1000);
						}
					} 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;

			&:first-child {
				border-bottom: 2upx solid #d3d3d3;
			}
		}
	}

	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>
	.exclusion .uni-collapse-cell__title:after {
		border-bottom: 0 !important;
	}
</style>
