<template>
  <FormPage
    ref="formPage"
    :action-column="actionColumn"
    :left-tools="leftTools"
    :paging="paging">
    <template #searchFormItem="{ searchForm }">
      <ElFormItem label="站点名称">
        <ElInput
          v-model="searchForm.stationName"
          placeholder="站点名称"/>
      </ElFormItem>
      <ElFormItem label="省">
        <ElInput
          v-model="searchForm.provinceName"
          placeholder="请输入省"/>
      </ElFormItem>
      <ElFormItem label="市">
        <ElInput
          v-model="searchForm.cityName"
          placeholder="请输入市"/>
      </ElFormItem>
      <ElFormItem label="区县">
        <ElInput
          v-model="searchForm.areaName"
          placeholder="请输入区县"/>
      </ElFormItem>
      <ElFormItem label="乡镇街道">
        <ElInput
          v-model="searchForm.townName"
          placeholder="请输入乡镇街道"/>
      </ElFormItem>
      <ElFormItem label="详细地址">
        <ElInput
          v-model="searchForm.address"
          placeholder="详细地址"/>
      </ElFormItem>
      <ElFormItem label="经度">
        <ElInput
          v-model="searchForm.lng"
          placeholder="经度"/>
      </ElFormItem>
      <ElFormItem label="纬度">
        <ElInput
          v-model="searchForm.lat"
          placeholder="纬度"/>
      </ElFormItem>
      <ElFormItem label="创建时间">
        <ElInput
          v-model="searchForm.createTime"
          placeholder="创建时间"/>
      </ElFormItem>
      <ElFormItem label="修改时间">
        <ElInput
          v-model="searchForm.modifyTime"
          placeholder="修改时间"/>
      </ElFormItem>
    </template>
    <template #columns>
      <ElTableColumn label="所属公司" prop="org.orgName"/>
      <ElTableColumn label="站点名称" prop="stationName"/>
      <ElTableColumn label="省" prop="provinceName"/>
      <ElTableColumn label="市" prop="cityName"/>
      <ElTableColumn label="区县" prop="areaName"/>
      <ElTableColumn label="乡镇街道" prop="townName"/>
      <ElTableColumn label="详细地址" prop="address" width="160px"/>
      <ElTableColumn label="经度" prop="lng" width="100px"/>
      <ElTableColumn label="纬度" prop="lat" width="100px"/>
      <ElTableColumn label="创建时间" prop="createTime" width="170px"/>
      <ElTableColumn label="修改时间" prop="modifyTime" width="170px"/>
    </template>
    <StationForm ref="stationForm" @edit-succ="research"/>
  </FormPage>
</template>

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

const stationFormIns = useTemplateRef<InstanceType<typeof StationForm>>('stationForm')
const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')

const actionColumn = reactive<ActionColumnType<StationTypes.SearchStationResult>>({
  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
          })
      },
    },
  ],
})
const leftTools: ToolType[] = [
  {
    icon: 'Plus',
    label: '新建',
    action() {
      stationFormIns.value?.open()
    },
  },
]

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

function paging(params: StationTypes.SearchStationParam) {
  return StationApi.paging(params)
}

</script>
