<template>
	<view>
		<view v-show="!mapShow">
			<view class="text-bold text-df text-left padding">
				注：为保障筛查结果的真实性，请如实填写以下信息
			</view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-form-group">
					<view class="title"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>1、姓名</view>
					<input class="text-right" placeholder="请输入姓名" :value="form.name" name="input" @input="updateInputVal($event,'name')"></input>
				</view>
				<view class="cu-form-group">
					<view class="title"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>2、身份证</view>
					<input class="text-right" placeholder="请输入身份证" type="idcard" :value="form.IDCard" name="input" @input="updateInputVal($event,'IDCard')"></input>
				</view>
				<view class="cu-form-group">
					<view class="title"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>3、手机号码</view>
					<input class="text-right" placeholder="请输入手机号码" type="number" :value="form.cellphone" name="input" @input="updateInputVal($event,'cellphone')"></input>
				</view>

				<!-- <view class="cu-form-group">
				<view class="title" style="margin-left:16upx">4、其它联系电话</view>
				<input class="text-right" placeholder="请输入其它手机号码/固定电话" type="number" :value="form.telephone" name="input" @input="updateInputVal($event,'telephone')"></input>
			</view> -->

				<!-- <view class="cu-form-group">
				<view class="title"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>5、家庭地址</view>
				<picker @change="updatePickerVal($event,'address')" range-key="label" :data-index="21" :data-id="addressPicker[form.address].value"
				 :value="form.address" :range="addressPicker">
					<view class="picker">
						{{form.address>-1?addressPicker[form.address].label:'请选择'}}
					</view>
				</picker>
			</view> -->

				<view class="cu-form-group margin-top-sm hostipal">
					<view class="title"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>4、筛查医院</view>
					<picker @click="chooseHospital" @change="updatePickerVal($event,'hospital')" disabled="true" range-key="hospitalName"
					 :data-index="22" :data-id="hospitalList[form.hospital].id" :value="form.hospital" :range="hospitalList">
						<view class="picker">
							{{form.hospital>-1?hospitalList[form.hospital].hospitalName:'请选择筛查医院' }}
						</view>
					</picker>
				</view>

				<view class="cu-form-group margin-top-sm">
					<view class="title"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>5、筛查模式</view>
					<picker @change="updatePickerVal($event,'diseaseType')" range-key="diseaseDescription" :data-index="22" :data-id="diseaseTypeList[form.diseaseType].id"
					 :value="form.diseaseType" :range="diseaseTypeList">
						<view class="picker">
							{{form.diseaseType>-1?diseaseTypeList[form.diseaseType].diseaseDescription:'请选择筛查模式' }}
						</view>
					</picker>
				</view>

				<view class="cu-form-group">
					<view class="title"><span style="color:red;display: inline-block; vertical-align:inherit;margin-right:4upx">*</span>6、本人与报名对象关系</view>
					<picker @change="updatePickerVal($event,'relation')" range-key="label" :value="form.relation" :range="relationPicker">
						<view class="picker">
							{{form.relation>-1?relationPicker[form.relation].label:'请选择关系'}}
						</view>
					</picker>
				</view>

				<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;margin-right:14upx">
									<span style="color:red;display: inline-block; vertical-align:inherit;">*</span>7
								</view>
								<label>
									<checkbox value="A" :checked="form.agree == 'a'" class="fl" style="margin-top:4upx" />
									<view style="padding-left:90upx" @click="modalName = 'Modal'">
										<!-- {{signUpFlag?'我已阅读或听懂本':'我已向受检对象宣读和解释了本'}} -->
										受检对象已阅读或听懂本
										《<span class="text-bold sict-green-word">
											知情同意书
										</span>》
										,受检本人已经理解并同意参加本筛查。
									</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 / 2）</button>
				</view>
			</form>

			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end text-bold">
						<view class="content">知情同意书</view>
						<view class="action" @tap="modalName = ''">
							<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="modalName = ''" 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>
		<view v-show="mapShow">
			<map-control @markertap="markertap"></map-control>
		</view>
	</view>
</template>

<script>
	import mapControl from './map/index.vue'
	import validate from '@/utils/validate.js'
	import {
		getAge,
		getSampleId,
		dateFormat
	} from '@/utils/index.js'
	export default {
		components: {
			mapControl
		},
		data() {
			return {
				mapShow: false,
				modalName: '',
				id: "",
				content: '',
				diseaseTypeList: [{
						diseaseType: 'sj_wzz',
						diseaseDescription: '社区'
					},
					{
						diseaseType: 'sj_tj',
						diseaseDescription: '体检'
					},
					{
						diseaseType: 'sj_nj',
						diseaseDescription: '院内'
					}
				],
				msg: '',
				addressPicker: [{
						label: '街道1',
						value: '街道1'
					},
					{
						label: '街道2',
						value: '街道2'
					},
					{
						label: '街道3',
						value: '街道3'
					}
				],
				relationPicker: [],
				captchaFlag: false,
				form: {
					name: '',
					agree: 'b',
					IDCard: '310226195605060984',
					cellphone: '',
					telephone: '',
					diseaseType: -1,
					hospital: 0,
					relation: 0
				},
				hospitalList: [
					{
						hospitalName:'上海市松江区中心医院',
						id:1
					},
					{
						hospitalName:'上海长海医院',
						id:2
					},{
						hospitalName:'上海市普陀区中心医院',
						id:3
					},{
						hospitalName:'复旦大学附属华山医院',
						id:4
					},{
						hospitalName:'上海岳阳中西医结合医院',
						id:5
					},{
						hospitalName:'上海市中西医结合医院',
						id:6
					},{
						hospitalName:'上海同济医院',
						id:7
					},{
						hospitalName:'上海市浦东医院',
						id:8
					},{
						hospitalName:'上海市第八人民医院',
						id:9
					},{
						hospitalName:'上海交通大学医学院附属新华医院崇明分院',
						id:10
					},{
						hospitalName:'上海市光华中西医结合医院',
						id:11
					},{
						hospitalName:'嘉定区中心医院',
						id:12
					},
				]
			}
		},
		onLoad(option) {
			this.relationPicker = this.$store.getters.familyRelation
			this.id = option.id || ''
			uni.setNavigationBarTitle({
				// title: option.type == 'self' ? '自我报名' : '协助报名'
				title: '筛查报名'
			});
			if (option.id) {
				this.getInfo(option.id)
			} else {
				this.form.name = this.$store.getters.userInfo.name
				this.form.cellphone = this.$store.getters.userInfo.phoneNumber
				this.form.IDCard = this.$store.getters.userInfo.idCard || ''
			}
		},
		mounted() {
			this.getHospital()
			this.getAgree()
		},
		methods: {
			chooseHospital() {
				this.mapShow = true
			},
			markertap(id){
				this.mapShow = false
				this.form.hospital = id-1
			},
			// 获取知情同意书
			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)
						for (let i = 0; i < this.relationPicker.length; i++) {
							if (d.object.reportContent.data.relation == this.relationPicker[i].value) {
								this.form.relation = i
							}
						}
						for (let i = 0; i < this.diseaseTypeList.length; i++) {
							if (d.object.reportContent.data.diseaseType == this.diseaseTypeList[i].diseaseType) {
								this.form.diseaseType = i
							}
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},

			// 获取医院列表
			getHospital() {
				const data = {
					params: {
						pageNum: 1,
						pageSize: 500,
						isUse: 1
					}
				}
				this.$http.get(`/gastric-cancer-user/hospital/page`, data).then(res => {
					const d = res.data
					// console.log(this.$store.getters.userInfo.hospitalId)
					if (d.code == 1) {
						// this.hospitalList = d.object.list
						for (let i = 0; i < this.hospitalList.length; i++) {
							if (this.$store.getters.userInfo.hospitalId == this.hospitalList[i].id) {
								this.form.hospital = i
								console.log(this.form.hospital,'hos',this.hospitalList)
							}
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},

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

			// 提交信息
			formSubmit(e) {
				let sex = parseInt(this.form.IDCard.substr(16, 1)) % 2 == 1
				// 性别 sex 出生日期 birthday 年龄 age
				let loginRules = [{
						name: 'name',
						required: true,
						errmsg: '请输入姓名'
					},
					{
						name: 'IDCard',
						required: true,
						type: 'idCard',
						errmsg: '请输入18位身份证号码'
					},
					{
						name: 'cellphone',
						required: true,
						type: 'phone',
						errmsg: '请输入正确的手机号码'
					}
				]
				let valLoginRes = validate.validate(this.form, loginRules)
				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					})
					return false
				} else if (this.form.hospital == -1) {
					uni.showToast({
						icon: 'none',
						title: "请选择筛查医院"
					})
					return false
				} else if (this.form.diseaseType == -1) {
					uni.showToast({
						icon: 'none',
						title: "请选择筛查模式"
					})
					return false
				}
				// else if (this.form.address == -1) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: "请选择家庭住址"
				// 	})
				// 	return false
				// }
				else if (this.form.agree != 'a') {
					uni.showToast({
						icon: 'none',
						title: '请确认同意知情同意书'
					})
					return false
				} else if (this.form.relation < 0) {
					uni.showToast({
						icon: 'none',
						title: "请选择关系"
					})
					return false
				} else if (getAge(this.form.IDCard) > 79 || getAge(this.form.IDCard) < 40) {
					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.diseaseTypeList[this.form.diseaseType].diseaseType,
						"isPrivate": this.$store.getters.userInfo.isPrivate
					}
				}
				obj.data.data = Object.assign({}, this.form)
				obj.data.data.age = getAge(this.form.IDCard) + ''
				obj.data.data.year = dateFormat().split("-")[0]
				obj.data.data.diseaseType = this.diseaseTypeList[this.form.diseaseType].diseaseType
				obj.data.data.sex = parseInt(this.form.IDCard.substr(16, 1)) % 2 == 1 ? 'a' : 'b'
				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.relation = this.relationPicker[this.form.relation].value
				obj.data.data.hospitalId = this.$store.getters.userInfo.hospitalId
				obj.data.data.sampleId = getSampleId("", "YYYYMMDD-hhmm") + '-' + parseInt(Math.random() * 1000)

				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/signUp/exclusion/exclusion?id=${this.id}`
							})
						}
					} else {
						this.modalName = "DialogModal1"
						this.msg = d.message
					}
				}).catch(err => {
					console.log(err)
				})
			},

			hideModal() {
				this.modalName = ''
				// #ifdef MP-WEIXIN
				setTimeout(function() {
					wx.switchTab({
						url: '/pages/home/home',
					});
				}, 1000);
				// #endif
			},

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

			// 更新下拉框绑定的表单内容
			updatePickerVal(event, props) {
				this.$set(this.form, props, event.detail.value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cu-dialog {
		// max-height: 100vh;
		// height: 100vh;
		overflow-y: auto;
	}

	.cu-modal {
		-webkit-overflow-scrolling: touch;
	}

	.sict-green-word {
		border-bottom: 1px solid #999;
	}

	.cu-form-group {
		padding: 1upx 24upx;
	}

	.hostipal picker::after {
		// content: '';
	}
</style>
<style>

</style>
