<template>
	<view class="">
		<u-sticky bgColor="#fff">
			<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 list" :key="idx"  @click.stop="ondetail(item.id)">
				<view class="top flexA">
					<view class="left flexA">
						<image src="/static/order.png" mode=""></image>
						<view @click.stop="gophone(11)">订单号：</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.buyer_name}}</view>
						</view>
					</view>
					<view class="right" >
						<text style="font-size: 20rpx;">¥</text>{{item.orderinfo.price}}
						<view style=" color: rgba(0,0,0,0.4);font-size: 24rpx;" v-if="item.status==5">
							审核中
						</view>
						<view style=" color: rgba(0,0,0,0.4);font-size: 24rpx;" v-if="item.status==7">
							已退回
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="botBtn flexA">
					<view v-if="reseller(item.status)" class="flexC" @click.stop="openshowBuyer(item)">买家信息</view>
					<view v-if="reseller(item.status)" class="flexC" @click.stop="order_send(item.id,idx)">发货</view>
					<view v-if="!item.license_preview&&(item.status==2||item.status==3)" class="flexC yellow" @click.stop="openimag(item.id,idx,1)">上传转赠证明</view>
					<view v-if="item.license_preview" class="flexC yellow" @click.stop="openshow(item.license_preview)">查看交易证明</view>
					<view v-if="item.license_preview" class="flexC yellow" @click.stop="openimag(item.id,idx,2)">重新上传证明</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center" :round="15" @close="close" @open="open">
			<view class="centerBox">
				<view class="popTitle">
					转赠证明
				</view>
				<image class="popImage" :src="licenimg" mode="aspectFit"></image>
				<view class="popBtn flexC">
					<view class="btn flexC" @click="show=false">确定</view>
				</view>
			</view>
		</u-popup>

		<u-popup bgColor="transparent" :show="showBuyer" mode="center" :round="15" @close="close" @open="open">
			<view class="buyerInfo">
				<view class="buyerTitle">
					买家信息
				</view>
				<view class="list flexA" v-if="code">
					<view class="left"><text style="color: #FC4338;">*</text>接收账户：</view>
					<view class="right flexA">
						<view class="fw700">{{code}}</view>
						<view style="margin-left: 16rpx;color:  rgba(0,0,0,0.4);" @click.stop="copy(code)">复制</view>
					</view>
				</view>
				<view class="list flexA">
					<view class="left"><text style="color: #FC4338;">*</text>微信号：</view>
					<view class="right flexA">
						<view class="fw700">{{wechart}}</view>
						<view style="margin-left: 16rpx;color:  rgba(0,0,0,0.4);" @click.stop="copy(wechart)">复制</view>
					</view>
				</view>
				<view class="list flexA" v-if="name">
					<view class="left">联系人：</view>
					<view class="right flexA">
						<view class="fw700">{{name}}</view>
					</view>
				</view>
				<view class="list flexA" v-if="phone">
					<view class="left">联系电话：</view>
					<view class="right flexA">
						<view class="fw700">{{phone}}</view>
						<view style="margin-left: 16rpx;" >
							<a :href="'tel:' + phone" ><image src="/static/phone.png" mode=""></image></a>
						</view>
					</view>
				</view>
			</view>
			<view class="close" @click="showBuyer=false">
				<image class="wh100" src="/static/close.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		sellerOrderList,
		order_send,
		order_license
	} from '@/api/order.js'
	import {
		baseURL
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				list2: [{
					name: '全部',
				}, {
					name: '待发送',
				}, {
					name: '待确定'
				}, {
					name: '已完成'
				}],
				show: false,
				showBuyer: false,
				page: 1,
				num: 10,
				idx: 0,
				lastPage: 1,
				list: [],
				//卖家数据
				typeindex: 0,
				currentpage: 1,
				//买家信息
				code: "",
				wechart: "",
				name: "",
				phone: "",
				//证明
				imgid: "",
				imgindex: "",
				licenimg: "",
			}
		},
		onLoad() {
			this.sellerOrderList()

		},
		methods: {
			//拨打买家电话
			gophone(phone){
				console.log(phone)
				uni.makePhoneCall({
					phoneNumber:phone//仅为示例
				});
			},
			// 跳转详情
			ondetail(id){
				uni.navigateTo({
					url:"/pages/mine/order_detail?id="+id
				})
			},
			// 状态筛选
			reseller(s) {
				if (s == 2) return true;
			},
			openshowBuyer(item) {
				this.showBuyer = true
				this.code = item.buyer_name
				this.wechart = item.buyer_wechat
				this.name = item.buyer_name
				this.phone = item.buyer_mobile
			},
			// 查看证明
			openshow(img) {
				this.show = true
				this.licenimg = img
				console.log(this.licenimg)
			},
			//上传证明
			openimag(id, imgindex,type) {
				let that = this
				that.imgid = id
				that.imgindex = imgindex
				uni.chooseImage({ // 从本地选择图片或使用相机拍照
					success: (res) => {
						count: 1, // 最多可以选择的图片张数，默认为9张
						console.log(res)
						const tempFilePaths = res.tempFilePaths; // 成功的返回图片的本地路径列表
						uni.uploadFile({ // 直接上传文件到云储存
							url: baseURL + '/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0], // 要上传文件的对象
							name: 'file',
							formData: {
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								uni.showToast({
									title:type==1?'上传证明成功':'重新上传证明成功'
								})
								let data = JSON.parse(uploadFileRes.data);
								console.log(data);
								that.licenimg = data.data.fullurl; // 绝对路径
								console.log(that.licenimg)
								that.order_license()
							}
						});
					}
				})
				return;
			},
			// 卖家上传证明
			async order_license() {
				let obj = {
					order_id: this.imgid,
					license: this.licenimg
				}
				try {
					const res = await order_license(obj)
					console.log('order_license', res)
					this.list[this.imgindex].license_preview = this.licenimg
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('order_license', err)
				}
			},
			//卖家发货
			async order_send(id, idx) {
				try {
					const res = await order_send(id)
					console.log('order_send', res)
					if (this.typeindex == 0) {
						this.list[idx].status = 3
					} else {
						this.list.splice(idx, 1)
					}
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('order_send', err)
				}
			},
			//复制
			copy(it) {
				uni.setClipboardData({
					data: it,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				});
			},
			//顶部切换
			onclick(item) {
				console.log('item', item);
				this.typeindex = item.index
				this.list = []
				this.sellerOrderList()
			},
			async sellerOrderList(f) {
				let obj = {
					status: this.typeindex,
					page: this.currentpage,
					pagenum: 15
				}
				try {
					const res = await sellerOrderList(obj)
					console.log('sellerOrderList', res)
					this.lastPage = res.list.last_page
					this.list = f ? res.list.data : this.list.concat(res.list.data)
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('sellerOrderList', err)
				}
			},
			toggle(e) {
				this.idx = e.index
				this.page = 1
				this.sellerOrderList(1)
				console.log(e);
			},
		},
	}
</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 {
			text-align: center;
			font-size: 30rpx;
			font-weight: 700;
			a{
				text-decoration: none;
				color: #000000;
			}
		}

	}

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

	.botBtn {
		justify-content: flex-end;

		view {
			box-sizing: border-box;
			margin-right: 24rpx;
			color: rgba(0, 0, 0, 0.6);
			font-size: 24rpx;
			padding: 12rpx  14rpx;
			// 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);
		}
		.yellow:nth-last-child(1){
			margin-right: 0;
		}
	}

	.centerBox {
		padding: 48rpx 32rpx 24rpx;
		box-sizing: border-box;
		width: 622rpx;
		height: 962rpx;
		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%);
			}
		}
	}

	.buyerInfo {
		padding: 32rpx 32rpx;
		box-sizing: border-box;
		width: 622rpx;
		// height: 392rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);

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

		.list {
			margin-bottom: 24rpx;
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			justify-content: space-between;

			.right {
				image {
					margin-top: 5rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.close {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}
</style>