<template>
	<view class="">
		<u-sticky bgColor="#fff">
			<!-- :itemStyle="{background:'#fff',height:'44px'}" -->
			<u-tabs :list="list2" lineColor="#FED000" :scrollable="false" @click="onclick"></u-tabs>
		</u-sticky>
		<view class="group">
			<view class="item" v-for="(item,idx) in showlist" :key="idx" @click.stop="ondetail(item.id,item.orderinfo.product_id)">
				<view class="top flexA">
					<view class="left flexA">
						<image src="/static/order.png" mode=""></image>
						<view>订单号：</view>
						<view style="margin: 0 16rpx 0 8rpx">{{item.order_no}}</view>
						<view style="color:#2153D4;" @click.stop="copy(item.order_no)">复制</view>
					</view>
					<view class="right">
						<text v-if="item.status==1">待支付</text>
						<text v-if="item.status==2">待接收</text>
						<text v-if="item.status==3">待确认</text>
						<text v-if="item.status==4">已收货</text>
						<text v-if="item.status==5">平台裁决</text>
						<text v-if="item.status==6">已完成</text>
						<text v-if="item.status==7">交易失败</text>
					</view>
				</view>
				<view class="bot flexA">
					<view class="left flexA">
						<image :src="item.orderinfo.images_preview" mode=""></image>
						<view class="">
							<view class="title">{{item.orderinfo.product_name}}</view>
							<view class="time">{{item.createtime_text}}</view>
							<view class="name">卖方：{{item.orderinfo.seller_name}}</view>
						</view>
					</view>
					<view class="right">
						<text style="font-size: 20rpx;">¥</text>{{item.orderinfo.price}}
						<view class="staright">
							<text v-if="item.status==5">审核中</text>
							<text v-if="item.status==7">已退回</text>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="botBtn flexA">
					<view v-if="item.license_preview" class="flexC yellow"
						@click.stop="openshow(item.id,idx,item.license_preview,item.status)">交易证明
					</view>
					<view v-if="reChest(item.status)" class="flexC" @click.stop="order_confirm(item.id,idx,1)">已收货</view>
					<view v-if="reChest(item.status)" class="flexC" @click.stop="order_confirm(item.id,idx,2)">未收货</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="15" @close="show=false">
			<view class="centerBox">
				<view class="popTitle">
					转赠证明
				</view>
				<image class="popImage" :src="showimg"  mode="aspectFit"></image>
				<view class="popBtn flexA">
					<view class="btn flexC" v-if="reChest(showstatus)" @click="order_confirm(showid,showindex,2)">未收货
					</view>
					<view class="btn flexC" v-if="reChest(showstatus)" @click="order_confirm(showid,showindex,1)">已收货
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		buyerOrderList,
		order_confirm
	} from '@/api/order.js'
	export default {
		data() {
			return {
				list2: [{
					name: '全部',
				}, {
					name: '待接收',
				}, {
					name: '待确定'
				}, {
					name: '已完成'
				}],
				show: false,
				typeindex: 0,
				currentpage: 1,
				num: 10,
				showlist: [],
				//交易证明
				showid: "",
				showindex: "",
				showstatus: "",
				showimg: "",
			}
		},
		onLoad() {
			this.buyerOrderList()
		},
		methods: {
			// 跳转详情
			ondetail(id,shopId) {
				console.log(id)
				uni.navigateTo({
					url: `/pages/mine/order_detail?id=${id}&shopId=${shopId}`
				})
			},
			//确认收货
			async order_confirm(id, idx, type) {
				let obj = {
					order_id: id,
					type: type,
				}
				try {
					const res = await order_confirm(obj)
					console.log('order_confirm', res)
					this.show = false
					if (this.typeindex == 2) {
						this.showlist.splice(idx, 1)
					} else {
						if (type == 2) {
							this.showlist[idx].status = 5
						} else {
							this.showlist[idx].status = 6
						}
					}
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('order_confirm', err)
				}
			},
			// 查看交易证明
			openshow(id, index, img, status) {
				this.showimg = img
				this.show = true
				this.showid = id
				this.showstatus = status
				this.showindex = index
			},
			//复制
			copy(it) {
				uni.setClipboardData({
					data: it,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			//顶部切换
			onclick(item) {
				console.log('item', item);
				this.typeindex = item.index
				this.buyerOrderList()
			},
			//买家订单数据
			async buyerOrderList() {
				let obj = {
					status: this.typeindex,
					page: this.currentpage,
					pagenum: 15
				}
				try {
					const res = await buyerOrderList(obj)
					console.log('buyerOrderList', res)
					this.showlist = res.list.data
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('buyerOrderList', err)
				}
			},
			//状态筛选
			reChest(s) {
				if (s == 3) return true;
			},
		},
	}
</script>

<style lang="less">
	page {
		background: #f6f6f6;
	}

	.u-tabs__wrapper__nav__item {
		background: #fff !important;
	}

	.u-tabs__wrapper__nav {
		background: #fff !important;
	}

	.group {
		padding: 16rpx 24rpx;

		.item {
			padding: 32rpx;
			margin-bottom: 24rpx;
			border-radius: 24rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
		}
	}

	.u-sticky {
		top: 0 !important;
	}

	.top {
		justify-content: space-between;

		.left {
			color: rgba(50, 50, 51, 1);
			font-size: 26rpx;

			image {
				margin-right: 8rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.right {
			color: rgba(0, 0, 0, 0.6);
			font-size: 26rpx;

			

		}
	}

	.bot {
		margin-top: 26rpx;
		justify-content: space-between;

		image {
			margin-right: 20rpx;
			width: 144rpx;
			height: 144rpx;
			border-radius: 16rpx;
		}

		.left {
			.title {
				font-size: 28rpx;
				font-weight: 700;
			}

			.time {
				color: rgba(0, 0, 0, 0.6);
				font-size: 26rpx;
			}

			.name {
				color: rgba(0, 0, 0, 0.6);
				font-size: 26rpx;
			}
		}

		.right {
			font-size: 30rpx;
			font-weight: 700;
			.staright {
				margin-top: 12rpx;
				color: rgba(0, 0, 0, 0.3);
				font-size: 26rpx;
				font-weight: 400;
				font-family: "PingFang SC";
			}
		}

	}

	.line {
		margin: 32rpx 0 24rpx;
		width: 100%;
		background: #f6f6f6;
		height: 2rpx;
	}

	.botBtn {
		justify-content: flex-end;

		view {
			margin-right: 24rpx;
			color: rgba(0, 0, 0, 0.6);
			font-size: 24rpx;
			width: 144rpx;
			height: 56rpx;
			border-radius: 12rpx;
			opacity: 1;
			border: 2rpx solid #f6f6f6;
			font-weight: 700;
		}

		.yellow {
			background: rgba(254, 208, 0, 1);
			border-color: rgba(254, 208, 0, 1);
			color: rgba(0, 0, 0, 0.9);
		}
	}

	.centerBox {
		padding: 48rpx 32rpx 24rpx;
		box-sizing: border-box;
		width: 622rpx;
		background: #fff;
		border-radius: 15rpx;

		.popTitle {
			text-align: center;
			color: rgba(0, 0, 0, 0.9);
			font-size: 32rpx;
			font-weight: 700;
		}

		.popImage {
			margin-top: 44rpx;
			width: 100%;
			height: 654rpx;
			border-radius: 16rpx;
		}

		.popBtn {
			margin-top: 72rpx;
			justify-content: space-evenly;

			.btn {
				width: 264rpx;
				height: 76rpx;
				border-radius: 84rpx;
				opacity: 1;
				background: rgba(245, 245, 245, 1);
				color: rgba(0, 0, 0, 0.9);
				font-size: 28rpx;
				font-weight: 700;
			}

			.btn:nth-child(2) {
				background: linear-gradient(134.8deg, rgba(255, 232, 100, 1) 0%, rgba(255, 216, 0, 1) 100%);
			}
		}
	}
</style>