<template>
  <div class="w-user">
    <slot v-if="!id" name="empty">
      <div class="empty">-</div>
    </slot>
    <template v-else>
      <template v-if="cache[key][id]?.loading">
        <el-popover placement="top" trigger="hover">
          <template #reference>
            <div class="empty"><el-icon class="is-loading">
                <Loading />
              </el-icon>加载中</div>
          </template>
        <div class="w-reload" style="position: relative;" @click="reload();">
            <el-icon  >
              <Refresh />
            </el-icon>
            刷新
            </div>
        </el-popover>
      </template>

      <template v-else-if="cache[key][id]?.error">
        <el-popover placement="top" trigger="hover">
          <template #reference>
            <div class="empty" style="color:#F006;"><el-icon>
                <CircleClose />
              </el-icon> 错误</div>
          </template>
        <div class="w-reload" style="position: relative;" @click="reload();">
            <el-icon  >
              <Refresh />
            </el-icon>
            刷新
            </div>
        </el-popover>
      </template>

      <template v-else>
        <el-popover placement="top" :width="380" trigger="click">
          <template #reference>
            <slot :item="cache[key][id]">
              <div class="w-user-btn">
                <div><el-avatar style="--el-avatar-size:2.2em;" :src="cache[key][id]?.avatar || defAva" /></div>
                <div>{{ cache[key][id]?.nickName }}</div>
              </div>
            </slot>
          </template>
          <div class="w-user-info">
            <div>
              <div><el-avatar style="--el-avatar-size:5rem;" :src="cache[key][id]?.avatar || defAva" /></div>
              <div>{{ cache[key][id]?.nickName }}</div>
            </div>
            <div>
              <div>账号</div>
              <div>{{ cache[key][id]?.userName }}</div>
              <div>职务</div>
              <div>{{  cache[key][id]?.postName }}</div>
              <div>手机</div>
              <div>{{ cache[key][id]?.phonenumber }}</div>
              <div>邮箱</div>
              <div>{{ cache[key][id]?.email }}</div>
              <div>部门</div>
              <div>{{ cache[key][id]?.deptName }}</div>
            </div>
            <div class="w-reload" @click="reload();">
            <el-icon  >
              <Refresh />
            </el-icon></div>
          </div>
        </el-popover>
      </template>

    </template>
  </div>
</template>
<script setup>
import { useCacheStore } from '@/store';
import { computed, watch, onMounted } from 'vue';
import { searchUser } from '@/api/system/user'

import defAva from '@/assets/images/avatar.png'

const key = "user";

const props = defineProps({
  id: {
    type: String,
    default: ""
  }
});

const id = computed(() => props.id);

const cache = useCacheStore().cache;
if (!cache[key]) {
  cache[key] = {};
}

const loadData = async () => {
  if (!id.value) {
    return;
  }
  if (cache[key][id.value]) {
    return;
  }
  cache[key][id.value] = { loading: true };
  try {
    let r = await searchUser(id.value);
    cache[key][id.value] = r.data;
  } catch (e) {
    console.error(e);
    cache[key][id.value] = { error: true }
  }
}

const reload = async () => {
  delete cache[key][id.value];
  loadData();
}
onMounted(loadData);
watch(id, loadData);

defineExpose({ reload });


</script>
<style lang="scss" scoped>
.w-reload {
  position: absolute;
  right: .5rem;
  top: .5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: .5rem;
  padding-left: .5rem;
}
.w-user {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;


  &-info {
    display: grid;
    grid-template-columns: 6rem 1fr;
    font-size: .8rem;

    &>div:first-child {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    &>div:nth-child(2) {
      display: grid;
      gap: .9rem;
      grid-template-columns: 3rem 1fr;

      &>:nth-child(2n+1) {
        text-align: right;

        &::after {
          content: " :";
        }
      }
    }
  }

  &-btn {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &>* {
      margin: 0 .1em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &>* {
    margin: 0 .1em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .empty {
    color: #0005;
    size: .9em;
  }
}</style>