<template>
  <div>
    <Breadcrumb
      :items="['账号管理', '个人中心']"
      title="个人中心"
      :show-back="true"
    />
    <div class="container">
      <a-row style="margin-bottom: 16px">
        <a-col :span="24">
          <a-card :bordered="false">
            <a-space :size="0">
              <a-avatar
                :size="100"
                shape="square"
                :style="{ backgroundColor: 'rgb(var(--primary-6))' }"
              >
                <IconUser />
                <template #trigger-icon> <IconCamera /> </template
              ></a-avatar>
              <a-descriptions
                :data="userInfoData"
                :column="2"
                align="right"
                layout="inline-horizontal"
                :label-style="{
                  width: '100px',
                  paddingTop: '10px',
                  paddingBottom: '10px',
                  fontWeight: 'normal'
                }"
                :value-style="{
                  width: '150px',
                  paddingLeft: '8px',
                  textAlign: 'left'
                }"
              >
                <template #label="{ label }">{{ label }} :</template>
              </a-descriptions>
            </a-space>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="wrapper">
        <a-col :span="24">
          <a-tabs default-active-key="1" size="large" type="rounded">
            <a-tab-pane key="1" title="基本设置">
              <BaseSettings />
            </a-tab-pane>
            <a-tab-pane key="2" title="安全设置">
              <SecuritySettings />
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, computed } from 'vue'
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface'
import { getSelfInfo } from '@/api/client'
import { useEmitt } from '@/logics/mitt/useEmitt'
import { SelfInfoResParams } from '@/types/client'
import BaseSettings from './components/base.vue'
import SecuritySettings from './components/security.vue'
// 个人账户展示数据
const userInfoData = computed(() => {
  return [
    {
      label: '用户名称',
      value: userInfo.name
    },
    {
      label: '手机号码',
      value: userInfo.mobile
    },
    {
      label: '电子邮箱',
      value: userInfo.email
    },
    {
      label: '注册时间',
      value: userInfo.regTime
    },
    {
      label: '最近活动',
      value: userInfo.actTime
    }
  ] as DescData[]
})

const userInfo = reactive<{
  userId: string // 用户id
  name: string // 用户名称
  regTime: string // 注册时间
  actTime?: string // 最近活动时间
  mobile?: string // 注册手机号码
  email?: string // 注册邮箱
}>({
  userId: '',
  name: '',
  regTime: '',
  actTime: '',
  mobile: '',
  email: ''
})

/**
 * 获取个人账号信息
 */
const getUserInfo = async () => {
  const result: SelfInfoResParams = await getSelfInfo()
  userInfo.mobile = result.mobile
  userInfo.regTime = result.reg_time
  userInfo.userId = result.user_id
  userInfo.email = result.email || '无'
  userInfo.actTime = result.act_time
  userInfo.name = result.name
}

// 监听子组件修改个人基本信息成功后刷新用户展示数据
useEmitt({
  name: 'get_self_info',
  callback: () => {
    getUserInfo().then(() => console.log('获取个人账号信息'))
  }
})

onMounted(async () => {
  try {
    getUserInfo().then(() => console.log('获取个人账号信息'))
  } catch (e) {
    console.log(e)
  }
})
</script>

<script lang="ts">
export default {
  name: 'Self'
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
}

.wrapper {
  padding: 20px 0 0 20px;
  min-height: 580px;
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

.arco-card {
  padding: 14px 0 4px 4px;
  border-radius: 4px;
}
:deep(.arco-avatar-trigger-icon-button) {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-color: #e8f3ff;
  .arco-icon-camera {
    margin-top: 8px;
    color: rgb(var(--arcoblue-6));
    font-size: 14px;
  }
}

:deep(.section-title) {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 14px;
}
</style>
