<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'自主预约'" :statusTitle="true"></status-nav>
		<!-- 自定义二级分类 -->
		<!-- 列表 -->
		<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy20">
			<view class="bacf mar-s25 pad-zy20 radius20 fon28 col3 pad-x40">
				<view class="disac pad-s32">
					<view class="flexs mar-y20">预约类别</view>
					<view @tap="openXial(0)" class="disjbac width100 radius10 pad-zy20 xiala posir">
						<view>{{category}}</view>
						<image :class="isZhuan?'zhuan':'nozhuan'" src="/static/public/sanj.png" mode="aspectFill"></image>
						<view v-if="isZhuan" class="posia bacf radius10 xial-box">
							<view class="pad-zy20 xial-item-box">
								<view @tap="chooseXia(indexl)" :class="xialCurrent==indexl?'pcol pbord':''" v-for="(iteml,indexl) in xialone" :key="indexl">{{iteml.title}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class=" disac pad-s32">
					<view class="flexs mar-y20">选择医生</view>
					<view @tap="openXial(1)" class="disjbac width100 radius10 pad-zy20 xiala posir">
						<view>{{categoryT}}</view>
						<image :class="isZhuanT?'zhuan':'nozhuan'" src="/static/public/sanj.png" mode="aspectFill"></image>
						<view v-if="isZhuanT" class="posia bacf radius10 xial-box">
							<view class="pad-zy20 xial-item-box">
								<view @tap="chooseXiaT(indext)" :class="xialCT==indext?'pcol':''" v-for="(itemt,indext) in xialTwo" :key="indext">{{itemt}}</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 预约日期 -->
				<view class="mar-s20 mar-x30">预约日期</view>
				<scroll-view scroll-x >
					<view class="disac">
						<view @tap="chooseTime(index)" class="disjcac fc flexs radius20 mar-y20 yutime borbot-df" :class="item.status==0?'bcdb col3':'colc'" :style="{background:timeCurrent==index?publicColor:'',border:timeCurrent==index?`2rpx solid ${publicColor}`:''}" v-for="(item,index) in dataList" :key="index">
							<view :class="timeCurrent==index?'colf':'col3'" class="bold fon28">{{item.title}}</view>
							<view :class="timeCurrent==index?'colf':''" class="fon26 mar-s10">{{item.time}}</view>
						</view>
					</view>
				</scroll-view>
				<!-- 时间段 -->
				<view class="mar-s20 mar-x10">时 间 段</view>
				<view class="disjb fw">
					<view @tap="chooseTD(indextd)" :style="{background:itemtd.tdStatus?publicColor:'',border:itemtd.tdStatus?`2rpx solid ${publicColor}`:''}" :class="itemtd.num==0?'bcdb':''" class="tc radius10 mar-x30 col3 timed borbot-df" v-for="(itemtd,indextd) in dataTD" :key="indextd">
						<view :class="itemtd.tdStatus?'colf':''">{{itemtd.ttime}}</view>
					</view>
				</view>
				<!-- 联系人 -->
				<view class="disac mar-s30">
					<view class="mar-y20 flexs titlel">联 系 人</view>
					<view class="width100 radius10 pad-zy20 borbot-cc height-68">
						<input v-model="lname" maxlength="10" class="fon28 height-68" type="text" placeholder="请填写联系人姓名"/>
					</view>
				</view>
				<!-- 联系方式 -->
				<view class="disac mar-s20">
					<view class="mar-y20 flexs titlel">联系方式</view>
					<view class="width100 radius10 pad-zy20 borbot-cc height-68">
						<input v-model="lphone" maxlength="11" class="fon28 height-68" type="text" placeholder="请输入联系电话"/>
					</view>
				</view>
				<!-- 留言信息 -->
				<view class="dis mar-s20">
					<view class="mar-y20 flexs mar-s20 titlel">留言信息</view>
					<view class="width100 radius10 pad20 borbot-cc" style="height: 300rpx;">
						<textarea v-model="lmsg" class="fon28" maxlength="500" style="height: 300rpx;width: auto;" placeholder="请填写内容"/>
					</view>
				</view>
				<!-- 立即提交底部按钮 -->
				<view @tap="submit" class="fon30 radius20 tc colf bold0 btnl" :style="{background:publicColor}">{{btnCon}}</view>
			</view>
			<!-- 弹框 -->
			<pu-po :isShowT="isShowT" :isCenter="true" :contentVal="'提交成功！等待审核'" :comfrimVal="'好的'" @comfirmev="comfirmev"></pu-po>
		</view>
		<!-- 底部客服 -->
		<public-customer :nright="20"></public-customer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusHNH:uni.getStorageSync('statusHNH'),
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				timeCurrent:0,
				dataList:[],//日期
				dataTD:[],//时间段
				isShowT:false,
				category:'',
				lname:'',//联系人姓名
				lphone:'',//联系方式
				lmsg:'',//留言信息
				isZhuan:false,
				xialCurrent:0,
				xialone:['植发','脱发'],
				categoryT:'',
				isZhuanT:false,
				xialCT:0,
				xialTwo:['杨幂','周星驰'],
				type_id:'',//预约类别ID
				gday:'',//日期
				dtId:[],//暂存禁选时间段ID
				zanTimeD:[],//暂存时间段
				zanDay:[],//暂存日期
				dangId:'',//当前预约时间段ID
				btnCon:'立即提交'
			}
		},
		onShow() {
			this.$toolAll.tools.isLogin()
		},
		onLoad() {
			this.category = this.xialone[0]
			this.categoryT = this.xialTwo[0]
			this.checkZParmas()
			// this.$toolAll.tools.weekDate()
		},
		methods: {
			gtimeD(id,gday){
				this.$requst.post('user/appointment-period-full',{type_id:id,day:gday}).then(res=>{
					// console.log('查询预约分类某天已约满的时间段：',res);
					if(res.code==0){
						this.dtId = res.data
						this.dataTD = []
						if(this.dtId.length!=0){
							this.zanTimeD.forEach((item,index)=>{
								let newNum = 1
								let newTdStatus = false
								this.dtId.forEach(item1=>{
									if(item.id==item1.id){
										newNum = 0
										newTdStatus = false
									}
								})
								let tdObj = {
									id:item.id,
									ttime:item.ttime,
									num:newNum,
									status:item.status,
									tdStatus:newTdStatus
								}
								this.dataTD.push(tdObj)
							})
						} else {
							this.zanTimeD.forEach(item=>{
								let tdObj = {
									id:item.id,
									ttime:item.ttime,
									num:1,
									status:item.status,
									tdStatus:false
								}
								this.dataTD.push(tdObj)
							})
						}
					}
				},error=>{})
			},
			checkZParmas(){//查询参数
				this.$requst.post('user/appointment-parameters',{page:1,size:20}).then(res=>{
					// console.log('查询自主预约列表：',res);
					if(res.code==0){
						this.gtimeD(res.data.types[0].id,res.data.days[0].day)
						// 预约类别
						if(res.data.types.length!=0){
							this.type_id = res.data.types[0].id
							res.data.types.forEach(item=>{
								let ycateObj = {
									id:item.id,
									title:item.title,
									max:item.max
								}
								this.xialone.push(ycateObj)
							})
							this.category = this.xialone[0].title
						}
						//预约日期
						if(res.data.days.length!=0){
							this.gday = res.data.days[0].day
							this.zanDay = res.data.days
							res.data.days.forEach(item=>{
								let arr = item.day.split('-')
								let newDay = arr[1]+'月'+arr[2]+'日'
								let dayObj = {
									title:item.week,
									time:newDay,
									status:item.status
								}
								this.dataList.push(dayObj)
							})
						}
						// 时间段
						if(res.data.times.length!=0){
							res.data.times.forEach((item,index)=>{
								let tdObj = {
									id:item.id,
									ttime:item.name,
									status:item.status,
								}
								// this.dataTD.push(tdObj)
								this.zanTimeD.push(tdObj)
							})
						}
						
					}
				},error=>{})
			},
			submit(){
				if(!this.lname){
					this.$toolAll.tools.showToast('请输入联系人姓名')
				} else if(!this.lphone){
					this.$toolAll.tools.showToast('请输入联系电话')
				} else if(this.$toolAll.tools.isPhone(this.lphone)){
					this.$toolAll.tools.showToast('请输入正确的联系电话')
				} else if(!this.dangId){
					this.$toolAll.tools.showToast('请选择时间段')
				} else {
					let parmas = {
						type_id:this.type_id,//预约类型ID
						day:this.gday,//预约日期，如：2021-08-11
						period_id:this.dangId,//预约时间段ID
						user_name:this.lname,//联系人姓名
						user_phone:this.lphone,//联系人电话
						remarks:this.lmsg//预约留言信息，（500字以内）
					}
					if(this.btnCon=='立即提交'){
						this.btnCon = "正在提交..."
						this.$requst.post('user/appointment-apply',parmas).then(res=>{
							// console.log('提交预约申请：',res);
							if(res.code==0){
								this.isShowT = true
								wx.requestSubscribeMessage({
									tmplIds: ['uvGd7RqaegheGU-uVxR-uM3y2MadZeMOHdQaNiiWm8U'],
									success: (res)=> { 
										console.log('res',res);
										this.isShowT = true
									}
								})
							} else {
								this.btnCon = "立即提交"
								this.$toolAll.tools.showToast(res.msg)
							}
						},error=>{})
					}
				}
			},
			comfirmev(){
				this.isShowT = false
				uni.navigateBack({delta:1})
			},
			goYu(){//去预约
				uni.navigateTo({
					url:''
				})
			},
			chooseTime(index){
				if(this.dataList[index].status!=0){
					this.timeCurrent = index
					this.gday = this.zanDay[index].day
					this.gtimeD(this.type_id,this.gday)
				}
			},
			chooseTD(index){//时间段选择事件
				if(this.dataTD[index].num!=0){
					this.dangId = this.zanTimeD[index].id
					this.dataTD.forEach(item=>{//发现为true的改为false，即控制单选，注释就表示多选
						if(item.tdStatus==true) item.tdStatus = false
					})
					this.dataTD[index].tdStatus = !this.dataTD[index].tdStatus
				}
			},
			openXial(index){
				if(index==0) {
					this.isZhuanT = false
					this.isZhuan = !this.isZhuan
				}
				if(index==1) {
					this.isZhuan = false
					this.isZhuanT = !this.isZhuanT
				}
			},
			chooseXia(index){//预约类别选择事件
				this.xialCurrent = index
				this.category = this.xialone[index].title
				this.type_id = this.xialone[index].id
				this.gtimeD(this.type_id,this.gday)
			},
			chooseXiaT(index){
				this.xialCT = index
				this.categoryT = this.xialTwo[index]
			},
		}
	}
</script>

<style>
</style>