<template>
  <div>
    <div class="text-center">
      <UserAvatar :img="userInfo?.avatar" />
    </div>
    <ul class="list-group list-group-striped">
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:user" />
        {{ t('profile.user.username') }}
        <div class="pull-right">{{ userInfo?.username }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:phone" />
        {{ t('profile.user.mobile') }}
        <div class="pull-right">{{ userInfo?.mobile }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="fontisto:email" />
        {{ t('profile.user.email') }}
        <div class="pull-right">{{ userInfo?.email }}</div>
      </li>
      <li class="list-group-item flex justify-between">
        <div class="flex-basis-100px flex-shrink-0">
          <Icon class="mr-5px" icon="carbon:tree-view-alt" />
          {{ t('profile.user.dept') }}
        </div>
        <div class="flex-1 flex flex-wrap justify-end gap-5px">
          <div v-for="dept in userInfo.deptInfoList" :key="dept.deptId">
            <el-popover placement="right" width="240" trigger="hover">
              <template #reference>
                <el-tag type="primary" class="cursor-pointer">{{ dept.deptName }}</el-tag>
              </template>
              <div class="flex flex-col gap-y-4px">
                <template v-for="type in keyList" :key="type.value">
                  <div class="flex" v-if="dept[type.key]">
                    <span class="flex-basis-42px flex-shrink-0 c-#909399">{{ type.label }}：</span>
                    <span class="flex-1">{{ dept[type.key] }}</span>
                  </div>
                </template>
              </div>
            </el-popover>
          </div>
        </div>
      </li>
      <li class="list-group-item" v-if="userInfo.rankInfoList?.length">
        <Icon class="mr-5px" icon="ep:suitcase" />
        {{ t('profile.user.rank') }}
        <div v-if="userInfo?.rankInfoList" class="pull-right">
          {{ userInfo?.rankInfoList.map((rank) => rank.name).join(',') }}
        </div>
      </li>

      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:calendar" />
        {{ t('profile.user.createTime') }}
        <div class="pull-right">{{ formatDate(userInfo.createTime) }}</div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import UserAvatar from './UserAvatar.vue'

import { getUserProfile, ProfileVO } from '@/api/system/user/profile'

defineOptions({ name: 'ProfileUser' })

const { t } = useI18n()
const userInfo = ref({} as ProfileVO)

const keyList = [
  { label: '部门', value: 'deptName', key: 'deptName' },
  { label: '角色', value: 'roleInfoList', key: 'role' },
  { label: '职务', value: 'dutyInfoList', key: 'duty' },
  { label: '职位', value: 'positionInfoList', key: 'position' },
  { label: '岗位', value: 'postInfoList', key: 'post' }
]

const getUserInfo = async () => {
  const users = await getUserProfile()
  users.deptInfoList = users.deptInfoList.map((dept) => {
    keyList.forEach(({ value, key }) => {
      if (value === 'deptName') return
      if (dept[value]?.length) dept[key] = dept[value].map((info) => info.name).join('、')
      else dept[key] = ''
    })
    return dept
  })
  userInfo.value = users
}
onMounted(async () => {
  await getUserInfo()
})
</script>

<style scoped>
.text-center {
  position: relative;
  height: 120px;
  text-align: center;
}

.list-group-striped > .list-group-item {
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group {
  padding-left: 0;
  list-style: none;
}

.list-group-item {
  padding: 11px 0;
  margin-bottom: -1px;
  font-size: 13px;
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
}

.pull-right {
  float: right !important;
}
</style>
