<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">
				姓名
				<u-input v-model="query.residentName" :border="true" placeholder="请输入姓名" />
			</view>
			<view class="name">
				身份证号
				<u-input v-model="query.identity" :border="true" placeholder="请输入身份证号" />
			</view>
			<view class="name">
				手机号码
				<u-input v-model="query.phone" :border="true" placeholder="请输入手机号码" />
			</view>
			<view class="name" @tap='countyshow=true'>
				现住区县
				<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">
				详细地址
				<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'>
				签约机构
				<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'>
				医生
				<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'>
				所属人群
				<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'>
				服务包
				<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">
				签约周期(年)
				<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="changeRadio">
				<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='updata'>
					提交
				</view>
			</view>
		</view>
		<u-popup v-model="popupShow" mode="right" @close="closeCrowds" width='50%'>
			<scroll-view scroll-y="true" style="height: 100vh;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>
		<protocol></protocol>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		arealist,
		applysave,
		getCrowd,
		getPackageByCrowdNo
	} from '@/api/pagesC/Onlinesigning/index.js'
	import {
		getSex,
		getBirthday
	} from '@/api/conversion.js'
	import protocol from '@/components/protocol/index.vue'
	export default {
		components: {
			protocol
		},
		data() {
			return {
				showGroup: 1,
				packageslist: [],
				crowdslist: [],
				popupShow: false, //
				countyshow: false, //区县选择开关
				countylist: [], //区县
				Townshiplist: [], //乡镇
				Townshipshow: false, //乡镇选择开关
				villagelist: [], //村
				villageshow: false, //乡镇选择开关
				radio: '',
				stepnumber: 1,
				query: {
					province: '370000000000',
					provinceName: '山东省',
					residentName: null,
					identity: null,
					phone: null,
					city: '371400000000',
					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: [],
					crowdNoList: null,
					packageList: [],
					packageNoList: null,
					signYears: null,
				}
			}
		},
		watch: {
			// 'query.signYears': {
			// 	handler(newVal, oldVal) {},
			// }
		},
		methods: {
			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',
							})
							uni.redirectTo({
								url: "/pagesB/mysigning/mysigning"
							})
						} 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 == '+') {
					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, '1', '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, '1', 'village')
			},
			//选择村
			villageconfirm(e) {
				this.query.committee = e[0].value
				this.query.committeeName = e[0].label
			},
			//区县list
			arealistinfo(code, code2, list) {
				arealist(code, code2).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}`
					})
				}
			},
			//签约机构
			goselectInstitution() {
				uni.navigateTo({
					url: "/pagesC/selectInstitution/selectInstitution"
				})
			},
			//点击乡镇
			Townshipshowtrue() {
				if (!this.query.county) {
					this.$refs.uToast.show({
						title: '请先选择区县',
						type: 'error',
					})
				} else {
					this.Townshipshow = true
				}
			},
			//点击社区
			villageshowtrue() {
				if (!this.query.town) {
					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
				}
				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
					this.showGroup = 2
					this.popupShow = true
				})
			},
			//人群list
			getCrowdinfo() {
				getCrowd('370882199909092123', '1').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
							}
						})
					})
				} else {
					this.query.packageList = []
					this.query.packagesName = ''
					this.query.packageNoList.forEach(el => {
						this.packageslist.forEach(ele => {
							if (el == ele.packageNo) {
								var obj = {
									packageNo: ele.packageNo,
									packageName: ele.packageName
								}
								this.query.packageList.push(obj)
								this.query.packagesName = ele.packageName + ',' + this.query.packagesName
							}
						})
					})
				}
			},
			crowdscheckboxGroupChange(e) {
				this.query.crowdNoList = e
			},
			packagescheckboxGroupChange(e) {
				this.query.packageNoList = e
			},
		},
		onLoad(options) {
			this.arealistinfo('371400000000 ', '1', 'county');
			this.getCrowdinfo();
		},
		onShow() {
			var that = this
			uni.$on('data', function(data) {
				let item = JSON.parse(data.data)
				that.query.orgName = item.orgName
				that.query.orgNo = item.orgNo
				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
				uni.$off('doctordata')
			})
		},
	}
</script>
<style lang="scss">
	@import "./Onlinesigning.scss";
</style>
