<template>
  <HeadPanl>
    <a-form
      ref="filterFromRef"
      class="filter-form"
      :model="filterState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      @finish="updateList"
    >
      <a-form-item :label="$t('project.projectNameLabel')" name="projectName">
        <a-input
          v-model:value="filterState.projectName"
          :placeholder="$t('project.projectNamePleac')"
          allow-clear
        />
      </a-form-item>
      <a-form-item
        :label="$t('project.projectCreaterLabel')"
        name="projectCreater"
      >
        <a-input
          v-model:value="filterState.projectCreater"
          :placeholder="$t('project.projectCreaterPleac')"
          allow-clear
        />
      </a-form-item>
      <a-form-item :label="$t('sys.selectTime')" name="day">
        <a-config-provider :locale="lang === langNameEum.zh ? zh : en">
          <a-date-picker
            v-model:value="filterState.day"
            style="width: 100%"
            :placeholder="$t('project.dayPleac')"
            allow-clear
          />
        </a-config-provider>
      </a-form-item>
      <a-form-item
        :label="$t('project.projectStatusLabel')"
        name="projectStatus"
      >
        <a-select
          ref="select"
          :value="filterState.projectStatus"
          allow-clear
          @update:value="(val: any) => (filterState.projectStatus = 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">{{
          $t('sys.search')
        }}</a-button>
        <a-button style="margin-left: 10px" @click="resetFilter">
          {{ $t('sys.reset') }}
        </a-button>
      </a-form-item>
    </a-form>
  </HeadPanl>
  <BodyPanl :title="$t('project.manageList')">
    <template #action>
      <a-button type="primary" @click="createProject">{{
        $t('project.addTitle')
      }}</a-button>
    </template>
    <a-table
      :scroll="{ x: '100%', y: 490 }"
      :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 { computed, reactive, ref, watch } from 'vue'
import { usePaging } from '@/hook'
import { renderModal } from '@/helper'
import { useProject, useUserStore } from '@/store'
import {
  ProjectStatus,
  ProjectStatusDesc,
  all,
  fetchProjects,
  uploadFile,
  insertProject
} from '@/api'

import type { All, InsertProjectData } from '@/api'
import type { FormInstance } from 'ant-design-vue'
import type { Dayjs } from 'dayjs'
import { ui18n, lang, langNameEum } from '@/lang'
import zh from 'ant-design-vue/es/locale/zh_CN'
import en from 'ant-design-vue/es/locale/en_US'

const statusOptions = [
  { label: ui18n.t('sys.all'), value: all },
  { label: ProjectStatusDesc[ProjectStatus.done], value: ProjectStatus.done },
  {
    label: ProjectStatusDesc[ProjectStatus.undone],
    value: ProjectStatus.undone
  }
]

type FilterState = {
  projectName: string
  projectCreater: string
  day?: Dayjs
  projectStatus: ProjectStatus | All
}

const filterState: FilterState = reactive({
  projectName: '',
  projectCreater: '',
  projectStatus: all
})

const { list, pagination, updateList } = usePaging(
  fetchProjects,
  computed(() => ({
    ...filterState,
    day: filterState.day?.format('YYYY-MM-DD'),
    projectStatus:
      filterState.projectStatus === all ? undefined : filterState.projectStatus
  })),
  {
    auto: false
  }
)
watch(filterState, () => (pagination.current = 1), {
  deep: true,
  flush: 'sync'
})

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 useUserStore().fetchMeta()
      await updateList()
    }
  })
}
</script>
