<template>
	<block v-if="lists.length">
		<view class="m-card m-good" v-for="(item, index) in lists" :key="index">
			<view class="shop-check" @click="item.check=!item.check">
				<image v-if="!item.check" src="@/static/icon/n-check.png"></image>
				<image v-else src="@/static/icon/check.png"></image>
			</view>

			<view class="image">
				<up-image width="160rpx" height="160rpx" :src="item.image"></up-image>
			</view>
			<view class="body-content">
				<view>
					<view class="title">
						<view> <text>{{item.store_name }}</text> x<text>{{item.nums }}</text> </view>
						<view>¥{{item.price}}</view>
					</view>
				</view>
				<view class="time">
					<view style="float: right;">
						<up-number-box :min="1" :max="item.nums" v-model="item.num"></up-number-box>
					</view>
				</view>
			</view>
		</view>

	</block>

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

	<view class="bottom">
		<view style="display: flex;align-items: center;">
			<view class="all-checl">
				<image v-if="getCheckNum()!=lists.length" @click="checkAll" src="@/static/icon/n-check.png"></image>
				<image @click="checkAllNot" v-else src="@/static/icon/check.png"></image>
			</view>
			<view style="margin-left: 8rpx;" @click="checkAll" v-if='getCheckNum() !=lists.length'>
				全选({{getCheckNum()}})
			</view>
			<view style="margin-left: 8rpx;" @click="checkAllNot" v-else>
				全不选({{getCheckNum()}})
			</view>
		</view>
		<view style="display: flex;align-items: center;">
			<up-button color="#20b128" shape="circle" @click="showPop=true">
				<view class="">
					预约提货({{getCheckNum()}})
				</view>
			</up-button>
		</view>
	</view>


	<up-popup :show="showPop" @close="showPop=false" @open="showPop=true" mode="center">
		<view class="popContent">
			<view class="tit">
				预约提货
			</view>
			<view class="label">
				预约时间：<view class="left" @click="showCalendar=true">
					{{formData.times}}
				</view>
			</view>
			<view class="label">
				选择门店：<view class="left" @click="navgo('/multipleShop/index/index?event=asset')">
					{{formData.store_name}}
				</view>
			</view>
			<view class="rect-btn">
				<view style="width: 236rpx;">
					<up-button @click="showPop=false">取消</up-button>
				</view>
				<view style="width: 236rpx;">
					<up-button color="#20b128" @click="submit">确定</up-button>
				</view>
			</view>
		</view>
	</up-popup>
	<up-calendar :show="showCalendar" color="#20B128" @confirm="confirmDate" @close='showCalendar=false'></up-calendar>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onPullDownRefresh
	} from "@dcloudio/uni-app"

	import {
		getUserProductStorageLists,
		reservationUserProductStorage
	} from "@/api/asset.js"
	import useUserStore from "@/store/user";
	let userInfo = useUserStore().userInfo
	const value = ref(1)
	const showPop = ref(false)
	const showCalendar = ref(false)
	const lists = ref([])

	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}

	const getCheckNum = () => {
		return lists.value.filter(item => item.check).length
	}

	const formData = reactive({
		info: [],
		times: "",
		store_id: "",
		store_name: "",
	})

	uni.$on('asset', function(data) {
		let datas = JSON.parse(data)
		formData.store_id = datas.id
		formData.store_name = datas.name
	})

	const getLists = async (isPull) => {
		let res = await getUserProductStorageLists({
			uid: userInfo.id
		})
		lists.value = res.data.lists
		lists.value.forEach(item => {
			item.num = 1
		})
		if (isPull) uni.stopPullDownRefresh()
	}

	// 全选&&全不选
	const isAll = ref(false)
	const checkAll = () => {
		lists.value.forEach(item => item.check = true)
	}
	const checkAllNot = () => {
		lists.value.forEach(item => item.check = false)
	}
	// 全选&&全不选结束

	const submit = async () => {
		formData.info = (lists.value.filter(item => item.check)).map(item => {
			return {
				product_id: item.product_id,
				nums: item.num
			}
		})
		await reservationUserProductStorage({
			...formData
		})
		showPop.value = false
		getLists()
	}
	const confirmDate = (e) => {
		formData.times = e[0]
		showCalendar.value = false
	}

	onPullDownRefresh(() => {
		getLists(true)
	})
	getLists()
</script>

<style lang="scss">
	.m-card {
		margin: 20rpx;
		border-radius: 14rpx;
		background-color: #fff;
		padding: 20rpx;
	}

	.m-good {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.image {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			border-radius: 14rpx;
			overflow: hidden;
		}

		.body-content {
			width: 490rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #989898;

			.title {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #444;
			}

			.tips {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				margin-top: 10rpx;
				align-items: center;
			}

			.time {
				padding: 5rpx 10rpx;
				font-size: 26rpx;
				color: #444;
				border-radius: 10rpx;
				// display: flex;
			}
		}
	}

	.shop-check {
		width: 60rpx;
		height: 150rpx;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.all-checl {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.bottom {
		width: 100vw;
		padding: 50rpx 20rpx;
		padding-top: 20rpx;
		position: fixed;
		bottom: 0;
		background-color: white;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
	}

	.popContent {
		width: 600rpx;
		height: 400rpx;
		padding: 20rpx 50rpx;

		box-sizing: border-box;

		.tit {
			text-align: center;
			font-size: 34rpx;
			margin-bottom: 10rpx;
		}
	}

	.rect-btn {
		display: flex;
		// margin-top: 50rpx;
		justify-content: space-between;
	}

	.label {
		display: flex;
		position: relative;
		margin-bottom: 30rpx;
		align-items: center;

		.left {
			margin-left: 20rpx;
			width: 300rpx;
			height: 70rpx;
			border: 1px solid #EDF2FA;
			line-height: 70rpx;
			padding-left: 20rpx;
		}

		// vertical-align: bottom;
	}
</style>