<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="paging">
    <template #searchFormItem="{ searchForm }">
      <ElForm inline @submit.prevent="paging">
        <ElFormItem label="仓库名称">
          <ElInput
            v-model="searchForm.warehouseName"
            placeholder="仓库名称"/>
        </ElFormItem>
        <ElFormItem label="位置">
          <ElInput
            v-model="searchForm.location"
            placeholder="位置"/>
        </ElFormItem>
        <ElFormItem label="创建人 Id； sys_user.id">
          <ElInput
            v-model="searchForm.creatorId"
            placeholder="创建人 Id； sys_user.id"/>
        </ElFormItem>
        <ElFormItem label="修改人 Id；sys_user.id">
          <ElInput
            v-model="searchForm.modifierId"
            placeholder="修改人 Id；sys_user.id"/>
        </ElFormItem>
        <ElFormItem label="创建时间">
          <ElInput
            v-model="searchForm.createTime"
            placeholder="创建时间"/>
        </ElFormItem>
        <ElFormItem label="修改时间">
          <ElInput
            v-model="searchForm.modifyTime"
            placeholder="修改时间"/>
        </ElFormItem>
      </ElForm>
    </template>
    <template #simpleSearchFormItem="{ searchForm }">
      <ElForm inline @submit.prevent="paging">
        <ElFormItem label="仓库名称">
          <ElInput
            v-model="searchForm.warehouseName"
            placeholder="仓库名称"/>
        </ElFormItem>
      </ElForm>
    </template>
    <template #columns>
      <ElTableColumn label="Id" prop="id"/>
      <ElTableColumn label="仓库名称" prop="warehouseName"/>
      <ElTableColumn label="位置" prop="location"/>
      <!-- <ElTableColumn label="创建人 Id； sys_user.id" prop="creatorId"/>
      <ElTableColumn label="修改人 Id；sys_user.id" prop="modifierId"/> -->
      <ElTableColumn label="创建时间" prop="createTime"/>
      <ElTableColumn label="修改时间" prop="modifyTime"/>
      <!-- <ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/> -->
    </template>
    <WarehouseForm ref="warehouseForm" :research="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import WarehouseApi from '@/pages/wh/warehouse/warehouse-api.ts'
import WarehouseForm from '@/pages/wh/warehouse/WarehouseForm.vue'
import FormPage from '@/components/page/FormPage.vue'
import type {
  ActionColumnType,
  ToolType,
} from '@/components/page/a-page-type.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'

const warehouseFormIns = useTemplateRef<InstanceType<typeof WarehouseForm>>('warehouseForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')


const actionColumn = reactive<ActionColumnType<WarehouseTypes.SearchWarehouseResult>>({
  tableActions: [
    {
      tooltip: '编辑',
      icon: 'Edit',
      action({row}) {
        warehouseFormIns.value?.open(row)
      },
    },
    {
      icon: 'Delete',
      loading: false,
      type: 'danger',
      tooltip: '删除',
      confirm: {
        title: '是否删除当前数据',
      },
      action({row}) {
        return WarehouseApi.del([ row.id! ])
          .then(() => {
            ElMessage.success('删除成功')
            return true
          })
      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      warehouseFormIns.value?.open()
    },
  },
]

function research() {
  formPageIns.value?.doSearch()
}

function paging(param: WarehouseTypes.SearchWarehouseParam) {
  return WarehouseApi.paging(param)
}

</script>
