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

<template>
	<view class="content">
		<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="index == gindex"></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"
				@click="this.$tab.navigateTo('/pages/tabBar/order/orderInfo?id=' + item.id)">
				<!-- 	<view class="d-y-top">搭电</view> -->
				<view class="t-right">
					<view class="bq" v-if="item.orderStatus == 0">
						<text>待支付</text>
					</view>
					<view class="" v-if="item.orderStatus == 1">
						<u-button type="primary" size="mini" text="去使用"
							@tap.stop="showCode(item.accessCode)"></u-button>
					</view>
					<view class="bq2" v-if="item.orderStatus == 2">
						<u-button type="primary" size="mini" text="去评价" @tap.stop="goComment(item.id,item.goodsTitle)"
							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 == 5">
						<text>已退款</text>
					</view>
					<view class="bq2" v-if="item.orderStatus == 6">
						<text>退款申请</text>
					</view>
				</view>
				<view class="d-left">
					<text class="margin-right">{{item.goodsTitle}}</text> <text
						v-if="item.goodNum">{{ '数量' + item.goodNum || '' }}</text>
				</view>
				<view class="t-left">
					<text>订单编号：{{item.orderNo}}</text>
				</view>
				<view class="x-left">
					<view 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="申请退款"
								@tap.stop="dialogToggle(item.id)"></u-button>
						</view>
					</view>
				</view>

			</view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="dialog" cancelText="关闭" confirmText="同意" title="通知" content="您是否需要申请退款此订单？"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>

			<u-toast ref="uToast"></u-toast>


			<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>
			<uni-popup ref="alertDialog1" type="dialog">
							<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您有已完成的订单未评价，请为我们的服务做评价!" @confirm="dialogConfirm1"
								@close="dialogClose1"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import drawQrcode from 'weapp-qrcode';
	export default {
		data() {
			return {
				gindex: 0,
				msgType: 'success',
				title: '',
				deleteid: '',
				arrtap: [{
						text: '全部',
						id: ''
					},

					{
						text: '待使用',
						id: 1
					},
					{
						text: '待评价',
						id: 2
					},
					{
						text: '已完成',
						id: 3
					},
					{
						text: '退款申请',
						id: 6
					},
					{
						text: '已退款',
						id: 5
					},
				],
				id: '',
				arrbox: [

				],
				params: {
					pageSize: 10,
					pageNum: 1,
				},
				codeShow: false,
				accessCode: ''
			}
		},
		onShow() {
			this.arrbox = []
			this.getorderlist()
			this.tipopup()
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.status = 'loading';
				this.isLoadMore = true
				this.params.pageNum++
				this.getorderlist()
			}
		},

		methods: {
			async tipopup(){
				const res = await this.$request({
					method: 'get',
					url: '/orderApi/getNoCommentOrder',
					
				})
				console.log(res);
				if(res.data > 0){
					this.$refs.alertDialog1.open()
				}
			},
				dialogConfirm1() {
							console.log('点击确认')
						},
						dialogClose1(){
							console.log('点击确认')
						},
				
			async dialogConfirm() {
				console.log(123);
				console.log('点击确认')
				const res = await this.$request({
					method: 'post',
					url: '/refundRequest',
					params: {
						orderId: this.deleteid
					}
				})
				// console.log(res);
				this.$refs.uToast.show({
					message: res.msg,
					position: "center",
					type: 'default'
				})
				this.params.pageNum = 1
				this.params.pageSize = 10
				this.id = ''
				this.arrbox = []
				this.getorderlist()
				// this.$refs.message.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogToggle(id) {
				this.deleteid = id
				this.$refs.alertDialog.open()
			},
			async getorderlist() {
				const res = await this.$request({
					url: '/orderApi/orderList',
					data: {
						status: this.id,
						title: this.title,
						pageSize: this.params.pageSize,
						pageNum: this.params.pageNum,
					}
				})
				console.log('list', res);

				this.arrbox = this.arrbox.concat(res.rows);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.status = 'nomore';
					this.isLoadMore = true
				} else {
					this.isLoadMore = false
				}

				this.loadingShow = false

				// if (res.code = 200) {
				// 	this.arrbox = res.rows
				// }

			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			gettitle() {
				this.getorderlist()
			},
			getindex(index, id) {
				this.gindex = index
				this.id = id
				this.arrbox = []
				this.params.pageNum = 1
				this.params.pageSize = 10
				this.getorderlist()
			},

			closeCodePop() {
				this.codeShow = false
			},
			showCode(accessCode) {
				this.codeShow = true
				this.accessCode = accessCode
				drawQrcode({
					width: 100,
					height: 100,
					canvasId: 'myQrcode',
					text: accessCode
				})
			},
			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;

	}

	.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: 16%;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}

	.gang {
		width: 80%;
		height: 5px;
		margin: 0 auto;
		border-radius: 12px;
		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;
		align-items: center;
		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>