<template>
	<up-sticky bgColor="#fff" style="padding: 20rpx;">
		<up-tabs :list="tabsLst" :itemStyle="{ width: '50vw', paddingBottom: '20rpx' }" lineColor='#50C758'
			:current='currentTab' @change="tabsChange"></up-tabs>
	</up-sticky>
	<view class="content" v-if="lists.length">
		<view class="card" v-for="(item,index) in lists" :key="item.id">
			<view class="head">
				<view class="">
					{{item.system_store_name}}
				</view>
				<view v-if="currentTab==0" style="text-decoration: underline;text-underline-offset: 5rpx;"
					@click="hdClick(item)">
					提货码
				</view>
			</view>
			<view class="card-li" v-if="currentTab==0">
				<text class="lab">预约时间：</text>{{item.times}}
			</view>
			<view class="card-li" v-if="currentTab==1">
				<text class="lab">提货时间：</text>{{item.update_time}}
			</view>
			<view class="card-li" style="display: flex;justify-content: space-between;">
				<view class="">
					<text class="lab">商品信息：</text>{{item.store_name}}
				</view>
				<view class="">
					x{{item.nums}}
				</view>
			</view>
		</view>
	</view>

	<up-empty v-else mode="history" style="margin-top: 20vh;" text='没有更多内容了'>
	</up-empty>

	<view class="mask" v-if='showVerifyPop' @click="showVerifyPop=false">
		<view
			style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: white;padding: 20rpx;">
			<up-image :src="orderData.verify_img" width="710rpx" height="105rpx"></up-image>
			<view style="font-weight: bold;color: #333;font-size: 26;text-align: center;margin-top: 20rpx;">
				提货码 {{orderData.verify_code}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		UserProductStorageLogApi
	} from "@/api/order.js"
	import useUserStore from "@/store/user";

	const userStore = useUserStore().userInfo;
	const currentTab = ref(0)
	const showVerifyPop = ref(false)
	const orderData = reactive({})
	const tabsLst = reactive([{
			name: '已预约'
		},
		{
			name: '已提货'
		},

	]);

	const tabsChange = (e) => {
		currentTab.value = e.index
		getLists()
	}


	const lists = ref([{}])
	const getLists = async () => {
		let res = await UserProductStorageLogApi({
			uid: userStore.id,
			status: currentTab.value
		})
		lists.value = res.data.lists
	}

	const hdClick = (item) => {
		orderData.verify_code = item.verify_code
		orderData.verify_img = item.verify_img
		showVerifyPop.value = true
	}

	getLists()
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
	}


	.card {
		background-color: white;
		border-radius: 20rpx;
		// padding: 20rpx;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;

		.head {
			background-color: #50C758;
			border-radius: 20rpx 20rpx 0 0;
			color: white;
			padding: 20rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
		}

		.card-li {
			padding: 0 20rpx;
			margin-top: 10rpx;

			.lab {
				color: #989898;
			}
		}
	}

	.mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		top: 0;
		left: 0;
		z-index: 99999 !important;
	}
</style>