<template>
	<up-navbar
	  title="预约记录"
	  bgColor="#00aa7f"
	  :autoBack="true"
	  leftIconColor="#fff"
	  titleStyle="color:#fff"
	  :placeholder="true"
	/>
	<view class="content">
		<view class="tabct">
			<up-tabs
			  :list="statelist" 
			  :scrollable="false"
			  @click="tabshand"
			  lineColor="#00aa00"
			/>
		</view>
		<view class="lisct">
			<view v-for="n in list" :key="n.orderNo" class="list">
				<view class="zoddu">
					<view>
							<view>换电站：</view>
							<view>{{n.stationName}}</view>
						</view>
						<view>
							<view>车牌号：</view>
							<view>{{n.plateNum}}</view>
						</view>
						<view>
							<view>手机号：</view>
							<view>{{n.phone}}</view>
						</view>
						<view>
							<view>预约时间：</view>
							<view style="font-size: 30rpx;">{{ytime(n.swapDay,n.swapDuration)}}</view>
						</view>
					</view>
					<view v-if="n.status == 1" @tap="cancel(n.pkId)" class="qxyy" style="background: #00aa00;">取消预约</view>
					<view v-else-if="n.status == 2" class="qxyy">已使用</view>
					<view v-else-if="n.status == 3" class="qxyy">已取消</view>
					<view v-else class="qxyy">已过期</view>
				</view>
			</view>
		</view>
		<up-empty v-if="list.length == 0" mode="list" text="暂无预约记录" />
		<up-loadmore v-else :status="status" color="#c0c4cc" lineColor="#c0c4cc" />
</template>

<script setup lang="ts">
	import { ref,reactive } from 'vue'
	import { getyylist,cancelrese } from '@/utils/service'
	import { onShow,onReachBottom } from '@dcloudio/uni-app'
	
	onShow(() => {
		pageNo.value = 1
		list.value.splice(0)
		getlist()
	})

	
	//预约状态
	const statelist = reactive([  
	    { name: '全部', status:'1'}, 
		{ name: '已使用', status:'2' },
	    { name: '已取消', status:'3' },  
	    { name: '已过期', status:'4'}
	])
	
	let status = ref('nomore')  //loadmore loading
	
	let list = ref<any[]>([])
	let pageNo = ref(1)
	let stanum = ref('')
	//点击tabs
	function tabshand(n:any){
		pageNo.value = 1
		list.value.splice(0)
		stanum.value = n.status
		getlist()
	}
	function getlist() {
		let qsobj = {
			ucode:uni.getStorageSync('wxuid'),
			pageSize:30,
			pageNo:pageNo.value
		}
		if(stanum.value){
			qsobj = Object.assign(qsobj,{status:stanum.value})
		}
		status.value = 'loading'
		getyylist(qsobj).then((rps:any) => {
			if(rps.data.total > 0){
				list.value = [...list.value,...rps.data.records] 
				if(list.value.length == rps.data.total){
					status.value = 'nomore'
				}else{
					status.value = 'loadmore'
					pageNo.value++
				}
			}
		})
	}

	
	function cancel(id:string) {
		uni.showModal({
			title: '温馨提示',
			content: '确定取消?',
			success(res){
				if(res.confirm){
					cancelrese(id).then(() => {
						uni.showToast({
							title: '取消成功',
							duration: 2000
						})
						setTimeout(()=>{
							getlist()
						},2000)
					})
				}
			}
		})
	}
	
	//预约时间
	function ytime(n:string,v?:string){
	    return `${n.substring(0,4)}年${n.substring(4,6)}月${n.substring(6,8)}日 ${v?v:''}`
	}
	
	onReachBottom(() => {
		if(status.value == 'loadmore'){
			getlist()
		}
	})
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
	.content{
		padding-bottom: 30rpx;
		.tabct{
			position: fixed;
			width: 100%;
			box-sizing: border-box;
			padding-bottom: 10rpx;
			background: #fff;
		}
		.lisct{
			padding-top: 130rpx;
			.list{
				margin:0 25rpx 40rpx;
				//padding: 25rpx;
				border-radius: 20rpx;
				box-shadow: 0 0 10px 2px rgba(190, 190, 190, 0.5);
				background: #fff;
				.zoddu{
					padding: 25rpx;
					//margin-bottom: 30rpx;
					//padding-top: 20rpx;
					//border-top: 1px dashed #ccc;
					>view{
						display: flex;
						padding-bottom: 20rpx;
						justify-content: space-between;
						>view:last-child{
							color: #7a7a7a;
						}
					}
					>view:last-child{
						padding-bottom: 0;
					}
				}
				.qxyy{
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 0 0 20rpx 20rpx;
					color: #fff;
					text-align: center;
					background: #ccc;
				}
			}
		}
	}
	.hdbzcont{
		box-sizing: border-box;
		width: 85vw;
		padding: 30rpx;
		background: #fff;
	}
</style>