<template>
  <AFormPanel
    ref="formPanel"
    :details-loader="detailsLoader"
    :do-submit="doSubmit"
    :rules="rules"
    :title="status === 'add' ? '新建站点' : '修改站点'"
  >
    <template #default="{formData}">
      <div class="form-items">
        <ElFormItem label="企业信息 Id" prop="orgId">

        </ElFormItem>
        <ElFormItem label="站点名称" prop="stationName">
          <ElInput v-model="formData.stationName" placeholder="站点名称"/>
        </ElFormItem>
        <!-- <ElFormItem  label="省；代码" prop="province">
          <ElInput v-model="formData.province"  placeholder="省；代码" />
        </ElFormItem>
        <ElFormItem  label="市；代码" prop="city">
          <ElInput v-model="formData.city"  placeholder="市；代码" />
        </ElFormItem>
        <ElFormItem  label="区县；代码" prop="area">
          <ElInput v-model="formData.area"  placeholder="区县；代码" />
        </ElFormItem>
        <ElFormItem  label="乡镇街道；代码" prop="town">
          <ElInput v-model="formData.town"  placeholder="乡镇街道；代码" />
        </ElFormItem> -->
        <ElFormItem label="详细地址" prop="address">
        </ElFormItem>
        <ElFormItem label="省" prop="provinceName">
          <ElInput v-model="formData.provinceName" placeholder="省"/>
        </ElFormItem>
        <ElFormItem label="市" prop="cityName">
          <ElInput v-model="formData.cityName" placeholder="市"/>
        </ElFormItem>
        <ElFormItem label="区县" prop="areaName">
          <ElInput v-model="formData.areaName" placeholder="区县"/>
        </ElFormItem>
        <ElFormItem label="乡镇街道" prop="townName">
          <ElInput v-model="formData.townName" placeholder="乡镇街道"/>
        </ElFormItem>

        <ElFormItem label="经度" prop="lng">
          <ElInput v-model="formData.lng" placeholder="经度"/>
        </ElFormItem>
        <ElFormItem label="纬度" prop="lat">
          <ElInput v-model="formData.lat" placeholder="纬度"/>
        </ElFormItem>

        <div id="container" style="width: 100%; height: 400px"></div>

      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import StationApi from '@/pages/cst/station/station-api.ts'
import Strings from '@/common/utils/strings.ts'
import { type FormRules } from 'element-plus'
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
import type { ComponentExposed } from 'vue-component-type-helpers'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
const status = ref<'add' | 'modify'>('add')

const rules = reactive<FormRules<StationTypes.SearchStationResult>>({
  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
  orgId: [ {required: true, message: '请填写企业信息 Id', trigger: 'blur'} ],
  stationName: [ {required: true, message: '请填写站点名称', trigger: 'blur'} ],
  province: [ {required: true, message: '请填写省；代码', trigger: 'blur'} ],
  city: [ {required: true, message: '请填写市；代码', trigger: 'blur'} ],
  area: [ {required: true, message: '请填写区县；代码', trigger: 'blur'} ],
  town: [ {required: true, message: '请填写乡镇街道；代码', trigger: 'blur'} ],
  provinceName: [ {required: true, message: '请填写省', trigger: 'blur'} ],
  cityName: [ {required: true, message: '请填写市', trigger: 'blur'} ],
  areaName: [ {required: true, message: '请填写区县', trigger: 'blur'} ],
  townName: [ {required: true, message: '请填写乡镇街道', trigger: 'blur'} ],
  address: [ {required: true, message: '请填写详细地址', trigger: 'blur'} ],
  lng: [ {required: true, message: '请填写经度', trigger: 'blur'} ],
  lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
  creatorId: [ {required: true, message: '请填写创建人', trigger: 'blur'} ],
  modifierId: [ {required: true, message: '请填写修改人', trigger: 'blur'} ],
  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
  deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
})


function detailsLoader(id?: string) {
  if (Strings.isBlank(id)) {
    status.value = 'add'
    return Promise.resolve()
  } else {
    status.value = 'modify'
    return StationApi
      .detail(id!)
      .then(res => res.data)
  }
}

function doSubmit(data: ProjectTypes.SearchProjectResult) {
  if (status.value === 'add') {
    return StationApi.add(data)
      .then(props.research)
  } else {
    return StationApi.modify(data)
      .then(props.research)
  }
}

defineExpose({
  open(data?: ProjectTypes.SearchProjectResult) {
    formPanelIns.value?.open(data?.id)
  },
})
</script>

<style lang="stylus" scoped>
.form-panel {
  padding 20px
}
</style>
