<template>
	<view class="content">
		<view class="c-top">
			<view class="ding">
			<view class="c-zuo" @click="getback()">
				<uni-icons type="left" color="#ffffff" size="18"></uni-icons>
			</view>
			<view class="c-title">我的订单</view>
			<view class="c-you"></view>
			</view>
			<!-- 底部 -->
			<view class="d-bai" v-if="orderStatus == '1'">待使用</view>
			<view class="d-bai" v-if="orderStatus == '2'">待评价</view>
			<view class="d-bai" v-if="orderStatus == '3'">已评价</view>
			<view class="d-bai" v-if="orderStatus == '4'">退款中</view>
			<view class="d-bai" v-if="orderStatus == '5'">已退款</view>
			<view class="x-bai">请到订单预约店铺进行车辆检测</view>
			<view class="cont-box">
				<view class="b-top" v-if="orderdetails.orderStatus == '1'">
					<view class="rwm">
						<canvas style="width:125px; height: 125px;" canvas-id="myQrcode"></canvas>
					</view>
					<view class="mzi">核销码：{{orderdetails.accessCode}}</view>
				</view>
				<view class="b-top" v-if="orderdetails.orderStatus == '2'">
					<!-- 星星 文本框 -->
					<view style="display: flex; align-items: ;">
						<view class="b-hui">请留下您的评价</view>
						<uni-rate v-model="rateValue" @change="postxing" />
					</view>
						
					
						<u--textarea  v-model="reviewStr" @blur="tijiao()" @confirm="tijiao()" placeholder="请输入您的评价" border="none"></u--textarea>
				</view>
				<view class="b-top" v-if="orderdetails.orderStatus == '3'">
					<!-- 已评价  -->
					<view style="display: flex; align-items: ;">
						<view class="b-hui">请留下您的评价</view>
						<uni-rate v-model="orderdetails.commentStar"  />
					</view>
						<u--textarea  v-model="orderdetails.commentDesc" placeholder="该用户暂无评价" border="none"></u--textarea>
				</view>
				<view class="b-top" v-if="orderdetails.orderStatus == '4'">
						<view class="b-title">退款中</view>
				</view>
				<view class="b-top" v-if="orderdetails.orderStatus == '5'">
						<view class="b-title">已退款</view>
				</view>
				
				<view class="b-box">
					<view class="b-title">{{orderdetails.partnerName}}</view>
					<view class="b-hui">{{orderdetails.partnerAddress}}</view>
					<view class="on-input">
						<view class="b-hui">下单时间</view>
						<view class="b-hei">{{orderdetails.payTime}}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">商家手机号</view>
						<view class="b-hei">{{orderdetails.contactNumber}}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">营业时间</view>
						<view class="b-hei">{{orderdetails.workTimeStr}}</view>
					</view>
				</view>
				<view class="b-box">
					<view class="b-title">订单信息</view>
					
					<view class="on-input">
						<view class="b-hui">订单号</view>
						<view class="b-hei">{{orderdetails.orderNo}}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">检测商品</view>
						<view class="b-hei">{{orderdetails.goodsTitle}}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">价格</view>
						<view class="b-hei">{{orderdetails.goodsPrice/100}}</view>
					</view>
					<!-- <view class="on-input">
						<view class="b-hui">下单时间</view>
						<view class="b-hei">2023-07-20 12:00</view>
					</view> -->
					<view class="on-input">
						<view class="b-hui">优惠券折扣</view>
						<view class="b-hei">-{{orderdetails.couponDiscount?orderdetails.couponDiscount/100:0 }}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">折扣</view>
						<view class="b-hei">-{{orderdetails.reduceMoney?orderdetails.reduceMoney/100:0 }}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">使用余额</view>
						<view class="b-hei">-{{orderdetails.balance/100 }}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">微信支付</view>
						<view class="ju">￥{{orderdetails.payMoney/100}}</view>
					</view>
					<view class="on-input">
						<view class="b-hui">合计支付</view>
						<view class="ju">￥{{orderdetails.payMoney /100 + orderdetails.balance /100}}</view>
					</view>
				</view>
			
			</view>
			<!-- <view class="anniu">
				<text>提交</text>
			</view> -->
				<view style="width: 100%; height: 55px; margin-top: 10px;"></view>
			<!-- 底部 -->
			
		</view>
		<view class="v-bottom">
			<view class="b-zuo" @click="gettel()">
				<view class="lanquan">
					<uni-icons type="phone-filled" color="#0D2E8D" size="24"></uni-icons>
				</view>
				<view class="">联系商家</view>
			</view>
			<view class="anniu" @click="Daohang()">
				<view class="baiqiu">
					<uni-icons type="paperplane-filled" color="#0D2E8D" size="14"></uni-icons>
				</view>
				<view class="">到这里去</view>
			</view>
		</view>
	</view>
</template>

<script>
	import drawQrcode from 'weapp-qrcode'
	import request from '../../utils/request';
	import config from '@/config';
	export default {
		data() {
			return {
				orderId:'',
				orderdetails:{},
				orderStatus:2,
				intervalId: null,
				reviewStr:"",
				rateValue:5
			}
		},
		onLoad(opion) {
			this.orderId = opion.id
			this.getindex()
			this.intervalId = setInterval(() => {
			console.log("我在执行方法");
			this.getindex()
			}, 2000);
		// 	uni.showLoading()
		// 	this.intervalId = setInterval(() => {
		// 	uni.hideLoading()
			
		// 	    }, 3000);
		
			
		},
		onShow() {
			
		},
		  watch: {
		   orderStatus(newVal, oldVal) {
		      // 监听message数据的变化，并执行相应的方法
		      console.log('message发生变化', newVal, oldVal);
			  if(newVal == 2){
				  uni.showToast({
				  	title:"核销成功",
				  	
				  })
			  }
		     
		    }
		  },
		methods:{
				async getindex(){
					let res = await request({
						url:'/appInspection/order/orderDetail?orderId='+this.orderId,
						method: 'get',
					})
					console.log(res);
					this.orderdetails = res.data
					this.orderStatus =  res.data.orderStatus
					this.orderdetails.payMoney = res.data.payMoney
					this.orderdetails.balance = res.data.balance 
					this.showCode()
				},
				async tijiao(){
					if(this.reviewStr == ""){
							uni.showToast({
								title:'评论不能为空',
								icon:'none'
							})
						return
					}
					let data = {
						orderId:this.orderId,
						starLevel:this.rateValue,
						reviewStr:this.reviewStr
					}
					let res = await request({
						url:'/appInspection/order/reviewOrder',
						method: 'post',
						params:data
					})
					console.log(res);
					if(res.code == 200){
							uni.showToast({
								title:"发布成功"
								})
							}
							
					
				},
				showCode() {
					drawQrcode({
						width: 125,
						height: 125,
						canvasId: 'myQrcode',
						text:this.orderdetails.accessCode
					})
				},
				gettel(){
					uni.makePhoneCall({
						phoneNumber: this.orderdetails.contactNumber
					});
				},
				Daohang(){
				console.log('触发',this.orderdetails);
				uni.openLocation({
					latitude: parseFloat(this.orderdetails.latitude) ,
					longitude: parseFloat(this.orderdetails.longitude),
					success: function () {
						console.log('success');
					},
					fail:function (res) {
						console.log(res);
					}
				});
				
				},
				getback(){
				 clearInterval(this.intervalId);
				uni.navigateBack()
					
				},
				postxing(e) {
					console.log(this.rateValue);
							console.log('rate发生改变:' + JSON.stringify(e))
							
							// console.log(this.rateValue);
						},
				
		},
		
		  beforeRouteLeave(to, from, next) {
		    // 在离开当前页面时清除定时器
		    clearInterval(this.intervalId);
		    next();
		  },
		
			
	}
</script>

<style scoped lang="scss">
	.content {
			width: 100%;
			height: calc(130vh);
			background-color: #F6F6F6;
			box-sizing: border-box;
	
		}
	.c-top{
			width: 100%;
			height: 229px;
			box-sizing: border-box;
			padding: 15px;
			padding-top: 45px;
			background: #0D2E8D;
		}
		.ding{
				width: 100%;
				display: flex;
				justify-content: space-between;
		}
		.c-title{
			font-size: 18px;
			font-weight: bold;
			color: white;
			width: 80%;
			
			text-align: center;
			
		}
		.c-zuo{
			width: 10%;
			height: 100%;
		}
		.c-you{
			width: 10%;
			height: 100%;
		}
		.d-bai{
			width: 100%;
			font-size: 20px;
			font-family: Source Han Sans CN-Bold, Source Han Sans CN;
			font-weight: bold;
			color: #FFFFFF;
			margin-top: 30px;
			margin-bottom: 15px;
		}
		.x-bai{
			width: 100%;
			font-size: 15px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			margin-bottom: 20px;
		}
		.cont-box{
			width: 98%;
			margin: 0 auto;
			background-color: white;
			border-radius: 8px;
			box-sizing: border-box;
			padding: 15px;
			
		}
		.b-top{
			width: 100%;
			border-bottom: 1px solid #DDDDDD;
			box-sizing: border-box;
			padding: 10px;
		}
		.b-box{
			width: 100%;
			border-bottom: 1px solid #DDDDDD;
			box-sizing: border-box;
			padding: 20px 0px;
		}
		.rwm{
			width: 125px;
			height: 125px;
			background: #D9D9D9;
			margin: 40px auto;
		}
		.mzi{
			width: 100%;
			text-align: center;
			font-size: 16px;
			font-weight: 400;
			color: #333333;
		}
		.on-input{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px auto;
		}
		.v-bottom{
			position: fixed;
			bottom: 0px ;
			z-index: 99;
			height: 60px;
			background: #FFFFFF;
			width: 100%;
			box-sizing: border-box;
			padding: 10px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
		}
		.b-zuo{
			width: 40%;
			height: 100%;
			font-size: 14px;
			font-weight: 400;
			color: #0D2E8D;
			text-align: center;
		}
		.anniu{
			background: #0D2E8D;
			width: 60%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 16px;
			font-weight: 400;
			color: #FFFFFF;
			border-radius: 4px ;
		}
		.b-title{
			font-size: 16px;
			font-weight: bold;
			color: #333333;
			margin-bottom: 10px;
		}
		.b-hui{
			font-size: 15px;
			font-weight: 400;
			color: #999999;
			
		}
		.b-hei{
			font-size: 15px;
			font-weight: 400;
			color: #333333;
		}
		.ju{
			font-size: 15px;
			font-weight: 400;
			color: #FF571A;
		}
		.lanquan{
			width: 25px;
			height: 25px;
			border-radius: 50%;
			border: 2px solid #0D2E8D;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
			margin: 0 auto;
		}
		.baiqiu{
			width: 16px;
			height: 16px;
			background: #FFFFFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 5px;
		}
</style>