<script setup lang="tsx">
import { ref, watch } from 'vue'
import { getStoreDetail } from '@/api/store'
import { ElAvatar, ElText } from 'element-plus'
import list from './storeList.vue'
const modelValue = defineModel<number>({
  default: 0
})
const detail = ref<any>()
const showDrawer = ref(false)
const emit = defineEmits(['change'])
const checkedUser = async (res: any) => {
  detail.value = res
  emit('change', res)
  showDrawer.value = false
}
watch(
  () => modelValue.value,
  async (value) => {
    if (!value) return
    const res = await getStoreDetail(value)
    if (res) {
      detail.value = res.data
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<template>
  <BaseButton v-if="detail" size="large" @click="showDrawer = true">
    <div class="flex items-center">
      <ElAvatar shape="circle" size="small" :src="detail?.avatar">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
      </ElAvatar>
      <div class="flex flex-col ml-5px items-start justify-start">
        <ElText class="self-start!">{{ detail?.name }}</ElText>
        <ElText size="small" class="self-start!"> ID:{{ detail?.id }} </ElText>
      </div>
    </div>
  </BaseButton>
  <BaseButton v-else @click="showDrawer = true">选择仓库</BaseButton>
  <list v-model="showDrawer" @confirm="checkedUser" />
</template>
