<script setup lang="ts">
  import {
    UnorderedListOutlined,
    PlusSquareOutlined,
    FolderAddOutlined
  } from '@ant-design/icons-vue'
  import ProjectList from './project-list.vue'
</script>

<template>
  <a-tabs class="fly-ui-content">
    <a-tab-pane key="project">
      <template #tab>
        <unordered-list-outlined style="font-size: 18px" />
        <span>项目</span>
      </template>
      <ProjectList />
    </a-tab-pane>
    <a-tab-pane key="create">
      <template #tab>
        <plus-square-outlined style="font-size: 18px" />
        <span>创建</span>
      </template>
    </a-tab-pane>
    <a-tab-pane key="import">
      <template #tab>
        <folder-add-outlined style="font-size: 18px" />
        <span>导入</span>
      </template>
    </a-tab-pane>
  </a-tabs>
</template>

<style lang="scss" scoped>
  .fly-ui-content {
    :deep(.ant-tabs-nav-wrap) {
      justify-content: center;
      background-color: $primary-color;
      .ant-tabs-tab {
        padding: 6px;
        border-radius: $border-radius-base;
        transition: all 0.1s ease;
        &:hover {
          color: $text-color-base;
          background-color: rgba($color: #ffffff, $alpha: 0.5);
        }
      }
      .ant-tabs-tab-btn {
        font-size: $font-size-base;
        font-weight: $font-weight-base;
        user-select: none;
      }
      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        color: #ffffff;
      }
      .ant-tabs-ink-bar {
        background-color: #ffffff;
      }
    }
  }
</style>
