<template>
	<view>

		<view class="box" @click.stop="openPopup">
			<text class="u-font-28 color-999 u-p-r-16" v-if="!modelValue">请选择</text>
			<text class="u-font-28 color-333 u-p-r-16" v-else>{{returnLabel()}}</text>
			<view class="icon">
				<up-icon name="arrow-down" size="14" color="#999"></up-icon>
			</view>
		</view>
		<up-popup :show="show" placement="bottom" round="18rpx" closeOnClickOverlay @close="close">
			<view class="u-p-30">
				<view class="font-bold color-333 u-font-32">选择门店</view>
				<scroll-view scroll-with-animation :scroll-into-view="selShopId" class="scroll-view u-m-t-30"
					scroll-y="true" style="max-height :60vh;">
					<view class="u-m-b-10 u-flex item" v-for="item in list" :key="item.shopId" @click="itemClick(item)"
						:id="'shop_'+item.shopId" :class="{active:modelValue==item.shopId}">
						<view class="checkbox">
							<up-icon name="checkbox-mark" color="#fff"></up-icon>
						</view>
						<view class="u-flex-1">{{item.shopName}}</view>
					</view>
				</scroll-view>
				<view class="u-flex gap-20 u-m-t-30">
					<view class="u-flex-1">
						<my-button type="default" @click="close">取消</my-button>
					</view>
					<view class="u-flex-1">
						<my-button type="primary" @click="submit">确定</my-button>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		adminShopList
	} from '@/http/api/shop.js';

	const customStyle = ref({
		marginRight: '20px'
	});

	const show = ref(false);
	let modelValue = defineModel('modelValue', {
		default: '',
	});

	const selShopId = ref('')

	function returnLabel() {
		const findShop = list.value.find(v => v.shopId == modelValue.value)
		return findShop ? findShop.shopName : ''
	}

	function itemClick(shop) {
		modelValue.value = shop.shopId
	}

	function returnShopName(shopId) {
		const item = list.value.find((v) => v.shopId == shopId);
		return item?.shopName || '';
	}

	function close() {
		show.value = false;
	}

	function submit() {
		show.value = false;
	}


	const list = ref([]);

	function openPopup() {
		selShopId.value = 'shop_' + modelValue.value
		show.value = true;

	}
	async function init() {
		const res = await adminShopList({
			page: 1,
			size: 99999
		});
		if (res) {
			list.value = res.records.map((item) => ({
				shopId: item.id,
				shopName: item.shopName,
			}));
		}
	}
	onMounted(init);
</script>
<style lang="scss">
	.box {
		border-radius: 8upx;
		display: flex;
		flex-direction: row;
		align-items: top;
		flex-wrap: wrap;
		padding: 10rpx 24rpx;
		border: 2rpx solid #e5e5e5;
		position: relative;

		.icon {
			position: absolute;
			top: 50%;
			right: 24rpx;
			transform: translateY(-50%);
		}
	}

	.shop-item {
		padding: 4rpx 8rpx 4rpx 16rpx;
		border-radius: 4rpx;
		border: 2rpx solid #f0f0f0;
		background-color: #f5f5f5;
		margin-bottom: 16rpx;
		margin-left: 16rpx;
	}

	.scroll-view {
		.item {
			border: 1px solid #eee;
			padding: 20rpx;
			border-radius: 12rpx;

			&.active {
				border-color: $my-main-color;
			}

		}
	}

	.checkbox {
		margin-right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
		border: 1px solid #999;

	}

	.item {
		&.active {
			.checkbox {
				background-color: $my-main-color;
				border-color: $my-main-color;
			}
		}
	}
</style>