<template>
  <div class="base-side-nav w-240 bg-white py-40">
    <div class="user-info flex items-center flex-col">
      <div class="avatar">
        <a-avatar :size="64" v-if="!userStore.userInfo.photo">
          <template #icon><UserOutlined /></template>
        </a-avatar>
        <img v-else :src="userStore.userInfo.photo" class="w-64 h-64px b-rd-50% overflow-hidden object-cover"/>
      </div>
      <div class="user-name my-8">{{ userStore.userInfo.name }}</div>
      <div class="level flex items-center ml10 cursor-pointer font-bold" @click="showLevel">
        <!-- <i-custom-vip class="w-20 h-20 mr-5" /> -->
        <!-- {{ userStore.userInfo?.rank?.name }} -->
      </div>
    </div>
    <div class="nav-list mt-50">
      <router-link
        v-for="item in routerList.filter((item) => item.meta && item.show)"
        :key="item.path"
        :to="item.path"
        class="nav-item c-aaa"
        active-class="active color-primary"
      >
        <i-custom-home v-if="item.icon === 'home'" class="w-20 h-20 mr-16" />
        <i-custom-brand v-if="item.icon === 'brand'" class="w-20 h-20 mr-16" />
        <i-custom-brand v-if="item.icon === 'overSea'" class="w-20 h-20 mr-16" />
        <i-custom-product v-if="item.icon === 'product'" class="w-20 h-20 mr-16" />
        <i-custom-order v-if="item.icon === 'order'" class="w-20 h-20 mr-16" />
        <i-custom-message v-if="item.icon === 'message'" class="w-20 h-20 mr-16" />
        <i-custom-person v-if="item.icon === 'person'" class="w-20 h-20 mr-16" />
        <!--          <component class="nav-icon w-28" :is="`i-custom-${item.icon}`"></component>-->
        <!--          <component class="nav-icon w-28" :is="`i-custom-${item.icon}`"></component>-->
        <span>{{ item.meta.title }}</span>
      </router-link>
    </div>
  </div>
  <a-modal v-model:open="levelVisible" :footer="false" width="900px">
    <template #title>
      <div class="flex">
        您当前的等级为：
        <span class="flex items-center c-primary">
          <i-custom-vip class="w-20 h-20 mr-5" />
          <span class="font-bold">
            {{ userStore.userInfo.rank.name }}
          </span>
        </span>
      </div>
    </template>
    <div class="pt-10">
      <a-table
        class="level-table"
        :columns="columns"
        :data-source="levelList"
        :pagination="false"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : '')"
      >
        <template #bodyCell="{ column, value, record }">
          <div class="fs-16 c-primary fw-700" v-if="column.dataIndex === 'name'">
            {{ value }}
          </div>
          <div class="fs-16 c-primary fw-700" v-if="column.dataIndex === 'brandQuantityLimit'">
            {{ value }}
          </div>
          <div class="fs-16 c-primary fw-700" v-if="column.dataIndex === 'singleBrandProductLimit'">
            {{ value }}
          </div>
          <div class="fs-16 c-primary fw-700" v-if="column.dataIndex === 'annualFee'">
            {{ toUSD(value) }}
          </div>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>
<script setup>
import routerList from 'Routes'
import { UserOutlined } from '@ant-design/icons-vue'
import useUserStore from '@/store/modules/user'
import { apiRanks } from '@/api/common'
import { toUSD } from '@/utils'
const userStore = useUserStore()
const levelList = ref([])
const levelVisible = ref(false)
const columns = [
  {
    title: '供应商等级',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '可维护品牌数上限',
    dataIndex: 'brandQuantityLimit',
    align: 'center',
  },
  {
    title: '单品牌可维护商品数上限',
    dataIndex: 'singleBrandProductLimit',
    align: 'center',
  },
  {
    title: '年费（RMB元/年）',
    dataIndex: 'annualFee',
    align: 'center',
  },
]
const showLevel = () => {
  apiRanks().then((res) => {
    console.log(res)
    if (res?.data?.code === 200) {
      levelList.value = res.data.result
    }
  })
  levelVisible.value = true
}
</script>
<style lang="less" scoped>
@import '../../assets/styles/variables.less';
.base-side-nav {
  .user-info {
    .avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .user-name {
      font-size: 14px;
      font-weight: 600;
    }
  }

  .nav-list {
    .nav-item {
      display: flex;
      align-items: center;
      text-decoration: none;
      padding: 20px 40px;
      border-radius: 6px;
      transition: 0.3s;

      .nav-icon {
        margin-right: 5px;
      }

      &.active,
      &:hover {
        color: #fff;
        background-color: @color-new-primary;
      }

      .nav-item:hover {
        color: #409eff;
      }
    }
  }
}
</style>
