<template>
  <div class="layout-button">
    <div @click="goHomeHandle">
      <n-tooltip placement="right" trigger="hover">
        <template #trigger>
          <n-button ghost type="primary" size="small">
            <template #icon>
              <n-icon>
                <home-icon />
              </n-icon>
            </template>
          </n-button>
        </template>
        <span> 后台管理 </span>
      </n-tooltip>
    </div>
    <div @click="clickHandle">
      <n-tooltip v-if="collapsed" placement="right" trigger="hover">
        <template #trigger>
          <n-button ghost type="primary" size="small">
            <template #icon>
              <n-icon>
                <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
                <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateIcon>
              </n-icon>
            </template>
          </n-button>
        </template>
        <span>
          {{ $t('project.create_btn') }}
        </span>
      </n-tooltip>
      <n-button v-else ghost type="primary">
        <template #icon>
          <n-icon>
            <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
            <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateIcon>
          </n-icon>
        </template>
        <span>
          {{ $t('project.create_btn') }}
        </span>
      </n-button>
    </div>
  </div>
  <CreateModal :show="modalShow" @close="closeHandle"></CreateModal>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { useDesignStore } from '@/store/modules/designStore/designStore';
  import { CreateModal } from './components/CreateModal/index';
  import { icon } from '@/plugins';
  import { fetchPathByName, routerTurnByPath, getUUID } from '@/utils';
  import { ChartEnum, PageEnum } from '@/enums/pageEnum';
  import { createProjectApi } from '@/api/path';
  import { router } from '@/router';

  const { HomeIcon } = icon.ionicons5;
  const { DuplicateIcon, DuplicateOutlineIcon } = icon.ionicons5;
  const designStore = useDesignStore();

  const props = defineProps({
    collapsed: Boolean,
  });

  const modalShow = ref<boolean>(false);

  const clickHandle = async() => {
    // 新增项目
    // const res = await createProjectApi({
    //   // 项目名称
    //   projectName: getUUID(),
    //   // remarks
    //   remarks: null,
    //   // 图片地址
    //   indexImage: null,
    // });
    // if (res) {
    //   console.log(res);
    //   const { id } = res;
    //   window['$message'].success('新建成功');
    //   const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href');
    //   routerTurnByPath(path, [id], undefined, true);
    //   closeHandle();
    // }
    modalShow.value = true;
  };

  const closeHandle = () => {
    modalShow.value = false;
  };
  const goHomeHandle = () => {
    router.replace(PageEnum.BASE_HOME);
  };
</script>
<style lang="less" scoped>
  .layout-button {
    display: flex;
    align-items: center;
    div:first-child {
      margin-right: 10px;
    }
  }
</style>
