<script setup lang="tsx">
import { UserList } from '..'
import { ref, watch } from 'vue'
import { getUserDetail } from '@/api/user'
import { ElAvatar, ElText } from 'element-plus'
const modelValue = defineModel<number>({
  default: 0
})
const userDetail = ref<any>()
const showDrawer = ref(false)
const emit = defineEmits(['changeUser'])
const checkedUser = async (res: any) => {
  userDetail.value = res
  emit('changeUser', res)
  showDrawer.value = false
}
watch(
  () => modelValue.value,
  async (value) => {
    if (!value) return
    const res = await getUserDetail(value)
    if (res) {
      userDetail.value = res.data
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<template>
  <BaseButton v-if="userDetail" size="large" @click="showDrawer = true">
    <div class="flex items-center">
      <ElAvatar shape="circle" size="small" :src="userDetail?.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!">{{ userDetail?.nickname }}</ElText>
        <ElText size="small" class="self-start!"> UID:{{ userDetail?.uid }} </ElText>
      </div>
    </div>
  </BaseButton>
  <BaseButton v-else @click="showDrawer = true">选择用户</BaseButton>
  <UserList v-model="showDrawer" @confirm="checkedUser" />
</template>
