<template>
	<view class="order-container">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<headerVue :color="color" />
		<view v-for="(item, index) in orderData" class="or-content">
			<view class="or-top">
				<text>订单编号：{{ item.orderSn }}</text>
				<text>合计：￥{{ item.actualPrice.toFixed(2) }}</text>
			</view>
			<view
				v-for="(item1, i) in item.goodsList"
				class="or-bottom"
				@click="toggle('right', item1.id)"
			>
				<view class="or-left">
					<image :src="item1.picUrl" class="or-left-image" mode="heightFix" />
				</view>
				<view class="order-right">
					<text class="details-top">{{ item1.goodsName }}</text>
					<text class="details-center">{{ item1.specifications[0] }}</text>
					<view class="details-bottom">
						<text style="color: #d50000; font-size: 34rpx">
							￥{{ item1.price.toFixed(2) }}
						</text>
						<text style="font-size: 24rpx; color: #ccc; margin-left: 20rpx">
							已开瓶数量：{{ item1.deCapNum }}
						</text>
						<text style="font-size: 24rpx; color: #ccc; margin-left: 20rpx">
							{{ item1.number + '件' }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-show="orderData" :status="moreStates" style="width: 100%;"></uni-load-more>

		<view class="qr-code">
			<text style="margin-right: 60rpx;">科 技 赋 能</text>
			<image
				src="../../static/msjf-picture/msjf-13.jpg"
				mode="widthFix"
				style="width: 144rpx;"
			></image>
			<text style="margin-left: 60rpx;">高 端 酱 酒</text>
		</view>

		<uni-popup ref="popup" background-color="#f2f2f2">
			<view v-if="detailData.length">
				<view v-for="(item, i) in detailData" class="msjf-detail">
					<view class="detail-list">
						<view class="label">序列号</view>
						<view class="text">{{ item.sequenceCode }}</view>
					</view>
					<view class="detail-list">
						<view class="label">是否开瓶</view>
						<view class="text">{{ item.ifDeCap ? '已开瓶' : '未开瓶' }}</view>
					</view>
					<view class="detail-list">
						<view class="label">开瓶时间</view>
						<view class="text">{{ item.deCapTime }}</view>
					</view>
					<view class="detail-list" v-if="item.ifDeCap">
						<view class="label">开瓶手机号</view>
						<view class="phone-list">
							<view v-for="phone in item.phoneList?.length" class="text">
								{{ item.phoneList[phone - 1] }}
							</view>
						</view>
					</view>
				</view>
				<uni-load-more status="no-mroe"></uni-load-more>
			</view>
			<uni-load-more v-else :status="moreStates"></uni-load-more>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getMSJFList, getMSJFDetail } from '@/services/api';
import { baseURL } from '@/services/request';
import headerVue from '@/pages/header/index.vue';
import { onReachBottom } from '@dcloudio/uni-app'

let color = ref('#a27443');

let orderData = ref([] as any);
let detailData = ref([] as any);

let popup = ref();
let moreStates = ref('more');
let listQuery = ref({
	limit: 10,
	page: 1
})
let total = ref(0)

onReachBottom(() => {
	// 判断是否还有下一页数据
	if (listQuery.value.page * listQuery.value.limit >= total.value) return (moreStates.value = 'on-more');
	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
	if (moreStates.value === 'loading') return;
	listQuery.value.page += 1;
	initMSJFList();
})

let toggle = (type: string, id: number) => {
	popup.value?.open(type)
	initMSJFDetail(id)
};

// 获取订单数据
let initMSJFList = async () => {
	moreStates.value = 'loading'
	let res: any = await getMSJFList(listQuery.value);
	if (res.data.errno === 0) {
		if (res.data.data.total > 10) moreStates.value = 'more';
		else moreStates.value = 'no-more';
		// 区分是否全路径
		for (let s in res.data.data.list) {
			for (let g in res.data.data.list[s].goodsList) {
				let picUrl = res.data.data.list[s].goodsList[g].picUrl
				if (picUrl.split('.').length != 5)
					res.data.data.list[s].goodsList[g].picUrl = baseURL + picUrl
			}
		}
		orderData.value = [...orderData.value, ...res.data.data.list];
		total.value = res.data.data.total;
	}
};

initMSJFList();

// 单个商品详情
let initMSJFDetail = async (id: any) => {
	let res: any = await getMSJFDetail({ orderGoodsId: id })
	if (res.data.errno === 0)
		detailData.value = res.data.data.list
}
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f2f2;
}

:deep(.uni-popup .uni-popup__wrapper) {
	width: 500rpx;
	// padding: 0 40rpx;
}

:deep(.uni-popup__wrapper.right) {
	min-height: 70vh;
	overflow-y: scroll;
}

:deep(.uni-load-more) {
	padding-top: 20rpx;
}

:deep(.more) {
	padding-top: 0px;
	padding-bottom: 40rpx;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

.order-container {
	width: 100%;
	height: 100vh;

	.or-content {
		margin-top: 30rpx;
		width: 100%;
		background-color: #fff;

		.or-top {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 14px;
		}

		.or-bottom {
			padding: 10rpx 30rpx;
			height: 190rpx;
			box-sizing: border-box;
			border-top: 1px solid #f2f2f2;
			border-bottom: 1px solid #f2f2f2;

			.or-left {
				float: left;
				margin-right: 14%;

				.or-left-image {
					height: 160rpx;
					border-radius: 10rpx;
				}
			}

			.order-right {
				display: flex;
				flex-direction: column;

				.details-top {
					margin-bottom: 4%;
				}

				.details-center {
					margin-bottom: 3%;
				}

				.details-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}

	.content {
		padding: 30rpx;

		.order-image {
			width: 100%;
			height: 60rpx;
			margin-bottom: 6rpx;
		}

		.order-content {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			width: 100%;
			height: 100px;
			padding: 10rpx 20rpx;
			border: 1px solid #dfdfdf;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			background: #fff !important;

			.order-left {
				width: 260rpx;
				height: 100%;
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.order-left-image {
					// width: 120rpx;
					height: 78px;
					border-radius: 10rpx;
					margin-right: 30rpx;
				}
			}

			.order-right {
				.details-top {
					display: block;
					font-size: 28rpx;
					font-weight: 600;
					margin-bottom: 6rpx;
				}

				.details-center {
					display: block;
					font-size: 24rpx;
				}

				.details-bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
				}
			}
		}
	}

	.qr-code {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		width: 100%;
		height: 140rpx;
		margin-top: 10%;
		padding-bottom: 40rpx;
	}

	.footer {
		.bg-imag {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
		}

		.btn-image {
			position: fixed;
			bottom: 2%;
			left: 38%;
			width: 200rpx;
		}
	}

	.msjf-detail {
		font-size: 14px;
		// padding: 20rpx;
		background-color: #fff;
		margin-bottom: 40rpx;

		.detail-list {
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			border-bottom: 1px solid #ccc;

			.label {
				width: 168rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: right;
				margin-right: 10rpx;
			}

			.text {
				padding-left: 20rpx;
				width: 280rpx;
				min-height: 40rpx;
				max-height: 80rpx;
				line-height: 40rpx;
				text-align: left;
				overflow: hidden;
				border-left: 1px solid #ccc;
			}

			.phone-list {
				.text {
					width: 230rpx;
					min-height: 40rpx;
					max-height: 80rpx;
					line-height: 40rpx;
					text-align: left;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
