<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">预约</view>
			<view class=""></view>
		</view>
		<view class="ail">
			<view class="ail-box">
				<view class="h-title">预约时期</view>
				<scroll-view scroll-x="true" class="box-bottom">
					<view class="santu" :class="{'lanbox' : tapindex == index}" v-for="(items,index) in itmelist" :key="index" @click="gettap(index,items)">
						<view class="" style="font-size: 18px;">{{items.dateStr.substring(5,10).replace('-','月')}}</view>
						<view class="">{{items.weekStr}}</view>
					<!-- 	<view class="">预约人数：{{items.morningCount + items.afterCount}}</view> -->
					</view>
				</scroll-view>
				<view class="h-title">预约时段</view>
				<view class="dis">
					<view class="wushi" :class="{'lanbox' : sx == 0}" @click="sx = 0">
							<view class="">上午</view>
							<view class="">当前预约：{{renshu.morningCount}}人</view>
					</view>
					<view class="wushi" :class="{'lanbox' : sx == 1}" @click="sx = 1">
							<view class="">下午</view>
							<view class="">当前预约：{{renshu.afterCount}}人</view>
					</view>
					
				</view>
			</view>
			<view class="ail-box">
				<view class="on-input">
					<view class="baoti">商品名称:</view>
					<text>{{goodsname}}</text>
				</view>
				<view class="on-input">
					<view class="baoti">预约时间:</view>
					{{appointmentday}}
				</view>
				<view class="on-input">
					<view class="baoti">门店名称:</view>
					<text>{{partnerName}}</text>
				</view>
				<view class="on-input">
					<view class="baoti">门店地址:</view>
					<text>{{address}}</text>
					
				</view>
			</view>
		</view>
		<view class="bottom-d">
			<view class="annniu" @click="gettijiao()">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	import { getToken } from '@/utils/auth'
	export default{
		data(){
			return{
				tapindex:0,
				sx:0,
				type:'',
				goodsname:'',
				goodsId:'',
				itmelist:[],
				partnerId:'',
				appointmentday:'',
				partnerName:'汽车',
				address:'',
				autoplay: true,
				renshu:{
					morningCount:0,
					afterCount:0
				}
				
			}
			},
			onLoad(option) {
				this.goodsname = option.goodsName
				this.goodsId = option.goodsId
				this.type = option.type
				console.log(this.goodsId,this.goodsname);
				this.getindex()
			
			},
			methods:{
				async getcarlist(){
					if (!getToken() ) {
					 return
					}
					const res = await request({
						url: '/appInspection/userOwn/getCars',
						method: 'get',	
					})
				
					this.carlist = res.data
						console.log(this.carlist);
				},
				async getindex(){
					let data  = {
						goodsId : this.goodsId,
						type:this.type
					}
					let res = await request({
						url:'/appInspection/goods/appointmentDateList',
						method: 'get',
						params: data
					})
					this.partnerName = res.data.partnerName
					this.address = res.data.address
					this.partnerId = res.data.partnerId
					this.itmelist = res.data.dataList
					this.appointmentday =  res.data.dataList[0].dateStr
					console.log(this.appointmentday.substring(5,10).replace('-','月'));
					console.log(res.data);
				},
				gettap(index,items){
					this.tapindex = index
					this.renshu = items
					this.appointmentday = items.dateStr
					console.log(this.renshu);
					
				},
				gohomemy(){
					uni.navigateTo({
						url:'/pages/detection/my'
					})
				},
				async gettijiao(){
					let data ={
						goodsTitle:this.goodsname,
						partnerId:this.partnerId,
						appointmentDay:this.appointmentday,
						appointmentPeriod :this.sx
					}
					let res = await request({
						url:'/appInspection/goods/appointmentInspection',
						method: 'post',
						data: data
					})
					console.log(res);
					if(res.code == 200){
						uni.showToast({
							title:'提交成功'
						})
						// uni.setStorageSync('data',res.data)
						// uni.navigateBack()
						let pages = getCurrentPages();//获取页面实例
						let nowPage = pages[pages.length - 1];//当前页面实例
						let prevPage = pages[pages.length - 2];//上一级页面实例
					    prevPage.$vm.Backappoinment(res.data)
						uni.navigateBack({
							delta: 1
						})
					}
				
					
				},
				getback(){
					uni.navigateBack()
				}
			}
}
</script>

<style scoped lang="scss">
	.aa-box{
		margin-top: 15px;
		width: 100%;
		height: 152px;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 20px;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}
	.wdadada{
		width: 100%;
		text-align: center;
		margin-top: 40px;
		font-size: 30px;
	}
	.content{
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}
	.swiper {
			height: 170px;
		}
		.bai-box{
			box-sizing: border-box;
			padding: 15px;
			background-color: white;
			border-radius: 8px;
			margin-top: 15px;
		}
		.xzlan{
			background: #E3EAFF;
		}
	.ail{
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		background-color: #F6F6F6;
	}
	.ail-box{
		width: 100%;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		background: #FFFFFF;
		margin-bottom: 10px;
	}
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 16%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}
	.on-input{
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		
		padding: 10px 0px;
		display: flex;
		align-items: center;
	}
	.baoti{
		width: 25%;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
		margin-right: 10px;
	}
	.box-bottom{
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
	}
	
	.santu{
		width: 32%;
		display: inline-block;
		box-sizing: border-box;
		padding: 10px;
		background: #F8FAFB;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 400;
		color: #999999;
		margin-top: 15px;
		margin-right: 10px;
	}
	.lanbox{
		background: #E3EAFF !important;
		color: #0D2E8D !important;
	}
	.dis{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.wushi{
		width: 49%;
	
		box-sizing: border-box;
		padding: 10px;
		background: #F8FAFB;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 400;
		color: #999999;
	}
	.h-title{
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		margin: 10px auto;
	}
	.bottom-d{
		width: 100%;
		height: 80px;
		background-color: white;
		position: fixed;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.annniu{
		height: 40px;
		background: #0D2E8D;
		width: 90%;
		border-radius: 50px;
		display: flex;
		align-items: center;
		color: white;
		justify-content: center;
	}
	.x-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
	}
	.x-left{
		display: flex;
		align-items: center;
	}
	.chebiao{
		width: 70px;
		height: 70px;
		margin-right: 10px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.dh-title{
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		line-height: 20px;
		margin-bottom: 15px;
	}
	.xh-title{
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
	}
	.x-right{
		display: flex;
		align-items: center;
	}
	.x-xia{
		margin-top: 15px;
	}
	.x-icon{
		width: 18px;
		height: 18px;
		margin-right: 5px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.x-icon{
		width: 18px;
		height: 18px;
		margin-right: 5px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.dix{
		display: flex;
		align-items: center;
	}
	.dixx{
		display: flex;
		align-items: center;
		margin-top: 10px;
	}
</style>