<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="widthFix" 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>

		<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 { onLoad } from '@dcloudio/uni-app';
import { getOrderList } from '@/services/api';
import headerVue from '@/pages/header/index.vue';

let color = ref('#a27443');
let checked = ref(true);
let money = ref('391.00');
let num = ref<any>(0);
// 订单数据
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 initOrderList = async () => {
	let res: any = await getOrderList();
	if (res.data.errno === 0) orderData.value = res.data.data.list[0].goodsList;
};

onLoad(() => {
	initOrderList();
});
</script>

<style lang="scss" scoped>
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.order-container {
	.content {
		padding: 30rpx;
		.order-image {
			width: 100%;
			height: 60rpx;
			margin-bottom: 6rpx;
		}
		.order-content {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			box-sizing: border-box;
			width: 100%;
			min-height: 180rpx;
			max-height: 200rpx;
			padding: 10rpx 20rpx;
			border: 1px solid #dfdfdf;
			border-radius: 10rpx;
			margin-bottom: 10rpx;
			.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;
					background-color: #ccc;
				}
			}
			.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>
