<template>
  <div class="go-items-list">
    <!-- 搜索区域 -->
    <n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue" :size="formSize">
      <n-grid :cols="24" :x-gap="24">
        <n-grid-item :span="6" label="Input" path="name">
          <n-form-item label="名称" path="name">
            <n-input v-model:value="formValue.name" placeholder="输入名称" />
          </n-form-item>
        </n-grid-item>
        <n-grid-item :span="6" label="Select" path="state">
          <n-form-item label="状态" path="state">
            <n-select v-model:value="formValue.state" placeholder="选择状态" :options="statusOptions" />
          </n-form-item>
        </n-grid-item>
        <n-grid-item :span="8">
          <n-button type="primary" @click="handleSearchClick">
            <template #icon>
              <n-icon>
                <SearchIcon />
              </n-icon>
            </template>
            查询
          </n-button>
          <n-button style="margin-left: 20px" @click="handleResetClick">
            <template #icon>
              <n-icon>
                <ReloadSearch />
              </n-icon>
            </template>
            重置
          </n-button>
        </n-grid-item>
      </n-grid>
    </n-form>
    <div v-show="loading">
      <go-loading></go-loading>
    </div>
    <div v-show="!loading">
      <div style="display: flex; flex-direction: row-reverse">
        <n-space>
          <n-button type="primary" @click="handleOpenThreeEditor"> 新增 </n-button>
          <!-- <n-button disabled> 批量操作 </n-button>  -->
        </n-space>
      </div>
      <n-grid style="margin-top: 16px" :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">
          <div style="display: none">{{ index }}</div>
          <project-items-card
            :cardData="item"
            @resize="resizeHandle"
            @delete="deleteHandle(item)"
            @release="releaseHandle(item)"
            @edit="editHandle"
            @inputUpdateCard="inputUpdateHandle"
          ></project-items-card>
        </n-grid-item>
      </n-grid>
    </div>
    <div class="list-pagination">
      <n-pagination
        :page="pagination.page"
        :page-size="pagination.pageSize"
        :item-count="pagination.count"
        :page-sizes="[8, 16, 24, 32]"
        @update:page="changePage"
        @update:page-size="changeSize"
        show-size-picker
      >
        <template #prefix> 共 {{ pagination.count }} 条 </template>
      </n-pagination>
    </div>
  </div>
  <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 { useModalDataInit } from './hooks/useModal.hook'
import { useDataListInit } from './hooks/useData.hook'
import { ref } from 'vue'
import type { FormInst } from 'naive-ui'
import { icon } from '@/plugins'
import { getUUID } from '@/utils/utils'

const { SearchIcon, ReloadSearch } = icon.ionicons5

const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()

const formRef = ref<FormInst | null>(null)

const formSize = ref('medium')

const formValue = ref({
  name: '',
  state: null
})

const statusOptions = ref([
  {
    label: '已发布',
    value: 'yes'
  },
  {
    label: '未发布',
    value: 'no'
  }
])

const {
  loading,
  pagination,
  list,
  changeSize,
  changePage,
  deleteHandle,
  releaseHandle,
  inputUpdateHandle,
  handleSearchClick
} = useDataListInit(formValue.value)

const handleResetClick = () => {
  formValue.value.name = ''
  formValue.value.state = null
  handleSearchClick()
}

const handleOpenThreeEditor = () => {
  const { host, protocol, pathname } = location
  const randomId = getUUID(32)
  window.open(`${protocol}//${host}${pathname}editor/?three_file_uuid=${randomId}&action_type=create`)
}
</script>

<style lang="scss" scoped>
$contentHeight: 250px;
@include go('items-list') {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - #{$--header-height} * 2 - 2px);
  .list-content {
    position: relative;
    height: $contentHeight;
  }
  .list-pagination {
    position: fixed;
    bottom: 30px;
    right: 30px;
  }
}
</style>