<template>
  <div class="custom-layout-head">
    <div class="layout-head-left">
      <span>AI GPT</span>
      <div
        class="layout-chose-button"
        v-for="item in btns"
        :key="item.path"
        @click="changeBtn(item)"
        :class="{ active: item.path === currentBtn }"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="layout-head-right">
      <UserDropdown></UserDropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { watch, ref } from 'vue';
import UserDropdown from './UserDropdown.vue';
const route = useRoute();
const router = useRouter();
const currentBtn = ref(route.path);

watch(
  () => route.path,
  (v) => {
    currentBtn.value = v;
  }
);
const btns = [
  {
    label: '首页',
    path: '/',
  },
  // {
  //   label: '产品',
  //   path: '/Products',
  // },
  // {
  //   label: 'AI聊天',
  //   path: '/AIChat',
  // },
  // {
  //   label: 'AI绘画',
  //   path: '/AIPainting',
  // },
  // {
  //   label: 'AI视频',
  //   path: '/AIVideo',
  // },
  // {
  //   label: '模特穿衣预处理',
  //   path: '/ImgConversion',
  // },
  // {
  //   label: '图片生成_自动化',
  //   path: '/',
  // },
  // {
  //   label: 'GPT对话',
  //   path: '/gpt',
  // },
  // {
  //   label: '图片生成',
  //   path: '/image',
  // },
  // {
  //   label: '图片生成stable',
  //   path: '/Image_stable',
  // },
  {
    label: '图片展示',
    path: '/PhotoGallery',
  },
];
const changeBtn = (item: any) => {
  router.replace({
    path: item.path,
  });
};
</script>

<style lang="less">
@import '@/style/flex.less';
@import '@/style/variables.less';
.custom-layout-head {
  height: 67px;
  background: #181818;
  border-bottom: 1px solid #464646;
  .dja(space-between);
  padding: 0 20px;
  .layout-head-left {
    .da();
    span {
      font-style: normal;
      font-weight: 800;
      font-size: @font-size-40;
      color: #e6e6e6;
      line-height: 48px;
      white-space: nowrap;
    }
    .layout-chose-button {
      margin-left: 50px;
      font-style: normal;
      font-weight: 600;
      font-size: @font-size-18;
      color: #ffffff;
      transition: all 0.1s;
      cursor: pointer;
      white-space: nowrap;
    }
    .active {
      color: #00f9f9;
      transition: all 0.1s;
    }
  }
  .layout-head-right {
    .da();
    .logout {
      background: #fd1753;
      border: none;
      margin-right: 20px;
      --ripple-color: #fd6053 !important;
    }
  }
}
</style>
