<template>
  <div class="user-info">
    <el-card shadow="hover">
      <div class="flex" style="height: 236px; ">
        <div class="avatar">
          <el-avatar :size="100" :src="user.avatar" @error="errorHandler">
            <img :src="user.avatar.includes('http') ? user.avatar : baseURL + user.avatar" class="upload-image" />
          </el-avatar>
        </div>
        <div class="detail">
          <div class="nickname">{{ user.nickname }}</div>
          <div class="username">@{{ user.username }}</div>
          <div class="email">{{ user.email }}</div>
          <div class="postName">
            <span v-for="item in postName">{{ item }}</span>
          </div>
          <div class="dept">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_1_110)">
                <path d="M5.25 3.25L2.75 5V11" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 1L7.75 2.75V6L9.5 7.25V11H5.25V1Z"
                  stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M1 11H11" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
              </g>
              <defs>
                <clipPath id="clip0_1_110">
                  <rect width="12" height="12" fill="white" />
                </clipPath>
              </defs>
            </svg>
            {{ user.dept.name }}
          </div>
        </div>
      </div>
      <div class="task-list">
        <div class="task-item">
          <div class="task-title">全部用户</div>
          <div class="task-num">{{ totalUsers }}</div>
          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.125 11.875H26.875V25.625C26.875 26.3154 26.3154 26.875 25.625 26.875H4.375C3.68464 26.875 3.125 26.3154 3.125 25.625V11.875Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
            <path d="M3.125 6.25C3.125 5.55964 3.68464 5 4.375 5H25.625C26.3154 5 26.875 5.55964 26.875 6.25V11.875H3.125V6.25Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
            <path d="M10 19.375L13.75 23.125L21.25 15.625" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10 3.125V8.125" stroke="#167AF0" stroke-width="2" stroke-linecap="round"/>
            <path d="M20 3.125V8.125" stroke="#167AF0" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="task-item">
          <div class="task-title">在线用户</div>
          <div class="task-num">{{ activeUsers }}</div>
          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M26.875 3.125L18.5625 26.875L13.8125 16.1875L3.125 11.4375L26.875 3.125Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
            <path d="M26.8751 3.125L13.8126 16.1875" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {useUserInfo} from '/@/stores/userInfo';
import { useI18n } from 'vue-i18n';
import { getUserNum } from '/@/api/marketing/data';

const { t } = useI18n();

const { user } = useUserInfo().userInfos;
console.log('user', user);

const getUserTime = ref(0);
const totalUsers = ref('0')
const activeUsers = ref('0')
onMounted(() => {
  getUserNum().then((res) => {
    totalUsers.value = res.data.totalUsers;
    activeUsers.value = res.data.activeUsers;
  });
  getUserTime.value = setInterval(() => {
    getUserNum().then((res) => {
      totalUsers.value = res.data.totalUsers;
      activeUsers.value = res.data.activeUsers;
    });
  },  10* 60* 1000)
});

onUnmounted(() => {
  clearInterval(getUserTime.value);
})

const errorHandler = () => {
  return './src/assets/avatar.png'
}

const postName = computed(() => {
  const list = user.postList?.map((item: any) => {
    return item.postName;
  })
  return list;
})

</script>
<style scoped lang="scss">
.user-info {
  .flex {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    margin-top: -10px;
    .avatar {
      width: 50%;
      padding-left: calc(50% - 110px);
      height: 100px;
    }

    .detail {
      width: 50%;
      padding-left: 10px;
      .nickname {
        font-size: 20px;
        font-weight: 600;
      }

      .username {
        font-size: 12px;
        line-height: 14px;
        color: rgba(136, 136, 136, 1);
        margin-top: 8px;
      }

      .email {
        font-size: 12px;
        line-height: 14px;
        color: rgba(136, 136, 136, 1);
        margin-top: 8px;
      }

      .postName {
        margin-top: 8px;
        display: flex;
        flex-wrap: wrap;
        span {
          font-size: 12px;
          line-height: 14px;
          color: rgba(136, 136, 136, 1);
          border: 1px solid rgba(22, 122, 240, 1);
          line-height: 20px;
          border-width: 1px;
          border-radius: 4px;
          font-family: Source Han Sans SC;
          font-size: 11px;
          color: rgba(22, 122, 240, 1);
          padding: 0 4px;
          margin-right: 2px;
          margin-bottom: 2px;
        }
      }

      .dept {
        font-size: 12px;
        line-height: 14px;
        color: rgba(136, 136, 136, 1);
        margin-top: 8px;
      }
    }
  }

  .task-list {
    height: 140px; 
    padding-top: 60px; 
    width: 100%; 
    max-width: 280px;
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    border-top: 1px solid rgba(230, 230, 230, 1);
    .task-item {
      position: relative;
      padding-left: 42px;
      svg {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .task-title {
      line-height: 17px;
      color: rgba(100, 100, 100, 1);
      font-size: 14px;
    }
    .task-num {
      font-size: 18px;
      line-height: 22px;
      color: rgba(18, 18, 18, 1);
    }
  }
}
</style>
