<template>
  <div class="custom-layout-head">
    <div class="layout-head-left">
      <LeftSvg></LeftSvg>
      <span>AI</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">
      <t-button v-if="token" class="logout" @click="logout"> 退出 </t-button>
      <RightSvg></RightSvg>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LeftSvg from '@/assets/svg/header/headerLeft.svg?component';
import RightSvg from '@/assets/svg/header/headerRight.svg?component';
import { ref } from '@vue/reactivity';
import { computed } from '@vue/runtime-core';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { useLogout } from '@/utils/api/userApi';
import { MessagePlugin, Button as TButton } from 'tdesign-vue-next';
import { watch } from 'vue';
const store = useStore();
const token = computed(() => store.getters['user/token']);
const route = useRoute();
const router = useRouter();
const currentBtn = ref(route.path);
watch(
  () => route.path,
  (v) => {
    currentBtn.value = v;
  }
);
const btns = [
  {
    label: '图片生成_自动化',
    path: '/',
  },
  // {
  //   label: 'GPT对话',
  //   path: '/gpt',
  // },
  {
    label: '图片生成',
    path: '/image',
  },
  {
    label: '图片生成stable',
    path: '/Image_stable',
  },
];
const logout = async () => {
  try {
    let res: any = await useLogout();
    if (res.code == 0) {
      store.commit('user/removeToken');
      MessagePlugin.success('退出成功');
      router.replace({
        path: '/',
      });
    }
  } catch (e) {
    console.log(e);
  }
};
const changeBtn = (item: any) => {
  currentBtn.value = item.path;
  router.replace({
    path: item.path,
  });
};
</script>

<style lang="less">
@import '@/style/flex.less';
.custom-layout-head {
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #dbdbdb;
  .dja(space-between);
  padding: 0 12px;
  .layout-head-left {
    .da();
    span {
      font-weight: 700;
      font-size: 24px;
    }
    .layout-chose-button {
      margin-left: 80px;
      font-size: 18px;
      color: #413f3f;
      transition: all 0.1s;
      cursor: pointer;
    }
    .active {
      color: #fd1753;
      font-size: 20px;
      font-weight: 600;
      transition: all 0.1s;
    }
  }
  .layout-head-right {
    .da();
    .logout {
      background: #fd1753;
      border: none;
      margin-right: 20px;
      --ripple-color: #fd6053 !important;
    }
  }
}
</style>
