<template>
  <nav v-if="isShow" class="navbar w-200 px-8">
    <div class="flex-center pt-28">
      <img src="@/static/imgs/logo.png" class="w-100 h-22" alt="Logo">
    </div>
    <div class="mt-22 h-36 flex-center relative selectbox">
      <el-icon class="absolute top-1 left-16" size="20" style="z-index: 1;">
        <Help />
      </el-icon>
      <el-select v-model="groupValue">
        <el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="mt-28">
      <div class="ml-16 mt-16 mb-4" style="color: #00000066;">创作</div>
      <div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
        :class="indexvalue == 0 ? 'active' : ''" @click="switchTab(0)">
        <el-icon>
          <VideoCameraFilled />
        </el-icon>
        <span>剧本生成短剧</span>
      </div>
    </div>
    <div class="mt-10">
      <div class="ml-16 mt-16 mb-4" style="color: #00000066;">我的</div>
      <div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
        :class="indexvalue == 1 ? 'active' : ''" @click="switchTab(1)">
        <el-icon>
          <Files />
        </el-icon>
        <span>项目</span>
      </div>
      <div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
        :class="indexvalue == 2 ? 'active' : ''" @click="switchTab(2)">
        <el-icon>
          <PieChart />
        </el-icon>
        <span>资产</span>
      </div>
    </div>
    <div class="mt-50">
      <div class="ml-16 mt-16 mb-4" style="color: #00000066;">企业配置</div>
      <div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
        :class="indexvalue == 3 ? 'active' : ''" @click="switchTab(3)">
        <el-icon>
          <Files />
        </el-icon>
        <span>项目</span>
      </div>
      <div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
        :class="indexvalue == 4 ? 'active' : ''" @click="switchTab(4)">
        <el-icon>
          <PieChart />
        </el-icon>
        <span>用量统计</span>
      </div>
      <div class="flex-align-center gap-8 mt-12 cursor-pointer pl-16 h-36 rounded-4"
        :class="indexvalue == 5 ? 'active' : ''" @click="switchTab(5)">
        <el-icon>
          <PieChart />
        </el-icon>
        <span>AI生成水印设置</span>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useAuth } from '../stores/useAuth';
import { VideoCameraFilled, Files, PieChart, Help } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';

const auth = useAuth();
const router = useRouter();
const route = useRoute();
const routeIndexMap: Record<string, number> = {
  '/': 0,
  '/projectlist': 1,
  '/asset': 2,
  '/enterprise/project': 3,
  '/enterprise/usage': 4,
  '/enterprise/watermark': 5,
};
const indexvalue = ref(routeIndexMap[route.path] ?? 0);
const isShow = ref(true)

watch(
  () => route.path,
  (path) => {
    indexvalue.value = routeIndexMap[path] ?? 0;
    isShow.value = !!routeIndexMap[path]
  },
  { immediate: true }
);

const groupList = [{
  value: 'group1',
  label: '哈哈哈大萨达',
},
{
  value: 'group2',
  label: '地址都干啥',
},
];
const groupValue = ref(groupList[0].value);
const tabRouter:any = {
  0: '/',
  1: '/projectlist',
  2: '/asset',
  3: '/enterprise/project',
  4: '/enterprise/usage',
  5: '/enterprise/watermark',
}

const switchTab = (index: number) => {
  indexvalue.value = index;
  router.push(tabRouter[index]);
};
</script>

<style scoped>
.navbar {
  border-right: 1px solid #E6EAED;
  border-top: 1px solid #E6EAED;
  background-color: #F8F9FA;
}

.active {
  background-color: #F3EEFE;
  color: #5337C7;
}

.selectbox {
  border: 1px solid #E6EAED;
  border-radius: 3px;
  overflow: hidden;

  :deep(.el-select__wrapper) {
    box-shadow: none;
    padding-left: 44px;
    line-height: normal;
  }
}
</style>
