<template>
  <div class="page py-24 px-32">
    <h1 class="text-30px fw-700 !mb-12">设置</h1>
    <a-breadcrumb separator=">">
      <a-breadcrumb-item>
        <a href="/dashboard">
          <img src="@/assets/images/home.png" class="w-12 h-12" alt="" srcset="" />
        </a>
      </a-breadcrumb-item>
      <a-breadcrumb-item>设置</a-breadcrumb-item>
    </a-breadcrumb>
    <div class="bg-white px-30 leading-60 mt-24 b-b-solid b-b-1px b-b-#E0E0E0">
      <div class="tab-box flex c-999 cursor-pointer list-none fs-20">
        <div class="mr-48" :class="{ active: activeTabIndex === 0 }" @click="handleChangeTab(0)">基础资料</div>
        <div :class="{ active: activeTabIndex === 1 }" @click="handleChangeTab(1)">修改密码</div>
      </div>
    </div>
    <div class="bg-white py-30 px-36 setting-box">
      <div v-show="activeTabIndex === 0">
        <base-info />
      </div>
      <div v-show="activeTabIndex === 1">
        <set-password />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BaseInfo from './components/baseInfo.vue'
import SetPassword from './components/setPassword.vue'

const activeTabIndex = ref<number>(0)
const handleChangeTab = (active: 0 | 1) => {
  activeTabIndex.value = active
}
</script>
<style scoped lang="less">
.setting-box {
  min-height: calc(100vh - 160px);
}
.tab-box {
  > div {
    position: relative;
    font-size: 16px;
    &::after {
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      bottom: 0;
      content: '';
    }
    &.active {
      color: #000;
      font-weight: 500;
      &::after {
        background-color: #444444;
      }
    }
  }
}
</style>
