<template>
  <div class="go-items-list">
    <n-grid
      :x-gap="20"
      :y-gap="20"
      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"
          @delete="deleteHandle(item.id)"
          @edit="editHandle"
        ></project-items-card>
      </n-grid-item>
    </n-grid>
    <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>
</template>

<script setup lang="ts">
import { ProjectItemsCard } from '../ProjectItemsCard/index'
import { useDataListInit } from './hooks/useData.hook'
import { PageEnum } from '@/enums/pageEnum'
import { fetchPathByName, routerTurnByPath } from '@/utils'
import { useRoute } from 'vue-router';
import { watch } from 'vue';

const route = useRoute();

const { loading, paginat, list, changeSize, changePage, releaseHandle, deleteHandle,fetchList  } = useDataListInit()

  // 打开 modal
const editHandle = (cardData) => {
  if(!cardData) return
  let path = fetchPathByName(PageEnum.BASE_HOME_EDIT_REMOTE_NAME, 'href')
  path = path.replace('#','')
  routerTurnByPath(path, [cardData.id], undefined, false)
}
watch(() => route.fullPath, (newPath) => {
  console.log(`路由切换到 ${newPath}`);
  if(newPath.indexOf('remote/list') != -1){
    fetchList()
  }
});
</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} * 2 - 2px);
  .list-content {
    position: relative;
    height: $contentHeight;
  }
  .list-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
