<template>
  <HeadPanl class="personal-head">
    <div class="user">
      <img :src="user.avatar" />
      <div class="info">
        <h4>{{ getGreet() }}好，{{ user.nickname }}</h4>
        <div class="account">
          <span>{{ user.phone }}</span>
          <span>{{ user.email }}</span>
        </div>
        <div class="account-manage">
          <a :href="userInfoLink">修改信息 ></a>
          <a :href="userInfoLink">修改密码 ></a>
        </div>
      </div>
    </div>
    <Simples :data="simples" />
  </HeadPanl>

  <BodyPanl title="操作记录">
    <RecordList />
  </BodyPanl>
</template>

<script lang="ts" setup>
import RecordList from '@/views/record/list.vue'
import Simples from '@/components/simples/index.vue'
import { HeadPanl, BodyPanl } from '@/layout/panl'
import { toRefs } from 'vue'
import { computed } from 'vue'
import { useUserStore } from '@/store'
import { userInfoLink } from '@/env'

const { current: user, meta } = toRefs(useUserStore().$state)
const simples = computed(() => [
  { label: '项目数', value: meta.value.projectCount },
  { label: '项目文件数', value: meta.value.projectFileCount },
  { label: '项目场景数', value: meta.value.projectSceneCount },
  { label: '已完成项目数', value: meta.value.projectOverCount }
])
const getGreet = () => {
  const hours = new Date().getHours()
  return hours > 5 && hours < 11
    ? '早上'
    : hours >= 11 && hours < 3
    ? '中午'
    : hours >= 3 && hours <= 6
    ? '下午'
    : '晚上'
}
</script>

<style lang="scss" scoped>
.personal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user {
  display: flex;
  img {
    width: 104px;
    height: 104px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    flex: none;
    margin-right: var(--padding);
    display: block;
    border-radius: 50%;
  }
}

.info {
  flex: 1;

  h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #323233;
  }
}

.account {
  margin-bottom: 20px;
  color: #666666;
  font-size: 14px;
  span {
    margin-right: 14px;
  }
}
.account-manage {
  a {
    font-size: 14px;
    color: #0076f6;
    margin-right: 30px;
  }
}
</style>
