<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :formStyle=" {
  border: false,
  colCount: 3,
  vgap: '20px',
  hgap: '20px',
  }"
    :left-tools="leftTools"
    :search-form-props="{
      labelPosition: 'left',
      labelWidth: '100px',
      inline: true,
    }"
    :paging="paging">
    <template #searchFormItem="{ searchForm }">
      <ElFormItem label="项目名称">
        <ElInput
          v-model="searchForm.projectName"
          placeholder="项目名称"/>
      </ElFormItem>
      <ElFormItem label="客户名称">
        <ElInput
          v-model="searchForm.fringeName"
          placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem label="运输方名称">
        <ElInput
          v-model="searchForm.transName"
          placeholder="运输方名称"/>
      </ElFormItem>
      <ElFormItem label="合同有效期">
        <ADtPicker v-model="searchForm.contractTimes" :change-handler="research"/>
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ADtPicker v-model="searchForm.createTimes" :change-handler="research"/>
      </ElFormItem>
    </template>
    <template #simpleSearchFormItem="{ searchForm }">
      <ElFormItem>
        <ElInput
          v-model="searchForm.projectName"
          placeholder="项目名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput
          v-model="searchForm.fringeName"
          placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput
          v-model="searchForm.transName"
          placeholder="运输方名称"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="项目名称" prop="projectName"/>
      <ElTableColumn label="运输方联系人" prop="transCustomerName" width="140px"/>
      <ElTableColumn label="运输方联系电话" prop="transCustomerPhone" width="140px"/>
      <ElTableColumn label="运输企业名称" prop="transOrgName" width="140px"/>
      <ElTableColumn label="客户名称" prop="fringeCustomerName" width="140px"/>
      <ElTableColumn label="客户联系电话" prop="fringeCustomerPhone" width="140px"/>
      <ElTableColumn label="客户企业名称" prop="fringeOrgName" width="140px"/>
      <!-- <ElTableColumn label="详细地址" prop="address" width="240" show-overflow-tooltip/> -->
      <ElTableColumn label="合同有效期" prop="contractStartDate" width="210">
        <template #default="{ row }">
          {{ row.contractStartDate + ' 至 ' + row.contractEndDate ?? '--' }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="创建时间" prop="createTime" width="170"/>
    </template>
    <ProjectForm ref="projectForm" :research="research"/>
    <ProjectDetail ref="projectDetail" @edit-succ="research"/>
  </FormPage>
</template>

<script lang="ts" setup>
import ProjectApi from '@/pages/cst/project/project-api.ts'
import ProjectDetail from '@/pages/cst/project/ProjectDetail.vue'
import ProjectForm from '@/pages/cst/project/ProjectForm.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'
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'

const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
const projectDetailIns = useTemplateRef<InstanceType<typeof ProjectDetail>>('projectDetail')
const projectFormIns = useTemplateRef<InstanceType<typeof ProjectDetail>>('projectForm')

const actionColumn = reactive<ActionColumnType<ProjectTypes.SearchProjectResult>>({
  tableActions: [
    {
      tooltip: '详情',
      icon: 'Postcard',
      action({row}) {
        projectDetailIns.value?.open(row)
      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      projectFormIns.value?.open()
    },
  },
]

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

function paging(params: ProjectTypes.SearchProjectParam) {
  return ProjectApi.paging(params)
}
</script>
