<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<scroll-view class="orderForm" scroll-y="true">
		<view class="tops">

		</view>
		<view class="orderForm-h">
			<view class="txt" v-for="(item,index) in tag" :key="index" @click="tagBtn(index)">
				<text class="txt-a" :class='{active:tagIndex===index}'>{{item}}</text>
			</view>
		</view>
		<view class="ding-h">

		</view>
		<view class="order-box" v-for="(item,index) in orders" :key="item.id" v-if="tagIndex===0">
			<view class="orderForm-b" >
				<view class="orderForm-b-t">
					<text>订单号:{{item.orderId}}</text> <text class="blues" v-if="item.status===1">进行中</text>
					<text class="greens" v-if="item.status===2">已完成</text>
					<text class="greensa" v-if="item.status===3">已退款</text>
					<text class="reds" v-if="item.status===0">未支付</text>
			
				</view>
				<view class="orderForm-b-b">
					<img class="b-b-i" src="https://www.jiubaotongxue.love/image/demo91.png" alt="" />
					<view class="b-b-r">
						<view class="b-b-r-t">
							<text class="maxs">{{item.networkName}}</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName!='未查询到该商品'">
							{{item.goodsName}}<text>X1</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName==='未查询到该商品'">
							不限时套餐<text>X1</text>
						</view>
						<view class="b-b-r-b">
							{{item.orderTime}}
						</view>
						
						<view class="b-b-r-cs" v-if="item.deviceId!=null">
							{{item.deviceId ? item.deviceId :''}}
						</view>
					</view>
				</view>
				<view class="orderForm-b-m">
					<text class="blacsa">原价￥ <text class="bla">{{item.amount}}</text> </text> <text class="blu">实付款￥<text
							class="blues">{{item.amount}}</text> </text>
					<view class="btns" v-if="item.status===1">
						稍后开通
					</view>
					<view class="btnas" v-if="item.status===2">
			
					</view>
					<view class="btnst" v-if="item.status===3">
						<!-- 退款成功 -->
					</view>
				<!-- 	<view class="btnsc" v-if="item.status===0" @click="openClose">
						查看原因
					</view> -->
				</view>
			</view>
		</view>
		<view class="order-box" v-for="(item,index) in orders" :key="item.id" v-if="tagIndex===1">
			<view class="orderForm-b" v-if="item.status===1" >
				<view class="orderForm-b-t">
					<text>订单号:{{item.orderId}}</text> <text class="blues" v-if="item.status===1">进行中</text>
			
			
				</view>
				<view class="orderForm-b-b">
					<img class="b-b-i" src="https://www.jiubaotongxue.love/image/demo91.png" alt="" />
					<view class="b-b-r">
						<view class="b-b-r-t">
							<text class="maxs">{{item.networkName}}</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName!='未查询到该商品'">
							{{item.goodsName}}<text>X1</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName==='未查询到该商品'">
							不限时套餐<text>X1</text>
						</view>
						<view class="b-b-r-b">
							{{item.orderTime}}
						</view>
						<view class="b-b-r-cs" v-if="item.deviceId!=null">
							{{item.deviceId ? item.deviceId :''}}
						</view>
					</view>
				</view>
				<view class="orderForm-b-m">
					<text class="blacsa">原价￥ <text class="bla">{{item.amount}}</text> </text> <text class="blu">实付款￥<text
							class="blues">{{item.amount}}</text> </text>
					<view class="btns" v-if="item.status===1">
						稍后开通
					</view>
				</view>
			</view>
		</view>
		<view class="order-box" v-for="(item,index) in orders" :key="item.id" v-if="tagIndex===2">
			<view class="orderForm-b" v-if="item.status===2" >
				<view class="orderForm-b-t">
					<text>订单号:{{item.orderId}}</text> 
				<text class="greens" v-if="item.status===2">已完成</text>
				</view>
				<view class="orderForm-b-b">
					<img class="b-b-i" src="https://www.jiubaotongxue.love/image/demo91.png" alt="" />
					<view class="b-b-r">
						<view class="b-b-r-t">
							<text class="maxs">{{item.networkName}}</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName!='未查询到该商品'">
							{{item.goodsName}}<text>X1</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName==='未查询到该商品'">
							不限时套餐<text>X1</text>
						</view>
						<view class="b-b-r-b">
							{{item.orderTime}}
						</view>
						<view class="b-b-r-cs" v-if="item.deviceId!=null">
							{{item.deviceId ? item.deviceId :''}}
						</view>
					</view>
				</view>
				<view class="orderForm-b-m">
					<text class="blacsa">原价￥ <text class="bla">{{item.amount}}</text> </text> <text class="blu">实付款￥<text
							class="blues">{{item.amount}}</text> </text>
					<view class="btnas" v-if="item.status===2">
								
					</view>
				</view>
			</view>
		</view>
		<view class="order-box" v-for="(item,index) in orders" :key="item.id" v-if="tagIndex===3">
			<view class="orderForm-b"  v-if="item.status===3">
				<view class="orderForm-b-t">
					<text>订单号:{{item.orderId}}</text>

					<text class="greensa" v-if="item.status===3">已退款</text>
		
			
				</view>
				<view class="orderForm-b-b">
					<img class="b-b-i" src="https://www.jiubaotongxue.love/image/demo91.png" alt="" />
					<view class="b-b-r">
						<view class="b-b-r-t">
							<text class="maxs">{{item.networkName}}</text>
						</view>
					<view class="b-b-r-b" v-if="item.goodsName!='未查询到该商品'">
						{{item.goodsName}}<text>X1</text>
					</view>
					<view class="b-b-r-b" v-if="item.goodsName==='未查询到该商品'">
						不限时套餐<text>X1</text>
					</view>
						<view class="b-b-r-b">
							{{item.orderTime}}
						</view>
						<view class="b-b-r-cs" v-if="item.deviceId!=null">
							{{item.deviceId ? item.deviceId :''}}
						</view>
					</view>
				</view>
				<view class="orderForm-b-m">
					<text class="blacsa">原价￥ <text class="bla">{{item.amount}}</text> </text> <text class="blu">实付款￥<text
							class="blues">{{item.amount}}</text> </text>
					<view class="btnst" v-if="item.status===3">
						<!-- 退款成功 -->
					</view>

				</view>
			</view>
		</view>
		<view class="order-box" v-for="(item,index) in orders" :key="item.id" v-if="tagIndex===4">
			<view class="orderForm-b" v-if="item.status===0">
				<view class="orderForm-b-t">
					<text>订单号:{{item.orderId}}</text> 
					<text class="reds" v-if="item.status===0">未支付</text>
			
				</view>
				<view class="orderForm-b-b">
					<img class="b-b-i" src="https://www.jiubaotongxue.love/image/demo91.png" alt="" />
					<view class="b-b-r">
						<view class="b-b-r-t">
							<text class="maxs">{{item.networkName}}</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName!='未查询到该商品'">
							{{item.goodsName}}<text>X1</text>
						</view>
						<view class="b-b-r-b" v-if="item.goodsName==='未查询到该商品'">
							不限时套餐<text>X1</text>
						</view>
						<view class="b-b-r-b">
							{{item.orderTime}}
						</view>
						<view class="b-b-r-cs" v-if="item.deviceId!=null">
							{{item.deviceId ? item.deviceId :''}}
						</view>
					</view>
				</view>
				<view class="orderForm-b-m">
					<text class="blacsa">原价￥ <text class="bla">{{item.amount}}</text> </text> <text class="blu">实付款￥<text
							class="blues">{{item.amount}}</text> </text>
					
					<!-- <view class="btnsc" v-if="item.status===0" @click="openClose">
						查看原因
					</view> -->
				</view>
			</view>
		</view>

		<view class="ding">

		</view>

	</scroll-view>
	<view class="thishiWindow" v-if="shibai===1">
		<view class="tishi">
			<img class="pori" src="https://www.jiubaotongxue.love/image/demo41.png" alt="" @click="closeShibai" />
			<img class="tishi-Img" src="https://www.jiubaotongxue.love/image/demo40.png" alt="" />
			<text class="tishiTxt">失败原因</text>
			<text class="tishiHuidu">很抱歉，由于您的信息有误，有部分退款失败,请您确认信息并重新提交</text>
		</view>
	</view>
	<view class="hujiao" v-if="hujiao===1">
		<view class="windows-hujiao">
			<img class="i" src="https://www.jiubaotongxue.love/image/demo76.png" alt="" />
			<view class="ke">
				客服电话
			</view>
			<view class="ke1">
				176-0532-6897
			</view>
			<view class="ke3">
				<button class="lefts" @tap="hujiao=0">取消</button><button class="rights" @click="dianhua">立即呼叫</button>
			</view>
			<view class="ke4">
				为了保证服务质量，您的通话可能会被录音
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const tagIndex = ref(0)
	import {
		order
	} from '../../stor/order/order.js'
	import {
		storeToRefs
	} from 'pinia';
	const o = order()
	const {
		orders
	} = storeToRefs(o)
	const tag = ref(['全部', '进行中', '已完成', '已退款', '未支付'])
	const demos = ref([])
	const titles = ref('洗车订单')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const shibai = ref(0)
	const hujiao = ref(0)
	o.getOrders()

	const closeShibai = () => {
		shibai.value = 0
	}
	const openClose = () => {
		shibai.value = 1
	}
	const tagBtn = (index) => {
		tagIndex.value = index
	}
	const dianhua = ()=>{
		uni.makePhoneCall({
			phoneNumber:'17605326897'
		})
	}
</script>

<style lang="scss">
	.orderForm {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f2f2f2;

		.orderForm-h {
			margin-top: 160rpx;
			position: fixed;
			top: 0rpx;
			width: 100%;
			height: 84rpx;
			background-color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;

			.txt {
				width: 25%;
				height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				margin-right: 20rpx;
				line-height: 84rpx;

				.txt-a {
					box-sizing: border-box;
					padding-top: 5rpx;
					height: 80rpx;
					display: inline-block;
				}

			}

			.active {
				border-bottom: 8rpx solid #1378F7;
				color: #1378F7;
			}
		}

		.ding-h {
			width: 100%;
			height: 250rpx;
		}
		.order-box{
			width: 94%;
			position: relative;
			// height: 500rpx;
			background-color: white;
			margin-top: 20rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.orderForm-b {
				width: 100%;
				position: relative;
			
				.orderForm-b-t {
					width: 92%;
					height: 80rpx;
					line-height: 80rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					box-sizing: border-box;
					padding-left: 5rpx;
					padding-right: 5rpx;
					border-bottom: 2rpx solid #eee;
					color: #666;
			
					.blues {
						color: #17bd69;
					}
			
					.greens {
						color: #2878ff;
					}
			
					.reds {
						color: #d9001b;
					}
				}
			
				.orderForm-b-b {
					width: 98%;
					height: 240rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					display: flex;
					justify-content: center;
					align-items: center;
			
					.b-b-i {
						width: 180rpx;
						height: 180rpx;
					}
			
					.b-b-r {
						width: 65%;
						height: 180rpx;
						box-sizing: border-box;
						padding-left: 25rpx;
			
						.b-b-r-t {
							width: 100%;
							height: 50rpx;
							font-size: 26rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
			
							.maxs {
								font-size: 34rpx;
								font-weight: 700;
							}
						}
			
						.b-b-r-b {
							width: 100%;
							height: 50rpx;
							font-size: 26rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #777;
						}
			
						.b-b-r-cs {
						max-width: 260rpx;
							// height: 60rpx;
							font-size: 22rpx;
							color: #169bd5;
							border: 1rpx solid #169bd5;
							text-align: center;
							border-radius: 10rpx 10rpx 10rpx 10rpx;
						}
					}
				}
			
				.orderForm-b-m {
					width: 92%;
					height: 80rpx;
					line-height: 80rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					box-sizing: border-box;
					padding-left: 5rpx;
					padding-right: 5rpx;
					border-top: 2rpx solid #eee;
			
					.blacsa {
						.bla {
							font-size: 30rpx;
						}
					}
			
					.blu {
						color: #444;
			
						.blues {
							font-size: 30rpx;
							color: #FF7733;
						}
					}
			
					.btns {
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #ccc;
						// background-color: #d9001b;
						// color: white;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						margin-top: 10rpx;
					}
			
					.btnas {
						width: 150rpx;
						height: 60rpx;
					}
			
					.btnst {
						width: 150rpx;
						height: 60rpx;
					}
			
					.btnsc {
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #2878ff;
						color: #2878ff;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	

		.ding {
			width: 100%;
			height: 100rpx;
			// background-color: #f2f2f2;
		}


	}

	.thishiWindow {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;

		.tishi {
			width: 96%;
			height: 430rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.pori {
				position: absolute;
				width: 32rpx;
				height: 32rpx;
				right: 30rpx;
				top: 30rpx;
			}

			.tishi-Img {
				display: block;
				width: 116rpx;
				height: 126rpx;
				margin-top: 40rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}

			.tishiTxt {
				display: block;
				font-size: 34rpx;
				margin-top: 40rpx;
				width: 100%;
				text-align: center;
			}

			.tishiHuidu {
				display: block;
				font-size: 26rpx;
				margin-top: 24rpx;
				width: 100%;
				// text-align: center;
				color: #666;
				box-sizing: border-box;
				padding-left: 40rpx;
				padding-right: 40rpx;
			}

		}
	}
	.hujiao {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
	
		.windows-hujiao {
			width: 630rpx;
			height: 614rpx;
			background: #FFFFFF;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
	
			.i {
				width: 320rpx;
				height: 258rpx;
				margin-top: 40rpx;
				transform: translateX(-50%);
				margin-left: 50%;
			}
	
			.ke {
				width: 100%;
				text-align: center;
				height: 36rpx;
				font-size: 26rpx;
				color: #1276F7;
				line-height: 36rpx;
				margin-top: 24rpx;
			}
	
			.ke1 {
				width: 100%;
				text-align: center;
				height: 66rpx;
				font-weight: 600;
				font-size: 48rpx;
				color: #222222;
				line-height: 66rpx;
				margin-top: 16rpx;
			}
	
			.ke3 {
				width: 90%;
				height: 68rpx;
				transform: translateX(-50%);
				margin-left: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;
	
				.lefts {
					width: 266rpx;
					height: 68rpx;
					font-size: 26rpx;
					background-color: #ffffff;
					border: 1rpx solid #eee;
				}
	
				.rights {
					width: 266rpx;
					height: 68rpx;
					font-size: 26rpx;
					background: linear-gradient(270deg, #25A5FF 0%, #0177FF 100%);
					color: white;
				}
			}
	
			.ke4 {
				width: 100%;
				height: 32rpx;
				font-size: 22rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>