<template>
  <!-- <el-tooltip effect="light" placement="bottom">
    <template #content>
      <div class="user-info flex items-center">
        <p style="color: #fff; font-size: 30px">
          <svg-icon name="rounduser"></svg-icon>
        </p>
        <div class="flex-1 user-right p-l-base">
          <p class="u-role">{{ info.roleName }}</p>
        </div>
      </div>
    </template>
    <div class="user-box" @click="visibleUpdatePwd = true">
      <svg-icon name="user" style="font-size: 17px; position: relative; bottom: -2px"></svg-icon>
      <p class="tip">{{ info.userName }}</p>
    </div>
  </el-tooltip> -->
  <div class="user-info flex items-center" :class="{ 'in-layout': inLayout }" @click="visibleUpdatePwd = true">
    <img v-if="props.inLayout" src="../../assets/images/icon-个人-蓝@2x.png" />
    <img v-else src="../../assets/images/icon-个人-灰@2x.png" />
    <div class="desc flex" :class="{ 'not-in-layout': !props.inLayout }">
      <p class="name">{{ info.userName }}</p>
      <p class="role">{{ info.roleName }}</p>
    </div>
  </div>

  <update-user-pwd
    v-model="visibleUpdatePwd"
    :user-name="info.name || ''"
    :employer="info.employer || ''"
  ></update-user-pwd>
</template>

<script setup lang="ts" name="UserInfo">
import { ref, computed } from 'vue'
import useMainStore from '@/store/main'
import UpdateUserPwd from '@/components/shared/UpdateUserPwd.vue'
import SvgIcon from '../common/SvgIcon.vue'

const mainStore = useMainStore()
const props = defineProps<{ inLayout?: boolean }>()
const info = computed(() => {
  const { loginName, name, roleName, employer } = mainStore.myUserInfo || {}
  return {
    userName: [loginName, name].filter(Boolean).join('-'),
    roleName,
    name,
    employer,
  }
})

const visibleUpdatePwd = ref<boolean>(false)
</script>

<style scoped lang="scss">
.user-info {
  cursor: pointer;
  & > img {
    width: 32px;
    height: 32x;
    margin-right: 10px;
  }
  &.in-layout {
    .desc {
      .role {
        color: #666;
      }
    }
  }
  .desc {
    height: 34px;
    flex-direction: column;
    justify-content: space-between;
    .name {
      font-size: 14px;
      color: #444;
    }
    .role {
      font-size: 12px;
      color: #8a8a8a;
      font-weight: normal;
    }
    &.not-in-layout {
      .name {
        color: #fff;
      }
    }
  }
}
</style>
