<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">
    <template #highFormItem="formData">
      <ElFormItem label="项目名称">
        <ElInput
          v-model="formData.projectName"
          placeholder="项目名称"/>
      </ElFormItem>
      <ElFormItem label="客户名称">
        <ElInput
          v-model="formData.fringeName"
          placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem label="运输方名称">
        <ElInput
          v-model="formData.transName"
          placeholder="运输方名称"/>
      </ElFormItem>
      <ElFormItem label="合同有效期">
        <ADtPicker v-model="formData.contractTimes" :change-handler="research"/>
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ADtPicker v-model="formData.createTimes" :change-handler="research"/>
      </ElFormItem>
    </template>
    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput
          v-model="formData.projectName"
          placeholder="项目名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput
          v-model="formData.fringeName"
          placeholder="客户名称"/>
      </ElFormItem>
      <ElFormItem>
        <ElInput
          v-model="formData.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"/>
  </ATablePage>
</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 ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'

const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
const projectDetailIns = useTemplateRef<InstanceType<typeof ProjectDetail>>('projectDetail')
const projectFormIns = useTemplateRef<InstanceType<typeof ProjectForm>>('projectForm')

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

const tablePageProps = buildTablePageProps<ProjectTypes.SearchProjectParam, ProjectTypes.SearchProjectResult>({
  pageLayout: {
    dataListHeight: 3,
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          projectFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '详情',
          icon: 'Postcard',
          action({row}) {
            projectDetailIns.value?.open(row)
          },
        },
        {
          tooltip: '修改',
          icon: 'Edit',
          type: 'success',
          action({row}) {
            projectFormIns.value?.open(row)
          },
        },
      ],
    },
  },
  searchForm: {
    paging: ProjectApi.paging,
  },
})

</script>
