<template>
	<view class="app">
		<view class="content">
			<view class="numberone" :class="stepnumber==1?'numberones':''" @tap='tapstep(1)'>1
				<view class="information">
					填写个人信息
				</view>
			</view>
			<view class="item">
			</view>
			<view class="number" @tap='tapstep(2)'>
				<view class="numbertwo" :class="stepnumber==2?'numbertwos':''">
					2
				</view>
				<view class="information" :class="stepnumber==2?'informations':''">
					选择签约机构
				</view>
			</view>
		</view>
		<view class="contentbottom" v-if="stepnumber==1">
			<view class="name">
				<text class="asterisk">*</text>
				姓名
				<u-input v-model="query.residentName" :border="true" placeholder="请输入姓名" />
			</view>
			<view class="name">
				<text class="asterisk">*</text>
				身份证号
				<u-input v-model="query.identity" :border="true" placeholder="请输入身份证号" />
			</view>
			<view class="name">
				<text class="asterisk">*</text>
				手机号码
				<u-input v-model="query.phone" :border="true" placeholder="请输入手机号码" />
			</view>
			<view class="name" @tap='countyshow=true'>
				<text class="asterisk">*</text>
				现住区县
				<view class="select">
					<text v-if="query.countyName" style="font-size: 26rpx;color: #303133;">{{query.countyName}}</text>
					<text v-else>请选择现住区县</text>
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<u-select v-model="countyshow" mode="single-column" :list="countylist" @confirm="countyconfirm"
				value-name='areaCode' label-name='name'></u-select>
			<view class="name" @tap='Townshipshowtrue'>
				街道/乡镇
				<view class="select">
					<text v-if="query.townName" style="font-size: 26rpx;color: #303133;">{{query.townName}}</text>
					<text v-else>请选择街道/乡镇</text>
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<u-select v-model="Townshipshow" mode="single-column" :list="Townshiplist" @confirm="Townshipconfirm"
				value-name='streetCode' label-name='name'></u-select>
			<view class="name" @tap='villageshowtrue'>
				村/社区
				<view class="select">
					<text v-if="query.committeeName"
						style="font-size: 26rpx;color: #303133;">{{query.committeeName}}</text>
					<text v-else>请选择村/社区</text>
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<u-select v-model="villageshow" mode="single-column" :list="villagelist" @confirm="villageconfirm"
				value-name='committeeCode' label-name='name'></u-select>
			<view class="name">
				<text class="asterisk">*</text>
				详细地址
				<u-input v-model="query.address" :border="true" placeholder="请输入详细地址" />
			</view>
		</view>
		<view class="nextpage" v-if="stepnumber==1" @tap="tapstep('+')">
			下一步
		</view>
		<view class="contentbottom" v-if="stepnumber==2">
			<view class="name" @tap='goselectInstitution'>
				<text class="asterisk">*</text>
				签约机构
				<view class="select">
					<text v-if="query.orgName" style="font-size: 26rpx;color: #303133;">{{query.orgName}}</text>
					<text v-else>请选择签约机构</text>
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<view class="name" @tap='gochoosedoctor'>
				<text class="asterisk">*</text>
				医生
				<view class="select">
					<text v-if="query.userName" style="font-size: 26rpx;color: #303133;">{{query.userName}}</text>
					<text v-else>请选择医生</text>
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<view class="name" @tap='changeCrowd'>
				<text class="asterisk">*</text>
				所属人群
				<view class="select" style="height: 100%;">
					<text v-if="query.crowdsName" style="font-size: 26rpx;color: #303133;">{{query.crowdsName}}</text>
					<text v-else>请选择所属人群</text>
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<view class="name" @tap='changePackages'>
				<text class="asterisk">*</text>
				服务包
				<view class="select" style="height: 100%;">
					<text v-if="query.packagesName"
						style="font-size: 26rpx;color: #303133;">{{query.packagesName}}</text>
					<text v-else>请选择服务包</text>
					<image src="../../static/huijiantou.png" mode=""></image>
				</view>
			</view>
			<view class="name">
				<text class="asterisk">*</text>
				签约时间
				<view class="select" style="height: 100%;">
					<text style="font-size: 26rpx;color: #303133;">{{query.signTime}}</text>
				</view>
			</view>
			<view class="name">
				<text class="asterisk">*</text>
				签约周期(年)
				<u-input v-model="query.signYears" type='number' :border="true" placeholder="请输入签约周期(单位年)" />
			</view>
			<view class=" signing">
				<view class="agency">
					签约提醒:
				</view>
				<view class="word">
					1.已根据您的地址智能配对签约机构，点击可修改
				</view>
				<view class="word">
					2.意向签约医生仅供参考，最终签约结果已签约医院确认信 息为准
				</view>
			</view>
			<view class="radio-content" @tap="protocolshowtrue(1)">
				<view class="radio-right">
					<view class="radio" :class="radio == 2 ? 'radio-default':''">
						<view :class="radio == 2 ? 'radio-active':''"></view>
					</view>
				</view>
				<view class="agreement">同意并签署<text style="color: #26A888;">《家庭医生签约服务协议》</text>
				</view>
			</view>
			<view class="submititem">
				<view class="laststep" @tap="tapstep('-')"> 上一步 </view>
				<view class="submit" @tap='protocolshowtrue(2)'>
					提交
				</view>
			</view>
		</view>
		<u-popup v-model="popupShow" mode="right" @close="closeCrowds" width='50%' closeable safe-area-inset-bottom>
			<scroll-view scroll-y="true" style="height: 100%;padding: 40rpx 10rpx 100rpx">
				<u-checkbox-group @change="crowdscheckboxGroupChange" v-model="query.crowdsName" v-if="showGroup == 1"
					label-size='20rpx'>
					<u-checkbox v-model="item.checked" v-for="(item, index) in crowdslist" :key="index"
						:name="item.crowdNo" label-size='20rpx'>{{item.crowdName}}</u-checkbox>
				</u-checkbox-group>
				<u-checkbox-group @change="packagescheckboxGroupChange" v-model="query.packagesName"
					v-if="showGroup == 2" label-size='20rpx'>
					<u-checkbox v-model="item.checked" v-for="(item, index) in packageslist" :key="index"
						:name="item.packageNo" label-size='20rpx'>{{item.packageName}}</u-checkbox>
				</u-checkbox-group>
			</scroll-view>
		</u-popup>
		<u-popup v-model="protocolshow" mode="bottom" width='50%' height="70%" @close="protocolshowclose" closeable
			safe-area-inset-bottom>
			<protocol :list='query' @residentAutographPathlist='residentAutographPath' v-if="protocolshow"></protocol>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getDoctorListtwo
	} from '@/api/pagesB/myfamilydoctorteam/index.js'
	import {
		arealist,
		applysave,
		getCrowd,
		getPackageByCrowdNo
	} from '@/api/pagesC/Onlinesigning/index.js'
	import {
		getSex,
		getBirthday,
		getAgeFun
	} from '@/api/conversion.js'
	import protocol from '../protocol/protocol.vue'
	export default {
		components: {
			protocol
		},
		data() {
			return {
				content: '',
				showGroup: 1,
				packageslist: [],
				crowdslist: [],
				popupShow: false, //
				countyshow: false, //区县选择开关
				countylist: [], //区县
				Townshiplist: [], //乡镇
				Townshipshow: false, //乡镇选择开关
				villagelist: [], //村
				villageshow: false, //乡镇选择开关
				protocolshow: false,
				radio: '',
				stepnumber: 1,
				code: '',
				query: {
					province: '370000000000',
					provinceName: '山东省',
					residentName: null,
					identity: null,
					phone: null,
					city: '',
					cityName: '',
					county: null,
					countyName: null,
					town: null,
					townName: null,
					committee: null,
					committeeName: null,
					orgName: null,
					orgNo: null,
					userName: null,
					userNo: null,
					teamNo: null,
					teamName: null,
					crowdsName: null,
					packagesName: null,
					crowdList: null,
					crowdNoList: null,
					packageList: null,
					packageNoList: null,
					signYears: 1,
					BasePackage: null, //基础包
					PersonalityPack: null, //	个性包
					packSignCost: 0, //价格
					residentAutographPath: null, //拍照或者签名
				}
			}
		},
		watch: {
			// 'query.signYears': {
			// 	handler(newVal, oldVal) {},
			// }
		},
		methods: {
			protocolshowclose() {
				if (this.query.residentAutographPath) {
					this.radio = 2
				}
			},
			protocolshowtrue(e) {
				if (!this.query.orgName) {
					this.$refs.uToast.show({
						title: '请选择签约机构',
						type: 'error',
					})
				} else if (!this.query.userName) {
					this.$refs.uToast.show({
						title: '请输入医生名字',
						type: 'error',
					})
				} else if (!this.query.packagesName) {
					this.$refs.uToast.show({
						title: '请选择服务包',
						type: 'error',
					})
				} else if (!this.query.signTime) {
					this.$refs.uToast.show({
						title: '请选择签约时间',
						type: 'error',
					})
				} else if (!this.query.signYears) {
					this.$refs.uToast.show({
						title: '请选择签约周期',
						type: 'error',
					})
				} else {
					// if (!this.query.county || !this.query.orgNo || !this.query.userName || !this.query.crowdList || this.query
					// 	.crowdList.length == 0 || !this.query.packageList ||
					// 	this.query.packageList.length == 0) {
					// 	this.$refs.uToast.show({
					// 		title: '请完善完信息',
					// 		type: 'error',
					// 	})
					// 	return
					// }
					if (this.query.signYears >= 10) {
						this.$refs.uToast.show({
							title: '签约周期过长',
							type: 'error',
						})
						return
					}
					if (!this.query.signYears) {
						this.query.signYears = 1
					}
					let signTime = new Date(this.query.signTime);
					let dueTime = new Date(new Date(signTime.setFullYear(signTime.getFullYear() + Number(this.query
							.signYears)))
						.setDate(signTime.getDate() - 1))
					let dueY = dueTime.getFullYear()
					let dueM = dueTime.getMonth() + 1
					let dueD = dueTime.getDate()
					this.query.signDeadline = dueY + '-' + dueM + '-' + dueD
					if (this.query.identity) {
						this.query.birthday = getBirthday(this.query.identity)
						this.query.age = getAgeFun(this.query.birthday)
						let gender = getSex(this.query.identity)
						if (gender == '女') {
							this.query.gender = 2
						} else if (gender == '男') {
							this.query.gender = 1
						} else {
							this.query.gender = 99
						}
					}
					if (e == 1) {
						this.protocolshow = true
					} else {
						if (this.query.residentAutographPath) {
							this.updata();
						} else {
							this.$refs.uToast.show({
								title: '请先同意并签署服务协议',
								type: 'error',
							})
							this.protocolshow = true
							return
						}
					}
				}
			},
			// searchfun_close() {
			// 	const idCardReg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
			// 	if (!idCardReg.test(this.query.identity)) {} else {
			// 		let sex = getSex(this.query.identity)
			// 		sex == '女' ? this.query.gender = '2' : sex == '男' ? this.query.gender = '1' : ''
			// 	}
			// },
			updata() {
				if (this.radio == 2) {
					if (!this.query.signYears) this.query.signYears = 1
					let date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
					if (month < 10) {
						month = '0' + month;
					}
					if (day < 10) {
						day = '0' + day;
					}
					this.query.signTime = year + '-' + month + '-' + day;
					if (this.query.identity) {
						this.query.birthday = getBirthday(this.query.identity)
						let gender = getSex(this.query.identity)
						if (gender == '女') {
							this.query.gender = 2
						} else if (gender == '男') {
							this.query.gender = 1
						} else {
							this.query.gender = 99
						}
					}
					applysave(this.query).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '申请签约成功',
								type: 'success',
								duration: 1500,
								back: 1,
							})
						} else {
							this.$refs.uToast.show({
								title: '签约失败，请重新签约',
								type: 'error',
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '请先同意并签署服务协议',
						type: 'error',
					})
				}
			},
			//切换
			changeRadio() {
				this.radio == 1 ? this.radio = 2 : this.radio = 1
			},
			//切换
			tapstep(val) {
				if (val == 1) {
					this.stepnumber = 1
				} else if (val == 2) {
					this.stepnumber = 2
				} else if (val == '+') {
					if (!this.query.residentName) {
						this.$refs.uToast.show({
							title: '请输入名字',
							type: 'error',
						})
					} else if (!this.query.identity) {
						this.$refs.uToast.show({
							title: '请输入身份证号',
							type: 'error',
						})
					} else if (!this.query.phone) {
						this.$refs.uToast.show({
							title: '请输入手机号',
							type: 'error',
						})
					} else if (!this.query.countyName) {
						this.$refs.uToast.show({
							title: '请选择现住区县',
							type: 'error',
						})
						// }
						// else if (!this.query.townName) {
						// 	this.$refs.uToast.show({
						// 		title: '请选择乡镇/街道',
						// 		type: 'error',
						// 	})
						// } else if (!this.query.committeeName) {
						// 	this.$refs.uToast.show({
						// 		title: '请选择村/社区',
						// 		type: 'error',
						// 	})
					} else if (!this.query.address) {
						this.$refs.uToast.show({
							title: '请输入详细地址',
							type: 'error',
						})
					} else {
						this.stepnumber++
					}

				} else if (val == '-') {
					this.stepnumber--
				}
			},
			//选择区县
			countyconfirm(e) {
				this.query.county = e[0].value
				this.query.countyName = e[0].label
				const pid = this.countylist.find(m => m.areaCode === e[0].value).id
				this.arealistinfo(pid, 'Township')
			},
			//选择乡镇
			Townshipconfirm(e) {
				this.query.town = e[0].value
				this.query.townName = e[0].label
				const pid = this.Townshiplist.find(m => m.streetCode === e[0].value).id
				this.arealistinfo(pid, 'village')
			},
			//选择村
			villageconfirm(e) {
				this.query.committee = e[0].value
				this.query.committeeName = e[0].label
			},
			//区县list
			arealistinfo(code, list) {
				var region = uni.getStorageSync('region')
				// 德州
				if (region == 1) {
					this.query.city = '371400000000'
					this.query.cityName = '德州市'
					arealist(code).then(res => {
						if (list == 'county') {
							this.countylist = res.data
						} else if (list == 'Township') {
							this.Townshiplist = res.data
						} else if (list == 'village') {
							this.villagelist = res.data
						}
					})
				} else {
					this.query.city = 370500000000
					this.query.cityName = '东营市'
					arealist(code).then(res => {
						if (list == 'county') {
							this.countylist = res.data
						} else if (list == 'Township') {
							this.Townshiplist = res.data
						} else if (list == 'village') {
							this.villagelist = res.data
						}
					})
				}
			},
			//选择医生
			gochoosedoctor() {
				if (!this.query.orgNo) {
					this.$refs.uToast.show({
						title: '请先选择签约机构',
						type: 'error',
					})
				} else {
					uni.navigateTo({
						url: `/pagesC/choosedoctor/choosedoctor?orgNo=${this.query.orgNo}&userNo=${this.query.userNo}&static=${1}`
					})
				}
			},
			//签约机构
			goselectInstitution() {
				uni.navigateTo({
					url: `/pagesC/selectInstitution/selectInstitution?orgNo=${this.query.orgNo}`
				})
			},
			//点击乡镇
			Townshipshowtrue() {
				if (!this.query.county) {
					this.$refs.uToast.show({
						title: '请先选择区县',
						type: 'error',
					})
				} else {
					this.Townshipshow = true
				}
			},
			//点击社区
			villageshowtrue() {
				if (!this.query.townName) {
					this.$refs.uToast.show({
						title: '请先选择街道/乡镇',
						type: 'error',
					})
				} else {
					this.villageshow = true
				}
			},
			//所属人群
			changeCrowd() {
				this.showGroup = 1
				this.popupShow = true
			},
			//服务包
			changePackages() {
				if (!this.query.crowdNoList) {
					this.$refs.uToast.show({
						title: '请先选择所属人群',
						type: 'error',
					})
					return
				}
				if (!this.query.orgNo) {
					this.$refs.uToast.show({
						title: '请先选择签约机构',
						type: 'error',
					})
					return
				}
				this.showGroup = 2
				this.popupShow = true
			},
			//人群list
			getCrowdinfo() {
				getCrowd(uni.getStorageSync('userinfo').cardNo).then(res => {
					res.data.forEach(e => {
						e.checked = false
					})
					this.crowdslist = res.data
				})
			},
			closeCrowds() {
				this.popupShow = false
				if (this.showGroup == 1) {
					this.query.crowdList = []
					this.query.crowdsName = ''
					this.query.crowdNoList.forEach(el => {
						this.crowdslist.forEach(ele => {
							if (el == ele.crowdNo) {
								var obj = {
									crowdNo: ele.crowdNo,
									crowdName: ele.crowdName
								}
								this.query.crowdList.push(obj)
								this.query.crowdsName = ele.crowdName + ',' + this.query.crowdsName
							}
						})
					})
					var obj = {
						crowdNoList: this.query.crowdNoList,
						orgNo: this.query.orgNo
					}
					getPackageByCrowdNo(obj, '1').then(res => {
						res.data.forEach(e => {
							e.checked = false
						})
						this.packageslist = res.data
					})
				} else {
					this.query.packageList = []
					this.query.packagesName = ''
					this.query.BasePackage = ''
					this.query.PersonalityPack = ''
					this.query.packSignCost = 0
					this.query.packageNoList.forEach(el => {
						this.packageslist.forEach(ele => {
							if (el == ele.packageNo) {
								this.query.packSignCost = this.query.packSignCost + ele.packCost
								var obj = {
									packageNo: ele.packageNo,
									packageName: ele.packageName
								}
								this.query.packageList.push(obj)
								this.query.packagesName = ele.packageName + ',' + this.query.packagesName
								if (ele.packCategory == 0) {
									this.query.BasePackage = ele.packageName + ',' + this.query.BasePackage
								} else if (ele.packCategory == 1) {
									this.query.PersonalityPack = ele.packageName + ',' + this.query
										.PersonalityPack
								}
							}
						})
					})
				}
			},
			crowdscheckboxGroupChange(e) {
				this.query.crowdNoList = e
			},
			packagescheckboxGroupChange(e) {
				this.query.packageNoList = e
			},
			//接收拍照或签名
			residentAutographPath(data) {
				this.query.residentAutographPath = data.residentAutographPath
				// this.protocolshow = false
			},
		},
		onLoad(options) {
			if(options.checkSign=="0"){
				this.$refs.uToast.show({
					title: '未签约，请先签约',
					type: 'error',
					duration:'2000',
					position:'top',
				})
			}
			var region = uni.getStorageSync('region')
			// 德州
			if (region == 1) {
				this.arealistinfo('371400000000 ', 'county');
			} else {
				this.arealistinfo('370500000000', 'county');
			}
			// }
			this.getCrowdinfo();
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (month < 10) {
				month = '0' + month;
			}
			if (day < 10) {
				day = '0' + day;
			}
			let userinfo = uni.getStorageSync('userinfo');
			this.query.residentName = userinfo.patientName
			this.query.identity = userinfo.cardNo
			this.query.phone = userinfo.phone
			this.query.signTime = year + '-' + month + '-' + day;
		},
		onShow() {
			var that = this
			uni.$on('data', function(data) {
				let item = JSON.parse(data.data)
				if (that.query.orgNo != item.orgNo) {
					that.query.orgName = item.orgName
					that.query.orgNo = item.orgNo
					that.query.userName = ''
					that.query.userNo = ''
					that.query.teamNo = ''
					that.query.teamName = ''
				}
				uni.$off('data')
			})
			uni.$on('doctordata', function(data) {
				let item = JSON.parse(data.data)
				that.query.userName = item.realname
				that.query.userNo = item.userNo
				that.query.teamNo = item.teamNo
				that.query.teamName = item.teamName
				getDoctorListtwo(1, 20, item.teamNo, '').then(res => {
					that.query.DoctorList = res.rows
				})
				uni.$off('doctordata')
			})
		},
	}
</script>
<style lang="scss">
	@import "./Onlinesigning.scss";
</style>
