<template>
  <ATablePage
    ref="tablePage"
    v-bind="tablePageProps">

    <template #simpleFormItem="formData">
      <ElFormItem>
        <ElInput v-model="formData.stationName" clearable placeholder="站点名称" @clear="research"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="站点名称" prop="stationName"/>
      <ElTableColumn label="所属公司" prop="customer.orgName"/>
      <ElTableColumn label="管理员账号" prop="customer.username"/>
      <ElTableColumn label="管理员姓名" prop="customer.customerName"/>
      <ElTableColumn label="管理员电话" prop="customer.phone"/>
      <ElTableColumn label="详细地址" prop="address" show-overflow-tooltip width="200px"/>
    </template>
    <StationForm ref="stationForm" :research="research"/>
  </ATablePage>
</template>

<script lang="ts" setup>
import StationApi from '@/pages/cst/station/station-api.ts'
import StationForm from '@/pages/cst/station/StationForm.vue'
import FormPage from '@/components/page/FormPage.vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
import ATablePage, {
  type ATablePageInstance,
  buildTablePageProps,
} from '@/components/a-page/a-table-page/ATablePage.tsx'

const stationFormIns = useTemplateRef<InstanceType<typeof StationForm>>('stationForm')
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')

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

const tablePageProps = buildTablePageProps<StationTypes.SearchStationParam, StationTypes.SearchStationResult>({
  pageLayout: {
    enableHighForm: false,
  },
  toolBar: {
    leftTools: [
      {
        icon: 'Plus',
        label: '新建',
        action() {
          stationFormIns.value?.open()
        },
      },
    ],
  },
  table: {
    actionColumn: {
      tableActions: [
        {
          tooltip: '编辑',
          icon: 'Edit',
          action({row}) {
            stationFormIns.value?.open(row)
          },
        },
        /* {
         icon: 'Delete',
         loading: false,
         type: 'danger',
         tooltip: '删除',
         confirm: {
         title: '是否删除当前数据',
         },
         action({row}) {
         return StationApi.del([ row.id! ])
         .then(() => {
         ElMessage.success('删除成功')
         return true
         })
         },
         }, */
      ],
    },
  },
  searchForm: {
    highForm: {
      contentWidth: 342,
    },
    paging: StationApi.paging,
  },
})


const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

</script>
