<template>
	<view class="hzIndex">
		<hzHeader title="就诊预约受理"></hzHeader>
		<view class="container hzContent">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">
					预约受理
					<view class="tabBottom" v-if="currentTabIndex == 0"></view>
				</view>
				<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">
					历史记录
					<view class="tabBottom" v-if="currentTabIndex == 1"></view>
				</view>
			</view>
			<view v-if="currentTabIndex == 0">
				<view class="selectDate">
					<view class="dateTit">
						<view class="leftIcon">

						</view>
						<text style="font-size:32upx;color:#333;font-weight: 600;">选择日期</text>
					</view>
					<scroll-view class="scrollDate" scroll-x="true">
						<view class="dateItem" :class="chooseDateIndex == index ? 'time-active' : ''"
							v-for="(item, index) in date" :key="index" @click="switchTab(index)">
							<text class="time">{{ item.tiems.substr(5, 10) }}</text>
							<text class="week">{{ item.week }}</text>
						</view>
					</scroll-view>
				</view>
				<view class="content">
					<!-- 类型 -->
					<view class="barber-doctor">
						<!-- v-if="(!item.project_day)||item.project_day.indexOf(date[chooseDateIndex].weekDay)!=-1" -->
						<view :class="chooseProjectId == item.id ? 'barber-doctor-item-choose' : ''"
							class="barber-doctor-item" v-for="(item, index) in projectList" :key="index"
							@click="chooseProject(item)">
							<text>{{ item.project_name }}</text>
							<text>{{ item.count||0 }}</text>
						</view>
					</view>

					<!-- <scroll-view scroll-x="true" class="scroll-view">
				<view class="kind" style="justify-content: inherit;">
					
					<text style="margin-right: 20upx;" v-for="(item, index) in projectList" :key="index" @click="chooseProject(item)">
						<text class="round" :class="chooseProjectId == item.id ? 'barberactive' : ''"></text>
						<text class="input_left" style="line-height: 32upx;">
							{{ item.project_name }}:
							<text class="num" style="line-height: 32upx;">{{ item.count||0 }}</text>
						</text>
					</text>
				</view>
				</scroll-view> -->
					<!-- <view class="time-wrap">
					<view
						class="time time-item"
						style="width: 46%!important;padding: 0rpx;padding-top: 20upx;"
						v-for="(item, index) in timelist"
						:key="index"
						:style="item.count > 0 ? 'color:#00c277;border-color:#00c277' : 'color:#999;border-color:#999'"
						@click="checkItem(item.id)"
						:class="isActive == item.id ? 'active' : ''"
					>
						<p class="times">{{ item.name }}</p>
						<span>已约{{ item.count }}位</span>
					</view>
				</view> -->
				</view>
				<view class="yy-detail">
					<view class="dateTit" style="margin-top: 40upx;">
						<view class="leftIcon">

						</view>
						<text style="font-size:32upx;color:#333;font-weight: 600;">预约详情</text>
					</view>
					<!-- 预约详情 -->
					<!-- <view v-if="appointlist.length > 0"> -->
					<view v-if="appointlist.length > 0">
						<view class="order-detail" v-for="(item, index) in appointlist" :key="index">
							<view class="detail">
								<!-- <p>排号：{{ item.code }}</p> -->
								<view>
									<view class="s-title">预约项目</view>{{ item.project_name }}
								</view>
								<view>
									<view class="s-title">预约时间</view>{{ item.apply_date+" "+item.project_info_name }}
								</view>
								<view>
									<view class="s-title">预约时间</view>联系人{{ item.apply_name }}
								</view>
								<view @click="callPhone(item.apply_phone)">
									<view class="s-title">预约时间</view>
									<span>
										{{ item.apply_phone }}</span>
								</view>
								<view>
									<view class="s-title">部门</view>{{ item.apply_dept_name }}
								</view>
							</view>

							<view class="btn" style="border-color:#00C277;color:#00c277"
								v-if="item.edit_other ==0 && item.editFlag" @click="goEditPage(item,index)">修改</view>
							<view class="btn" v-if="item.edit_other ==1 && item.editFlag">已修改</view>
						</view>
					</view>
					<content-none v-else :padTop="8"></content-none>
				</view>
			</view>
			<view v-if="currentTabIndex == 1">
				<view class="search-box">
					<view class="form-item searchv">
						<picker class="time-data" mode="date" @change="startDateChange">
							<view class="">{{ startDate }}</view>
						</picker>
						<text class="timecenter">至</text>
						<picker class="time-data" mode="date" @change="endDateChange">
							<view class="">{{ endDate }}</view>
						</picker>
						<!-- <view class="search" style="height: 60upx;font-size: 26upx;margin-top: 7upx;" @click="searchYjList">搜索</view> -->
						<!-- <image style="width: 5vh;height: 5vh;margin-left: 1vh;" @click="search" src="/static/icons/seach.png" mode=""></image>
								 -->
					</view>
					<view class="tj-box">
						<text style="font-size: 28upx; color: #666666;">时段内预约总数：</text>
						<text style="font-size: 32upx;color: #0DB0A7;">{{count}}</text>
					</view>
				</view>
				<view class="list-box" v-if="appointlist.length > 0">
					<view class="detail-box" v-for="(item, index) in appointlist" :key="index">
						<view class="detail_header">
							<image class="blueSign" src="@/static/haircut/jzyy.png" mode=""></image>
							<text class="font-tilte">就诊预约</text>
							<!-- <text class="slect_icon"></text> -->
							<!-- <text class="font-result" v-if="item.int_status==0">预约成功</text>
							<text class="font-result" v-if="item.int_status==1" style="color: #666666;">已取消</text>
							<text class="font-result" v-if="item.int_status==2" style="color: red;">车主未至</text> -->
						</view>
						<view class="detail_msg">
							<view class="info-item">
								<text>预约人员：</text>
								<text class="infoSpan">{{ item.apply_name }}</text>
							</view>
							<view class="info-item">
								<text>联系方式：</text>
								<text class="infoSpan">{{ item.apply_phone }}</text>
							</view>
							<view class="info-item">
								<text>预约项目：</text>
								<text class="infoSpan">{{ item.project_name }}</text>
							</view>
							<view class="info-item">
								<text>预约时间：</text>
								<text class="infoSpan">{{ item.apply_date+" "+item.project_info_name }}</text>
							</view>
							<view class="info-item">
								<text>申请时间：</text>
								<text class="infoSpan">{{ formatDate(item.createTime) }}</text>
							</view>
						</view>
					</view>
				</view>
				<content-none :padTop="20" v-else></content-none>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getSlSeekmedicalProjectRecord,
		getSeekmedicalProjectSl,
		getAllSeekmedicalProjectRecord
	} from '@/common/api.js';
	import {
		callbackRequest,
		getStorage,
		getNumDate,
		alertTip,
		formatDate,
		getDate,
		callPhone
	} from '@/common/util.js';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				userInfo: getStorage('userInfo'),
				pos: 0,
				isActive: -9,
				kindActive: 0,
				barber1: 0,
				barber2: 1,
				barberActive: 0,
				barberActive1: -1,
				part: '',
				name: '',
				tel: '',
				key: true,
				date: getDate(),
				chooseDateIndex: 0,
				detailList: [{
					deptName: "大数据事业部",
					code: "D302",
					userName: "刘晓明",
					tel: "15056771234",
					type: "心电图"
				}, ],
				fagtime: '',
				projectList: [], //项目列表
				chooseProjectId: 0,
				parent_id: "",
				callPhone: callPhone,
				currentTabIndex: 0, //当前选择的tab
				//分页
				page: 1,
				pageSize: 10,
				loadingType: 0, //0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				user: getStorage('userInfo'),
				appointlist: [],
				date: getNumDate(7), //获取今天起 最近7天时间
				formatDate: formatDate,
				startDate: this.getDay(-7),
				endDate: this.getDay(0),
				areas: ['', '会议中心', '科技楼'],
				count: ""
			};
		},
		components: {
			contentNone
		},
		onLoad(options) {
			this.parent_id = options.parent_id || "";
			this.initData();
		},
		watch: {
			currentTabIndex: function(newVal, oldVal) {
				this.chooseProjectInfoId = 0;
				if (newVal == 1) {
					this.page = 1;
					this.loadingType = 0;
					this.getListYY();
				} else {
					// 初始化
					this.initData();
				}
			}
		},
		methods: {
			goEditPage(item, index) {

				uni.redirectTo({
					url: `/pages/medical/see-doctor-edit?id=` + item.id + '&type=2'
				});
			},
			getListYY() {
				// let lfDatas = uni.getStorageSync('lfDatas');
				// this.appointlist = lfDatas;
				let params = {
					method: getAllSeekmedicalProjectRecord,
					data: {
						pageNum: this.page,
						pageSize: this.pageSize,
						startDate: this.startDate,
						endDate: this.endDate,
						userId: this.user.id
					}
				};
				console.log('222', params)
				callbackRequest(params).then(res => {
					if (res.data.returnCode == 1) {
						if (this.page == 1) {
							this.appointlist = res.data.returnData.list || [];
							this.count = res.data.returnData.count || 0;
						} else {
							if (res.data.returnData.length > 0) {
								this.appointlist = this.appointlist.concat(res.data.returnData.list);
								this.loadingType = 0;
							} else {
								this.loadingType = 2;
							}
						}
					}
				});
			},
			startDateChange: function(e) {
				this.startDate = e.target.value;
				this.page = 1;
				this.loadingType = 0;
				this.getListYY();
			},
			endDateChange: function(e) {
				this.endDate = e.target.value;
				this.page = 1;
				this.loadingType = 0;
				this.getListYY();
			},
			getDay(i) {
				var date1 = new Date(new Date().getTime() + i * 24 * 60 * 60 * 1000);

				var year = date1.getFullYear();
				var month = date1.getMonth() + 1;
				if (month < 10) {
					month = "0" + month;
				}
				var day = date1.getDate();
				if (day < 10) {
					day = "0" + day;
				}
				return year + '-' + month + '-' + day;
			},
			getList() {
				let params = {
					"method": getSlSeekmedicalProjectRecord,
					data: {
						projectId: this.chooseProjectId,
						applyDate: this.date[this.chooseDateIndex].tiems
					},
				}
				callbackRequest(params)
					.then(res => {
						var listS = res.data.returnData || [];
						var listSS = [];
						var dateNow = this.date[0].tiems;
						dateNow = dateNow.replace(/-/g, '/');
						var dateNowTime = new Date(dateNow).getTime();
						for (var i = 0; i < listS.length; i++) {
							var obj = listS[i];
							var apply_date = obj.apply_date;
							apply_date = apply_date.replace(/-/g, '/');
							var apply_date_time = new Date(apply_date).getTime();
							if (apply_date_time > dateNowTime) {
								obj.editFlag = true;
							} else {
								obj.editFlag = false;
							}
							listSS.push(obj);
						}
						if (res.data.returnCode == 1) {
							this.appointlist = listSS
						}
					})
			},
			chooseProject(item) {
				this.chooseProjectId = item.id;
				this.choseProject = item;
				this.getList();
			},
			//初始化数据
			initData() {
				let params = {
					"method": getSeekmedicalProjectSl,
					"data": {
						userId: this.userInfo.id,
						applyDate: this.date[this.chooseDateIndex].tiems,
						parentId: this.parent_id,
					}
				}
				callbackRequest(params)
					.then(res => {
						res = res.data;
						if (res.returnCode === "1") {
							this.projectList = res.returnData;
							this.chooseProjectId = res.returnData[0].id;
							this.choseProject = res.returnData[0];
							this.getList();
						}
					})
			},
			//切换日期
			switchTab: function(i) {
				this.chooseDateIndex = i;
				this.isActive = '';

				this.initData();
			},
			checkItem: function(id) {
				var self = this;
				self.isActive = id;
			},
			handle: function(index) {
				this.kindActive = index;
			},
			check: function(index) {
				this.barberActive = index;
			},
			cancel: function(item) {
				if (confirm('是否取消')) {
					var self = this;
					item.id;
					// request.visitorInfoUpdateStatus({
					// 	applyType: "06",
					// 	applyId: item.id,
					// 	status: "3"
					// }, function(res) {
					// 	if (res.returnCode == 1) {
					// 		self.checkItem(self.isActive);
					// 		mui.toast("取消成功", {
					// 			duration: "long"
					// 		});
					// 		request.getBasicInfoForBarber({
					// 			applyDate: self.haircutDate
					// 		}, function(res) {
					// 			vm.kind = res.returnData[0].kind;
					// 			vm.timelist = res.returnData[0].remain.slice(0, 2)
					// 		})
					// 	} else mui.toast(res.returnMsg, {
					// 		duration: "long"
					// 	})
					// })
				}
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index == 0) {
					var url = "/pages/medical/see-doctor-history";
					uni.navigateTo({
						url
					});
				}
			},
			change: function(id) {
				var self = this;
				storage.set({
					id: id,
					openType: 8
				});
				window.location.href = './haircut.html';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 24upx;
		margin-top: 150upx;

		.tab-box {
			width: 80%;
			display: flex;
			font-size: 32upx;
			color: #555555;

			.active_tab {
				font-weight: 800;

			}

			.tab-item {
				width: 40%;

				.tabBottom {
					width: 28%;
					height: 4upx;
					border-radius: 5px;
					background-image: linear-gradient(to right, #64E182, #1CA7B2);
				}
			}
		}
	}

	.content {
		margin-top: 24upx;
		border-radius: 20upx;
		overflow: hidden;
		background-color: #fff;
	}

	.barber-doctor {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// border-bottom: 1px solid #e5e5e5;
		padding-bottom: 20upx;

		.barber-doctor-item {
			width: 157*2upx;
			min-height: 38*2upx;
			background: linear-gradient(90deg, #EAF4FF 0%, #FAFCFF 100%);
			border-radius: 4*2upx;
			border: 1px solid #F2F6FA;
			line-height: 40upx;
			color: #555555;
			font-size: 28upx;
			margin-left: 24upx;
			margin-top: 24upx;
			padding: 18upx 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		// .barber-doctor-item:first-child {
		// 	margin-left: 0;
		// }

		.barber-doctor-item-choose {
			background: #EDFCF7;
			border: 1px solid #00ADA6;
			color: #0DB0A7;
		}
	}

	.barberactive {
		background: #00c277 !important;
	}

	.input_left {
		vertical-align: middle;
		font-size: 28rpx;
		color: #555;
	}

	.round {
		width: 32upx;
		height: 32upx;
		border-radius: 50%;
		background: #cccccc;
		display: inline-block;
		margin-right: 10upx;
		vertical-align: middle;
	}

	.selectDate {
		width: 100%;
		padding: 20upx;
		background-color: #fff;
		border-radius: 20upx;
		padding-left: 0;
		margin-top: 24upx;

		.dateItem {
			margin: 0 10upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-weight: 400;
			font-size: 28upx;
			color: #555;
			border-radius: 16upx;
			padding: 18upx 20upx;
			background-color: #F2F6FA;
			border: 1px solid #F2F6FA;
		}

		.time-active {
			background: #EDFCF7;
			color: #0DB0A7;
			border: 1px solid #0DB0A7;
		}

		.scrollDate {
			margin-top: 20upx;
			white-space: nowrap;
		}

		/deep/::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
		}

		/deep/.uni-scroll-view-content {
			display: flex;
		}
	}

	.yy-detail {}

	.dateTit {
		width: 100%;
		display: flex;
		align-items: center;
		margin-left: 20upx;

		image {
			width: 35upx;
			height: 35upx;
			margin-right: 10upx;
		}

		.leftIcon {
			width: 8upx;
			height: 30upx;
			background-image: linear-gradient(to bottom, #82E7B3, #94B8EF);
			border-radius: 5px;
			margin-right: 10upx;
		}
	}


	.order-detail {
		background: #ffffff;
		padding: 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #eee;
		margin-top: 24upx;
	}

	.detail view {
		font-size: 28rpx;
		color: #999999;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.s-title {
		display: inline-block;
		width: 56*2upx;
		line-height: 60upx;
		margin-right: 24upx;
		color: #555 !important;
	}

	.detail .last {
		margin-bottom: 0;
	}

	.btn {
		width: 186.6667upx;
		height: 72upx;
		line-height: 72upx;
		border: 1.3333upx solid #00c277;
		border-radius: 40upx;
		color: #00c277;
		text-align: center;
		font-size: 16*2upx;
	}

	.btn:last-child {
		border-color: #cccccc;
		margin-top: 26.6667upx;
		color: #999999;
	}

	.search-box {
		margin-top: 36upx;
		padding: 24upx;
		background-color: #fff;
		border-radius: 20upx;
	}

	.form-item {
		overflow: hidden;
		border-bottom: 1px solid #eee;
	}

	.searchv {
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.timecenter {
		display: inline-block;
		font-size: 24upx;
		margin-left: 10upx;
		margin-right: 10upx;
		color: #555555;
		line-height: 30upx;
		// margin-top: 15upx;
	}

	.time-data {
		width: 300upx;
		height: 60upx;
		font-size: 28upx;
		display: inline-block;
		border: 1px solid #0DB0A7;
		border-radius: 8upx;
		color: #555555;
		line-height: 60upx;
	}

	.tj-box {
		margin-top: 28upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list-box {
		margin-top: 24upx;

		.detail-box {
			// margin-top: 10upx;
			margin-bottom: 24upx;
			background: #ffffff;
			border-radius: 20upx;
			padding: 24upx;
		}

		.detail_header {
			padding: 15upx 0upx;
			border-bottom: 1px solid #eee;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
		}

		.detail_header .blueSign {
			width: 48upx;
			height: 48upx;
		}

		.detail_header .font-tilte {
			display: inline-block;
			font-weight: bold;
			font-size: 18px;
			color: #333333;
			margin-left: 16upx;
		}

		.detail_header .font-result {
			display: inline-block;
			position: absolute;
			width: 80*2upx;
			height: 28*2upx;
			right: 0upx;
			background: #C1EFEA;
			border-radius: 15px 15px 15px 15px;
			font-size: 28upx;
			color: #0DB0A7;
			text-align: center;
			line-height: 28*2upx;
		}

		.detail_msg {
			display: grid;
			margin-top: 20upx;
		}

		.detail_msg .info-item {
			font-size: 28upx;
			color: #999999;
			margin-bottom: 10upx;
			font-size: 28upx;
			line-height: 50upx;

			text {
				display: inline-block;
				width: 140upx;
			}

			.infoSpan {
				width: auto;
				font-size: 28upx;
				color: #666;
				float: right;
			}
		}

		.detail_msg .info-item:nth-of-type(6) {
			padding-bottom: 24upx;
			border-bottom: 1px solid #EBEFF7;
		}

		.detail_msg .info-item:last-child {
			padding-bottom: 24upx;
			border-bottom: 0px solid #000;
		}

		.comment-btn {
			margin-top: 24upx;
			width: 84*2upx;
			height: 32*2upx;
			border-radius: 16*2upx;
			border: 1px solid #0DB0A7;
			font-size: 28upx;
			color: #0DB0A7;
			line-height: 32*2upx;
			text-align: center;
			min-width: 140upx;
			justify-self: end;
		}

		.bg-ccc {
			border-color: #CACACA;
			color: #CACACA;
			background-color: #fff !important;
		}
	}
</style>