<template>
	<view>
		<up-radio-group v-model="useType" placement="row">
			<up-radio v-for="item in useTypeList" :key="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-radio>
		</up-radio-group>
		<view class="box" v-if="useType == 'custom'" @click.stop="openPopup">
			<text class="u-font-28 color-999 u-p-r-16" v-if="selShops.length == 0">请选择</text>
			<view class="u-font-24 shop-item u-flex u-p-r-20 u-col-center u-p-r-16" v-for="(item, index) in selShops" :key="item.shopId">
				<text>{{ returnShopName(item) }}</text>
				<view @click.stop="delShop(index)">
					<up-icon name="close" size="14" @click="delShop(index)" color="#999"></up-icon>
				</view>
			</view>
			<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 class="scroll-view u-m-t-30" scroll-y="true" max-height="40vh">
					<view class="u-m-b-10" v-for="item in list" :key="item.shopId">
						<up-checkbox usedAlone :name="item.shopId" :label="item.shopName" v-model:checked="item.checked"></up-checkbox>
					</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 { onMounted, reactive, ref, watch } from 'vue';
import { getShopList } from '@/http/api/shop.js';

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

const show = ref(false);
const selShops = defineModel('selShops', {
	default: () => [],
	type: [Array, String]
});
const useType = defineModel('useType', {
	default: () => 'only',
	type: String
});
const useTypeList = [
	{
		value: 'only',
		label: '仅本店'
	},
	{
		value: 'all',
		label: '全部门店'
	},
	{
		value: 'custom',
		label: '指定门店可用'
	}
];

function returnShopName(shopId) {
	const item = list.value.find((v) => v.shopId == shopId);
	return item?.shopName || '';
}
function close() {
	show.value = false;
}
function submit() {
	selShops.value = list.value.filter((item) => item.checked).map((v) => v.shopId);
	show.value = false;
}
function delShop(index) {
	selShops.value.splice(index, 1);
}
const list = ref([]);

function openPopup() {
	show.value = true;
	list.value = list.value.map((item) => ({
		shopId: item.shopId,
		shopName: item.shopName,
		checked: selShops.value.includes(item.shopId)
	}));
}
async function init() {
	const res = await getShopList();
	console.log('selShops.value', selShops.value);

	if (res) {
		list.value = res.map((item) => ({
			shopId: item.shopId,
			shopName: item.shopName,
			checked: selShops.value.includes(item.shopId)
		}));
	}
}
onMounted(init);
</script>
<style lang="scss">
.box {
	border-radius: 8upx;
	margin-top: 16rpx;
	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;
}
</style>
