<template>
	<view class='add-visitor-page'>
		<view class="h-name over PfScSemibold">
			{{hospital_depart_name}}
		</view>
		
		<view class="header block flex line40" @click="addVisitor">
			<img :src="cssUrl+'add.svg'">增加就诊人
		</view>
		<view class="list-wrapper" v-if="type == 1">
			<view :class="'item block'+(item.select?' active':'')" v-for="(item,key) in visitUsers" @click="chooseVisitor(item, key)">
				<view class="top flex">
					<view class="name PfScSemibold over2">{{item.name}}</view>
					<!-- <view class="aam_times" v-if="item.remain_num > 0">剩余{{item.remain_num}}次</view> -->
				</view>
				<view class="bot line36">
					身份证：{{item.idcard_txt}}
				</view>
				<img class="status" :src="cssUrl+'visitor_select_active.svg'">
				<img class="bg" :src="cssUrl+'visitor_list__bg.svg'">
			</view>
		</view>
		<view class="submit"  v-if="type == 1" @click="toPrebook">
			<view class="bot primary btn btn2 submitbtn" hover-class="hover">
				确认预约（已选{{selectCount}}位）
			</view>
			<view class="tip height40">请确保预约就诊前在门诊先挂号</view>
		</view>

		<view class="list-wrapper2" v-if="type == 2">
			<view class="item block" v-for="(item,key) in visitUsers">
				<view class="top flex" @click="vistorOption(item)">
					<view class="PfScSemibold">{{item.name}}</view>
					<view>身份证尾号：{{item.idcard}}</view>
				</view>
				<!-- 暂时注释 多个医院信息渲染 -->
				<!-- <view class="bt" v-if="item.hospital_info.length>0">
					<view class="bt-item flex" v-for="(item2,key2) in item.hospital_info">
						<view class="left flex">
							<view class="over3">{{item2.hospital_name}} {{item2.hospital_dept}}</view>
							<view class="status2" v-if="!item2.hospital_state">停诊</view>
							<view class="status2" v-else-if="item2.is_expire">{{item2.expire_desc}}</view>
						</view>
						<view class="more right" v-if="item2.remain_num>=0">剩余<text>{{item2.remain_num}}</text>次</view>
						<view class="owe right" v-else>超<text>{{-item2.remain_num}}</text>次</view>
					</view>
				</view> -->
				<view class="bt">
					<view class="bt-item flex">
						<view class="left flex">
							<view class="over">{{ item.hospital?item.hospital:'暂无剩余针灸次数'}}</view>
							<!-- <view :class="(!item.doctor_status && !item.weeks)? 'over' : ''">{{ item.hospital}}</view> -->
							<view class="over depart">{{item.depart }}</view>
							<view class="status2" v-if="item.doctor_status !== '出诊' && item.hospital">{{ item.doctor_status }}</view>
							<view class="status2" v-else-if="item.weeks && item.hospital">{{ item.weeks }}周未看病</view>
						</view>
						<view class="more right" v-if="item.hospital && item.remain_num>=0">剩余<text>{{item.remain_num}}</text>次</view>
						<view class="owe right" v-else-if="item.hospital">超<text>{{-item.remain_num}}</text>次</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<pop
			ref="popcom"
		  :content="popContent"
		  :title="popTitle"
		  :index="popIndex"
		  :showCancel='popShowCancel'
		  @confirm="popConfirm"
		  @cancel="popCancel"
		></pop>
	</view>
</template>

<script>
	import pop from '@/components/pop.vue';
	
	export default {
		data() {
			return {
				cssUrl:this.cssUrl,
				type:1,
				res:true,
				popContent:'删除张杨明后，就诊记录还可以查到，确定删除吗？',
				popTitle:'确认删除',
				popShowCancel:true,
				visitUsers:false,
				selectCount:0,
				hospitalId:false,
				activeVisitors:[],
				popMsgs:[],
				popIndex:0,
				depart_id:0,
				hospital_depart_name:''
			}
		},
		components:{
			pop
		},
		onLoad(option) {
			var depart_info = uni.getStorageSync('depart')
			if(depart_info) {
				depart_info = JSON.parse(depart_info)
				this.hospital_depart_name = depart_info.hospital_name + ' ' + depart_info.depart_name
			}
			
			if(option.type) {
				this.type = option.type
			}else{
				var type = uni.getStorageSync('visitor_type')
				if(type) this.type = type
			}

			uni.setStorageSync('visitor_type', this.type)

			this.getVisitors()
			this.depart_id = uni.getStorageSync('depart_id')
			if(!this.depart_id && this.type == 1) {
				this.$pop.modelShow('请先选择要预约的医院科室', '/pages/index/index')
				return
			}
		},
		onReady() {
			if(this.type == 2){
				uni.setNavigationBarTitle({
					title:'就诊人'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'请选择就诊人'
				})
			}
		},
		methods: {
			modifyVistor(visitor){
				uni.setStorageSync('visitor_info_'+visitor.id, JSON.stringify(visitor))
				this.$func.toPage("/pages/modify_visitor/modify_visitor?type="+this.type+'&vid='+visitor.id)
			},
			delVistor(visitor){
				var that = this
				uni.showModal({
					title:'删除',
					content:'删除'+visitor.name+'后，就诊记录还可以查到，确定删除吗？',
					success(res) {
						if(!res.confirm) return
						that.$http.req('/user/del_visitor', {id:visitor.id},'POST').then(data=>{
							that.getVisitors()
						});
					}
				})
			},
			vistorOption(visitor){
				var that = this
				uni.showActionSheet({
					itemList: ['修改就诊人信息', '删除就诊人'],
					success: function (res) {
						if(res.tapIndex == 0){
							that.modifyVistor(visitor)
							return
						}
						if(res.tapIndex == 1){
							that.delVistor(visitor)
							return
						}
					},
					fail: function (res) {
					}
				});
			},
			chooseVisitor(info, key){
				this.selectCount = 0
				this.visitUsers[key].select = !this.visitUsers[key].select
				this.$set(this.visitUsers, key, this.visitUsers[key])
				for (var i = 0; i < this.visitUsers.length; i++) {
					if(this.visitUsers[i].select) ++this.selectCount
				}
			},
			getVisitors() {
				this.$http.req('user/get_visitors', {}, 'POST').then(data=>{
					this.visitUsers = data;
					this.visitUsers = [...this.visitUsers]
					this.popMsgs = []
					var popmsgIndex = 0
					for (var i = 0; i < this.visitUsers.length; i++) {
						this.visitUsers[i].select = false
					}
					if(this.popMsgs.length > 0 && !uni.getStorageSync('has_noticed')){
						this.popIndex = 0
						var popinfo = this.popMsgs[this.popIndex]
						this.popContent = popinfo.popContent
						this.popTitle = popinfo.popTitle
						this.popIndex = popinfo.popIndex
						this.popShowCancel = popinfo.popShowCancel
						this.showPopCom()
					}
				});
			},
			showPopCom() {
				this.$refs.popcom.open()
			},
			closePopCom() {
				this.$refs.popcom.close()
			},
			popConfirm(e, index){
				if(!uni.getStorageSync('has_noticed')){
					if(this.popMsgs.length > 0 && index<(this.popMsgs.length-1)){
						this.popIndex = index+1
						var popinfo = this.popMsgs[this.popIndex]
						this.popContent = popinfo.popContent
						this.popTitle = popinfo.popTitle
						this.popShowCancel = popinfo.popShowCancel
						this.showPopCom()
					}else{
						uni.setStorageSync('has_noticed', 1)
						this.closePopCom()
					}
				}
			},
			showNotice(popmshIndex){
				var popinfo = this.popMsgs[popmshIndex]
				this.popContent = popinfo.popContent
				this.popTitle = popinfo.popTitle
				this.popShowCancel = popinfo.popShowCancel
				this.showPopCom()
			},
			popCancel(e){
			},
			addVisitor(){
				uni.navigateTo({
					url:"/pages/modify_visitor/modify_visitor?type="+this.type
				})
			},
			toPrebook(){
				if(this.selectCount <= 0){
					this.$pop.modelShow('请选择就诊人')
					return
				}
	
				this.activeVisitors = []
				for (var i = 0; i < this.visitUsers.length; i++) {
					if(this.visitUsers[i].select) this.activeVisitors.push(this.visitUsers[i])
				}

				uni.setStorageSync('active_visitors', JSON.stringify(this.activeVisitors))
				uni.navigateTo({
					url:"/pages/prebook/prebook"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.add-visitor-page{
	overflow: hidden;
	.h-name{
		padding: 36rpx 24rpx;
		box-sizing: border-box;
		width: 100%;
		height: 116rpx;
		margin-bottom: 20rpx;
		background: white;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #000000;
	}
	.block{
		width: 714rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
		border-radius: 12rpx;
		margin: 20rpx auto 0;
	}
	.header{
		justify-content: center;
		height: 96rpx;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
		img{
			width: 44rpx;
			height: 44rpx;
			margin-right: 16rpx;
		}
	}
	.list-wrapper{
		height: 60vh;
		padding-bottom: 20rpx;
		overflow-y: auto;
		box-sizing: border-box;
		.item{
			padding: 34rpx 24rpx;
			box-sizing: border-box;
			height: 196rpx;
			position: relative;
			.top{
				line-height: 50rpx;
				height: 50rpx;
				align-items: center;
				.name{
					font-size: 38rpx;
					color: #333333;
					letter-spacing: 3rpx;
				}
				.aam_times{
					// min-width: 134rpx;
					color: #79624A;
					text-align: center;
					font-size: 28rpx;
					background: rgba(254, 232, 198, 0.66);
					border-radius: 6rpx;
					height: 44rpx;
					padding: 0 17rpx;
					line-height: 44rpx;
					margin-left: 56rpx;
				}
			}
			.bot{
				margin-top: 32rpx;
				font-size: 30rpx;
				color: #949699;
			}
			img{
				position: absolute;
			}
			&.active{
				border: 2rpx solid #39D067;
				.status{
					display: block;
				}
			}
			.status{
				right: 0;
				bottom: 0;
				width: 98rpx;
				height: 98rpx;
				display: none;
			}
			.bg{
				bottom: 0;
				right: 0;
				width: 162rpx;
				height: 78rpx;
			}
		}
	}
	.submit{
		position: fixed;
		width: 100%;
		top: 82.41%;
		.submitbtn{
			width: 646rpx;
			margin: 0 auto;
		}
		.tip{
			text-align: center;
			font-size: 28rpx;
			color: #B3B4BC;
			margin-top: 33rpx;
		}
	}
	.list-wrapper2{
		.item{
			.top{
				background: #5CD378;
				width: 100%;
				height: 118rpx;
				line-height: 118rpx;
				box-sizing: border-box;
				box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03), 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
				border-radius: 8rpx 8rpx 0rpx 0rpx;
				padding: 0 24rpx 0 24rpx;
				justify-content: space-between;
				color: #FFFFFF;
				view:first-of-type{
					font-size: 38rpx;
					letter-spacing: 3rpx;
				}
				view:last-of-type{
					font-size: 28rpx;
					letter-spacing: 2rpx;
				}
			}
			.bt{
				padding: 30rpx;
				min-height: 118rpx;
				box-sizing: border-box;
				.bt-item{
					min-height: 55rpx;
					align-items: flex-end;
					align-items:center;
					margin-bottom: 24rpx;
					.left{
						max-width: 580rpx;
						align-items:center;
						view:first-of-type{
							min-height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color: #666;
							letter-spacing: 2rpx;
							max-width: 250rpx;
							align-items: flex-end;
						}
						.depart{
							margin-left: 10rpx;
							color: #666;
							min-height: 40rpx;
							line-height: 40rpx;
						}
						.status2{
							min-height: 40rpx;
							line-height: 40rpx;
							background: #FFE9E9;
							line-height: 38rpx;
							padding: 0 7rpx;
							font-size: 28rpx;
							color: #FD0000;
							margin-left: 8rpx;
						}
					}
					.right{
						flex-grow: 1;
						&.more,&.owe{
							font-size: 28rpx;
							color: #949699;
							letter-spacing: 2rpx;
							text-align: right;
							line-height: 52rpx;
							text{
								font-size: 52rpx;
								color: #000000;
								line-height: 52rpx;
								letter-spacing: 3rpx;
							}
						}
						&.owe{
							color: #FD0000;
							line-height: 52rpx;
							text{
								color: #FD0000;
							}
						}
					}
				}
			}
		}
	}
}
</style>
