<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<view class="none" v-if="showList==false">
			<!-- 暂未添加就诊人 -->
			<view class="conter">
				<image src="/static/empty/adduser.png" mode=""></image>
				<text class="word">暂未添加就诊人</text>
				<text class="btn" @click="addPerson">添加</text>
			</view>
		</view>

		<!-- 就诊人 -->
		<view class="list" v-if="showList">
			<view class="title">
				已添加{{infoList.length}}位就诊人，还能添加{{6-(infoList.length)}}位就诊人
			</view>

			<view class="info_list" :class="item.is_default==1?'list_active':''" v-for="(item,index) in setInfoList"
				:key="item.id" @click="choose(item.id)" v-if="setInfoList">
				<view class="info_list_top">
					<view class="info_name">
						<text class="name">{{item.name}}</text>
						<text class="sign">[{{item.text}}]</text>
						<text class="default" v-if="item.is_default==1">默认</text>
					</view>
					<view class="info_sex" @tap.stop="toEidt(item.id)">
						编辑
					</view>
				</view>
				<view class="info_list_bottom">
					<text class="id">{{item.id_card.replace(/(\w{6})\w*(\w{4})/,'$1********$2')}}</text>
					<text class="telephone">{{item.mobile.replace(/(\d{3})\d*(\d{4})/, '$1****$2')}}</text>
				</view>
			</view>

		</view>

		<!-- 温馨提示 -->
		<view class="prompt">
			<view class="title">
				温馨提示
			</view>
			<view class="ol">
				<view class="li">
					{{num}}、就诊人姓名、证件信息用户平台审核,不会外传。请输入正确的就诊人姓名和证件号
				</view>
				<view class="li">
					{{num+1}}、
					根据相关政策,现就诊人及监护人需进行实名认证,请您及时认证,以便使用平台的服务功能
				</view>
			</view>
		</view>


		<!-- 添加就诊人 -->
		<view class="footer" v-if="showList && infoList.length<6">
			<text @click="addPerson">添加就诊人</text>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		userList,
		userPatientChoose,
		userRelation
	} from '../../request/api/api'
	export default {
		data() {
			return {
				// 空白页
				showList: false,
				infoList: [], // 列表
				id: 0,
				actionList: [], // 列表,
				num: 1,
			}
		},
		onLoad() {

		},
		computed: {
			setInfoList() {
				let list = []
				list = this.infoList.map((item) => {
					return {
						...item,
						text: this.actionList.find((it) => it['key'] == item['relation'])['text']
					}
				})
				return list
			}
		},
		methods: {
			// 添加就诊人
			addPerson() {
				uni.navigateTo({
					url: '/subPackages/my/myinfo-add?id=' + this.id
				})
			},

			// 就诊人列表
			getInfolist() {
				userList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'info');

					if (res.data.errcode == 0) {
						this.infoList = res.data.data

					}
					if (this.infoList.length > 0) {
						this.showList = true
					}
				})
			},
			// 就诊人关系
			getAction() {
				userRelation({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'relation');
					this.actionList = res.data.data

				})
			},

			// 切换
			toEidt(e) {
				uni.navigateTo({
					url: '/subPackages/my/myinfo-edit?id=' + e
				})
			},

			// 默认就诊人
			choose(e) {
				userPatientChoose({
					method: "post",
					data: {
						up_id: e,
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					uni.showLoading({
						title: "加载中"
					});

          uni.hideLoading();
          this.$refs.uToast.show({
            title: '切换成功',
            type: 'default',
            icon: false
          })

          this.getInfolist();

          // setTimeout(() => {
          // 	uni.navigateBack({
          // 		delta: 1,
          // 	})
          // }, 1000)
				})
			}
		},
		mounted() {
      this.getAction()
			this.getInfolist()
		},
		onShow() {
      this.getAction()
			this.getInfolist()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		max-height: 100%;
		background: #F8FAFC;
		padding-bottom: env(safe-area-inset-bottom);

		.none {
			width: 750rpx;
			padding-top: 200rpx;

			.conter {
				width: 400rpx;
				height: 409rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0rpx auto 380rpx;

				image {
					width: 300rpx;
					height: 223rpx;
					vertical-align: middle;
				}

				.word {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #6C7380;
					line-height: 33rpx;
					margin: 32rpx 0;
				}

				.btn {
					width: 400rpx;
					height: 82rpx;
					line-height: 82rpx;
					font-size: 28rpx;
					text-align: center;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					background: #1777FF;
					border-radius: 64rpx;
				}
			}

		}



		.list {
			padding-bottom: 190rpx;

			.title {
				width: 710rpx;
				height: 40rpx;
				line-height: 33rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #94A3B8;
				padding: 40rpx;
			}


			.list_active {
				border: 2rpx solid #4175EE;
			}

			.info_list {
				margin: 20rpx auto;
				width: 710rpx;
				height: 172rpx;
				background: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				border-radius: 26rpx;

				.info_list_top {
					width: 710rpx;
					height: 40rpx;
					padding: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.info_name {
						height: 32rpx;
						font-family: PingFang SC-Semibold, PingFang SC;

						.name {
							font-size: 32rpx;
							font-weight: 600;
							color: #333333;
							line-height: 32rpx;
						}

						.default {
							background: #D9E9FF;
							border-radius: 6rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #1777FF;
							line-height: 23rpx;
							padding: 6rpx 12rpx;
						}

						.sign {
							font-size: 28rpx;
							font-weight: 400;
							color: #475569;
							line-height: 32rpx;
							margin: 0 24rpx 0 16rpx;
						}
					}

					.info_sex {
						color: #1777FF;
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.info_list_bottom {
					width: 710rpx;
					height: 40rpx;
					padding: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-family: PingFang SC-Regular, PingFang SC;

					.id {
						font-size: 28rpx;
						font-weight: 400;
						color: #94A3B8;
					}

					.telephone {
						font-size: 28rpx;
						font-weight: 400;
						color: #94A3B8;
					}
				}
			}

		}


		.prompt {
			position: fixed;
			left: 0;
			bottom: 180rpx;
			width: 750rpx;
			// height: 280rpx;
			background: #F8FAFC;
			margin: 10rpx 0;
			z-index: 9999999;

			.title {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #94A3B8;
				line-height: 33rpx;
				margin-bottom: 16rpx;
				padding: 32rpx;
			}

			.ol {
				padding: 0 32rpx 0 60rpx;

				.li {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #94A3B8;
					line-height: 40rpx;
				}
			}
		}


		.footer {
			width: 750rpx;
			height: 110rpx;
			border: 1rpx solid #F2F3F5;
			position: fixed;
			left: 0;
			bottom: env(safe-area-inset-bottom);
			padding: 12rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				width: 686rpx;
				height: 86rpx;
				font-size: 32rpx;
				line-height: 86rpx;
				text-align: center;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				background: #4175EE;
				border-radius: 64rpx;
			}
		}
	}
</style>