<template>
  <KlNavTab />
  <div class="ma-auto w-[1198px] flex justify-between">
    <div class="left mt-[25px] box-border h-[370px] w-[260px] border border-[#EEEEEE] rounded-[4px] border-solid bg-[#FFFFFF] text-[15px] text-[#333333] font-medium">
      <nuxt-link to="/personal-Center/info" class="flex items-center justify-between py-[14px]">
        <div class="flex items-center pl-[20px]">
          <img v-if="route.path.startsWith('/personal/center/info')" src="~/assets/images/user3.png" alt="" srcset="" class="h-[20px]" />
          <img v-else src="~/assets/images/个人.png" alt="" srcset="" class="h-[20px]" />
          <span class="ml-[10px]">个人中心</span>
        </div>
        <div class="pr-[20px]">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </nuxt-link>

      <nuxt-link to="/personal-Center/personal-profile" class="flex items-center justify-between py-[14px]">
        <div class="flex items-center pl-[20px]">
          <img v-if="!route.path.startsWith('/personal/profile')" src="~/assets/images/user_zl.png" alt="" srcset="" class="h-[16px]" />
          <img v-else src="~/assets/images/个人资料 (1).png" alt="" srcset="" class="h-[16px]" />
          <span class="ml-[10px]">个人资料</span>
        </div>
        <div class="pr-[20px]">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </nuxt-link>
      <nuxt-link to="/personal-Center/account-security" class="flex items-center justify-between py-[14px]">
        <div class="flex items-center pl-[20px]">
          <img v-if="!route.path.startsWith('/personal/account/security')" src="~/assets/images/account.png" alt="" srcset="" class="h-[20px]" />
          <img v-else src="~/assets/images/账户安全.png" alt="" srcset="" class="h-[20px]" />
          <span class="ml-[14px]">账户与安全</span>
        </div>
        <div class="pr-[20px]">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </nuxt-link>
      <nuxt-link to="/personal-Center/resource-center" class="flex items-center justify-between py-[14px]">
        <div class="flex items-center pl-[20px]">
          <img v-if="!route.path.startsWith('/personal/resource/center')" src="~/assets/images/ziyuan.png" alt="" srcset="" class="h-[18px]" />
          <img v-else src="~/assets/images/资源.png" alt="" srcset="" class="h-[18px]" />
          <span class="ml-[12px]">资源中心</span>
        </div>
        <div class="pr-[20px]">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </nuxt-link>
      <nuxt-link to="/personal-Center/trading-center" class="flex items-center justify-between py-[14px]">
        <div class="flex items-center pl-[20px]">
          <img v-if="!route.path.startsWith('/personal/trading/center')" src="~/assets/images/pay.png" alt="" srcset="" class="h-[20px]" />
          <img v-else src="~/assets/images/交易管理.png" alt="" srcset="" class="h-[20px]" />
          <span class="ml-[12px]">交易中心</span>
        </div>
        <div class="pr-[20px]">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </nuxt-link>
      <nuxt-link to="/personal-Center/message-center" class="flex items-center justify-between py-[14px]">
        <div class="flex items-center pl-[20px]">
          <img v-if="!route.path.startsWith('/personal/center/message')" src="~/assets/images/message.png" alt="" srcset="" class="h-[18px]" />
          <img v-else src="~/assets/images/消息.png" alt="" srcset="" class="h-[18px]" />
          <span class="ml-[14px]">消息通知</span>
        </div>
        <div class="pr-[20px]">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </nuxt-link>
    </div>
    <div class="right mt-[25px]">
      <NuxtPage />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ArrowRight } from '@element-plus/icons-vue'
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
</script>

<style scoped lang="scss">
  .router-link-active {
    color: #1a65ff;
    background: rgb(203, 221, 255);
    position: relative;
    &::before {
      position: absolute;
      left: 0;
      content: '';
      width: 4px;
      height: 50px;
      background: #1a65ff;
    }
  }
</style>
