<template>
  <HeadPanl>
    <a-form
      ref="filterFromRef"
      class="filter-form"
      :model="filterState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      @finish="updateList"
    >
      <a-form-item label="项目名称" name="title">
        <a-input
          v-model:value="filterState.title"
          placeholder="请输入项目名称"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="创建人" name="author">
        <a-input
          v-model:value="filterState.author"
          placeholder="请输入项目创建人"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="选择日期" name="time">
        <a-date-picker
          v-model:value="filterState.time"
          style="width: 100%"
          placeholder="选择项目创建日期"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="项目状态" name="state">
        <a-select
          ref="select"
          :value="filterState.state"
          allow-clear
          @update:value="(val: any) => (filterState.state = val === undefined ? all : val)"
        >
          <a-select-option
            v-for="option in statusOptions"
            :key="option.value"
            :value="option.value"
          >
            {{ option.label }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item class="actions">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button style="margin-left: 10px" @click="resetFilter">
          重置
        </a-button>
      </a-form-item>
    </a-form>
  </HeadPanl>
  <BodyPanl title="管理列表">
    <template #action>
      <a-button type="primary" @click="createProject">新建项目</a-button>
    </template>
    <a-table
      :data-source="list"
      :columns="projectColumns"
      :pagination="pagination"
    />
  </BodyPanl>
</template>

<script setup lang="ts">
import InsertProject from './edit.vue'
import { HeadPanl, BodyPanl } from '@/layout/panl'
import { projectColumns } from './columns'
import { reactive, ref } from 'vue'
import { usePaging } from '@/hook'
import { renderModal } from '@/helper'
import { useProject } from '@/store'
import {
  ProjectStatus,
  ProjectStatusDesc,
  all,
  fetchProjects,
  uploadFile,
  insertProject
} from '@/api'

import type { All, InsertProjectData } from '@/api'
import type { FormInstance } from 'ant-design-vue'

const statusOptions = [
  { label: '全部', value: all },
  { label: ProjectStatusDesc[ProjectStatus.done], value: ProjectStatus.done },
  {
    label: ProjectStatusDesc[ProjectStatus.undone],
    value: ProjectStatus.undone
  }
]

type FilterState = {
  title: string
  author: string
  time: string
  state: ProjectStatus | All
}

const filterState: FilterState = reactive({
  title: '',
  author: '',
  time: '',
  state: all
})

const { list, pagination, updateList } = usePaging(fetchProjects, filterState, {
  auto: false
})

const filterFromRef = ref<FormInstance>()
const resetFilter = () => {
  filterFromRef.value!.resetFields()
  updateList()
}

const projectStore = useProject()
const createProject = () => {
  renderModal(InsertProject, {
    async onSave({ projectImg, bimFile, ...data }) {
      const projectData: InsertProjectData = data
      if (projectImg) {
        projectData.projectImg = await uploadFile(projectImg as File)
      }

      const project = await insertProject(projectData)
      if (bimFile) {
        await projectStore.addBim(
          {
            name: bimFile.name,
            file: bimFile
          },
          project.projectId
        )
      }
      await updateList()
    }
  })
}
</script>
