<template>
  <div class="go-items-list">
    <div class="filter">
      <a-radio-group :value="state" button-style="solid"  @change="changeState">
        <a-radio-button value="0">全部</a-radio-button>
        <a-radio-button value="1">已发布</a-radio-button>
        <a-radio-button value="-1">未发布</a-radio-button>
      </a-radio-group>
      <div class="layout-button">
        <div @click="clickHandle">
          <n-button 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="createModalShow" @close="closeHandle"></CreateModal>
    </div>
    <!-- 加载 -->
    <div v-show="loading">
      <go-loading></go-loading>
    </div>
    <!-- 列表 -->
    <div v-show="!loading" style="height: calc(100vh - 230px); overflow: auto;">
      <n-grid :x-gap="20" :y-gap="18" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
        <n-grid-item v-for="(item, index) in list" :key="item.id">
          <project-items-card
            :cardData="item"
            @preview="previewHandle"
            @resize="resizeHandle"
            @delete="deleteHandle(item)"
            @release="releaseHandle(item, index)"
            @edit="editHandle"
          ></project-items-card>
        </n-grid-item>
      </n-grid>
    </div>

    <!-- 分页 -->
    <div class="list-pagination">
      <n-pagination
        :page="paginat.page"
        :page-size="paginat.limit"
        :item-count="paginat.count"
        :page-sizes="[12, 24, 36, 48]"
        @update:page="changePage"
        @update:page-size="changeSize"
        show-size-picker
      />
    </div>
  </div>

  <!-- model -->
  <project-items-modal-card
    v-if="modalData"
    :modalShow="modalShow"
    :cardData="modalData"
    @close="closeModal"
    @edit="editHandle"
  ></project-items-modal-card>
</template>

<script setup lang="ts">
  import { ProjectItemsCard } from '../ProjectItemsCard/index';
  import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index';
  import { icon } from '@/plugins';
  import { useModalDataInit } from './hooks/useModal.hook';
  import { useDataListInit } from './hooks/useData.hook';
  import { router } from '@/router';
  import { PageEnum } from '@/enums/pageEnum';
  import { ref } from 'vue'
  import { useDesignStore } from '@/store/modules/designStore/designStore';
  import { CreateModal } from '@/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index';
  const { DuplicateIcon, DuplicateOutlineIcon } = icon.ionicons5;

  const { modalData, modalShow, closeModal, previewHandle, resizeHandle, editHandle } =
    useModalDataInit();
  const { loading, paginat, list, state, changeSize, changePage, releaseHandle, deleteHandle, changeState } =
    useDataListInit();

  const designStore = useDesignStore();
  const createModalShow = ref(false)
  const goHomeHandle = () => {
    router.replace(PageEnum.BASE_HOME);
  };
  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();
    // }
    createModalShow.value = true;
  };
  const closeHandle = () => {
    createModalShow.value = false;
  };
</script>

<style lang="scss" scoped>
  $contentHeight: 250px;
  @include go('items-list') {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - #{$--header-height} - 40px - 40px);
    .list-content {
      position: relative;
      height: $contentHeight;
    }
    .list-pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
    .filter{
      display: flex;
      justify-content: start;
      margin-bottom: 10px;
      .layout-button{
        margin-left: 30px;
      }
    }
  }
</style>
