<template>
	<view class="order-container">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<headerVue :color="color" />
		<!-- 	<view v-for="(item1, i) in titleImg" :key="i" class="content">
			<image :src="item1.imgUrl" mode="" class="order-image"></image>
			<view v-for="(item, i) in orderData" :key="item.id" class="order-content">
				<view class="order-left">
					<checkbox-group @change="selected" style="margin: 0 10rpx;">
						<label><checkbox class="selected" color="#555555" :checked="checked" /></label>
					</checkbox-group>
					<image :src="item.picUrl" mode="heightFix" class="order-left-image"></image>
				</view>
				<view class="order-right">
					<text class="details-top">{{ item.goodsName }}</text>
					<text class="details-center">{{ item.specifications[0] }}</text>
					<view class="details-bottom">
						<text style="color: #d50000; font-size: 34rpx">￥{{ item.price }}</text>
						<text style="font-size: 24rpx; color: #ccc; margin-left: 20rpx">{{ item.number + '件' }}</text>

						<text style="font-size: 24rpx; color: #ccc; margin-left: 20rpx">瓶 10件起订</text>
						<view class="details-sum">
							<text class="subtract" @click="reduce">-</text>
							<text class="num">{{ num }}</text>
							<text class="add" @click="add">+</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<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">
				<view class="or-left"><image :src="item1.picUrl" class="or-left-image" /></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>

		<!-- <text style="font-size: 24rpx;  padding: 0 30rpx; color:#ccc">订购 时间:2022.8.24</text> -->
		<view class="qr-code">
			<text style="margin-right: 60rpx;">科 技 赋 能</text>
			<image src="../../static/msjf-picture/msjf-13.png" mode="widthFix" style="width: 144rpx;"></image>
			<text style="margin-left: 60rpx;">高 端 酱 酒</text>
		</view>
		<!-- <view style="width: 100%; height: 200rpx;"></view> -->
		<!-- <view class="footer">
			<image src="../../static/msjf-picture/msjf-05.jpg" mode="" class="bg-imag"></image>
			<image src="../../static/msjf-picture/msjf-10.png" mode="widthFix" class="btn-image"></image>
		</view> -->
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getMSJFList } from '@/services/api';
import headerVue from '@/pages/header/index.vue';

let color = ref('#a27443');

// 订单数据
let orderData = ref();
// 图片标题
// let titleImg = ref([
// 	{
// 		imgUrl: '/static/msjf-picture/msjf-14.png'
// 	},
// 	{
// 		imgUrl: '/static/msjf-picture/msjf-18.png'
// 	},
// 	{
// 		imgUrl: '/static/msjf-picture/msjf-19.png'
// 	}
// ]);

// let add = () => {
// 	num.value++;
// };

// let reduce = () => {
// 	if (num.value < 1) return;
// 	else num.value--;
// };

// 获取订单数据
let initMSJFList = async () => {
	let res: any = await getMSJFList();
	if (res.data.errno === 0) orderData.value = res.data.data.list;
};

initMSJFList();
</script>

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

.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;
			box-sizing: border-box;
			border-top: 1px solid #f2f2f2;
			border-bottom: 1px solid #f2f2f2;
			.or-left {
				float: left;
				margin-right: 14%;
				.or-left-image {
					width: 130rpx;
					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;
					// .details-sum {
					// 	margin-left: 10rpx;
					// 	display: inline-block;
					// 	border: 1px solid #d0d0d0;
					// 	text {
					// 		width: 40rpx;
					// 		line-height: 50rpx;
					// 		text-align: center;
					// 		display: inline-block;
					// 		background-color: #fff;
					// 	}
					// 	.add {
					// 		color: #fa4305;
					// 		border-left: 1px solid #d0d0d0;
					// 	}
					// 	.subtract {
					// 		border-right: 1px solid #d0d0d0;
					// 	}
					// }
				}
			}
		}
	}

	.qr-code {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		width: 100%;
		height: 140rpx;
		margin: 35% 0 50rpx 0;
	}

	.footer {
		.bg-imag {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
		}
		.btn-image {
			position: fixed;
			bottom: 2%;
			left: 38%;
			width: 200rpx;
		}
	}
}
</style>
