<!-- 历史订单列表-->

<template>
	<view class="content">
		<view class="c-top">
			<view class="c-zuo" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">我的订单</view>
			<view class="c-you"></view>
		</view>
		<view class="top-icon">
			<!-- 	<view class="h-text" @click="getback()">返回</view> -->
			<view class="s-input">
				<uni-icons type="search" color=" #999999" size="16"></uni-icons>
				<input type="text" placeholder="搜索我的订单" v-model="title">
			</view>
			<view class="h-text" @click="gettitle()">搜索</view>
		</view>
		<view class="top-tap">
			<view class="tap-box" :class="{'cc' : gindex == index }" v-for="(item,index) in arrtap" :key="index"
				@click="getindex(index,item.id)">
				<view style="margin-bottom: 4px;">{{item.text}}</view>
				<view class="gang" v-if="gindex == index"></view>
			</view>
		</view>
		<view class="dil">
			<view class="ques" v-if="arrbox== '' ">
				<u-empty mode="list" textSize="32rpx" iconSize="160rpx">
				</u-empty>
			</view>

			<view class="d-box" v-for="(item,index) in arrbox " :key="index" >
				<!-- 	<view class="d-y-top">搭电</view> -->
				<view class="t-right" @click="getdetails(item.id)">
					<view class="bq" v-if="item.orderStatus == 0">
						<text>待支付</text>
					</view>
					<view class="" v-if="item.orderStatus == 1">
						<u-button  color="#0D2E8D"  size="mini" text="去使用"></u-button>
					</view>
					<view class="bq2" v-if="item.orderStatus == 2">
						<u-button color="#0D2E8D" size="mini" text="去评价"
							v-if="!item.commentDesc"></u-button>
						<text v-else>已评价</text>
					</view>
					<view class=" bq2" v-if="item.orderStatus == 3">
						<text>已完成</text>
					</view>
					<view class="bq2" v-if="item.orderStatus == 4">
						<text>退款中</text>
					</view>
					<view class="bq2" v-if="item.orderStatus == 6">
						<text>退款审核</text>
					</view>
					<view class="bq2" v-if="item.orderStatus == 5">
						<text>已退款</text>
					</view>
					
				</view>
				<view class="d-left" @click="getdetails(item.id)">
					<text>{{item.goodsTitle}}</text>
				</view>
				<view class="t-left" @click="getdetails(item.id)">
					<text>订单编号：{{item.orderNo}}</text>
				</view>
				<view class="x-left">
					<view @click="getdetails(item.id)" class="">下单时间：{{item.orderTime}}</view>
					<view style="display: flex;">
						<view class="hong" style="margin-right: 5px;">￥{{(item.payMoney+item.balance) / 100}}</view>
		<!-- 				<view class="" v-if="item.orderStatus == 1">
							<u-button type="warning" size="mini"  text="退 款" @click="dialogToggle(item.id)"></u-button>
						</view> -->
					</view>
				</view>

			</view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您是否确认退款"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>

			<u-popup :show="codeShow" :round="10" mode="bottom" @close="closeCodePop" :closeable='true'>
				<view class="codePop flex-col align-center">
					<text class="text-bold text-lg margin-top margin-bottom">电子凭证详情</text>
					<canvas style="width:100px; height: 100px;" canvas-id="myQrcode"></canvas>
					<text class="margin-top margin-bottom">{{ formatAccessCode(accessCode) }}</text>
				</view>
			</u-popup>
		</view>
		<view style="width: 100%; height: 50px;"></view>
		
	</view>
</template>

<script>
	import request from '../../utils/request';
	import config from '@/config';
	import tabBar from'../../components/detection/tabBar.vue'
	// import drawQrcode from 'weapp-qrcode';
	export default {
		data() {
			return {
				msg:'2',
				gindex: 0,
				title: '',
				deleteid: '',
				arrtap: [{
						text: '全部',
						id: ''
					},
					// {
					// 	text: '待支付',
					// 	id: 0
					// },
					{
						text: '待使用',
						id: 1
					},
					{
						text: '待评价',
						id: 2
					},
					{
						text: '已退款',
						id: 5
					},
				],
				id: '',
				arrbox: [

				],
				codeShow: false,
				accessCode: '',
				pageNum: 1,//第几页
				pageSize: 20,//一页多少张
				totalPages: 0,//总数
			}
		},
		onLoad(option) {
			this.id = option.id
			if(option.id == 5){
				this.gindex = 3
			}else{
				this.gindex = option.id
			}
			
			
		},
		onShow(){
			this.arrbox =[]
			this.getorderlist()
		},
	
		onReachBottom() {
					console.log(111)
					if (this.pageNum >= this.totalPages) {
						uni.showToast({
							title: '没有下一页数据',
							icon: 'none'
						})
		
					} else {
						this.pageNum++
						console.log(222)
						this.getorderlist()
					}
				},
		
		components:{
			tabBar,
		},
		methods: {
			async dialogConfirm() {
				console.log('点击确认')
				const res = await request({
					method: 'post',
					url: '/refundRequest',
					params: {
						orderId: this.deleteid
					}
				})
				console.log(res);
				uni.showToast({
					title: res.msg
				})
				this.arrbox=[]
				this.getorderlist()
				this.$refs.message.open()

			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			dialogToggle(id) {
				this.deleteid = id
				this.$refs.alertDialog.open()
			},
			async getorderlist() {
				const res = await request({
					url: '/appInspection/order/orderList',
					data: {
						status: this.id,
						title: this.title,
						pageSize:this.pageSize,
						pageNum:this.pageNum
					}
				})
				console.log('list', res);
				
					if (this.pageSize != 1) {
							this.arrbox = this.arrbox.concat(res.rows)
						}else{
							this.arrbox = res.rows
						}
					let total =  res.total
					this.totalPages = Math.ceil(total / this.pageSize);
			

			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			getdetails(id){
				uni.navigateTo({
					url:'/pages/detection/details-order?id='+ id
				})
			},
			gettitle() {
				this.arrbox = []
				this.getorderlist()
			},
			getindex(index, id) {
				this.arrbox=[]
				this.pageNum= 1,//第几页
				this.pageSize= 20,//一页多少
				this.gindex = index
				
				this.id = id
				this.getorderlist()
				console.log(this.gindex);
				console.log(this.id);
			},

			closeCodePop() {
				this.codeShow = false
			},
		
			formatAccessCode(accessCode) {
				return accessCode ? accessCode.match(/.{1,4}/g).join('-') : 'Error';
			},
			// 去评论
			goComment(orderId, goodsTitle) {
				uni.navigateTo({
					url: `/pages/tabBar/order/comment?orderId=${orderId}&goodsTitle=${goodsTitle}`
				})
			}

		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;

	}
.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 45px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}
	.c-title{
		font-size: 18px;
		font-weight: bold
	}
	.c-zuo{
		width: 10%;
		height: 100%;
	}
	.c-you{
		width: 10%;
		height: 100%;
	}
	.top-icon {
		box-sizing: border-box;
		width: 100%;

		padding: 5px 14px;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.dil {
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 15px 12px;
	}

	.h-text {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}

	.s-input {
		width: 90%;
		height: 30px;
		background: #F3F3F3;
		border-radius: 50px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0px 10px;

		input {
			margin-left: 5px;
			width: 80%;
			font-size: 14px;
			color: #999999;
		}
	}

	.top-tap {
		width: 100%;
		background: white;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-top: 5px;
	}

	.tap-box {
		width: 25%;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}

	.gang {
		width: 80%;
		height: 5px;
		margin: 0 auto;
		border-radius: 12px;
		background: #0D2E8D;
		// background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
	}

	.d-box {
		width: 100%;
		// height: 100px;
		background: white;
		border-radius: 10px;
		margin-bottom: 15px;
		box-sizing: border-box;
		padding: 8px 15px;
		position: relative;
		overflow: hidden;
	}

	.d-y-top {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 40px;
		height: 20px;
		border-radius: 0px 0px 6px 0px;
		background-color: #339DFF;
		color: white;
		font-size: 12px;
		text-align: center;
	}

	.t-right {
		width: 100%;
		display: flex;
		justify-content: flex-end;

		.bq {
			width: 55px;
			height: 20px;
			background: #FFD7D7;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #FF4C4C;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bq2 {
			width: 55px;
			height: 20px;
			background: #CDE2FF;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #3289FF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.d-left {
		margin-left: 10px;
		display: flex;
		font-size: 16px;
		font-weight: bold;
		color: #666666;
		margin-bottom: 10px;
	}

	.t-left {
		margin-left: 10px;
		display: flex;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-bottom: 5px;
	}

	.x-left {
		margin-left: 10px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}

	.cc {
		font-weight: bold;
	}

	.hong {
		font-size: 16px;
		font-weight: 400;
		color: #F85021;
	}

	.ques {
		margin: 0px auto;
		margin-top: 40px;
		width: 80%;

		image {
			width: 100%;
		}
	}

	.codePop {
		height: 400rpx;
	}
</style>