<template>
	<view class="w-full">
		<view class="box u-flex u-row-between" @click="showPop" :class="{disabled:disabled}">
			<text class="color-999 " v-if="!modelValue">请选择</text>
			<text v-else class="u-m-r-30">{{shopName}}</text>
			<up-icon name="arrow-down"></up-icon>
		</view>

		<popupHeadShop v-model="show" @confirm="confirm"></popupHeadShop>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import popupHeadShop from './popup-head-shop.vue'
	import * as shopInfoApi from '@/http/api/account/shopInfo.js'

	const props = defineProps({
		disabled: {
			type: Boolean,
			default: false
		}
	})
	const show = ref(false)

	function showPop() {
		if (props.disabled) {
			return
		}
		show.value = true
	}
	const modelValue = defineModel()

	function confirm(e) {
		console.log(e);
		modelValue.value = e.shopId
		selShopInfo.value = e
	}
	const selShopInfo = ref(null)
	const shopName = computed(() => {
		if (selShopInfo.value) {
			return selShopInfo.value.shopName
		}
		return ''
	})
	onMounted(async () => {
		if (modelValue.value) {
			const res = await shopInfoApi.getShopDetail({
				id: modelValue.value
			})
			if (res) {
				selShopInfo.value = res
			}
		}
	})
</script>

<style lang="scss" scoped>
	.box {
		padding: 9px 9px;
		border: 1px solid #dadbde;
		display: flex;
		border-radius: 4px;

		&.disabled {
			background-color: rgb(245, 247, 250);
		}
	}
</style>