<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="站点名称" prop="stationName">
          <ElInput v-model="formData.stationName" placeholder="站点名称"/>
        </ElFormItem>
        <ElFormItem label="企业代码" prop="uscc">
          <ElInput v-model="formData.uscc" placeholder="统一社会信用代码"/>
        </ElFormItem>
        <ElFormItem label="企业名称" prop="orgName">
          <ElInput v-model="formData.orgName" placeholder="企业名称"/>
        </ElFormItem>
        <ElFormItem label="管理员账号" prop="userId">
          <UserDropTable v-model="formData.userId" :placeholder="formData.username"/>
        </ElFormItem>
        <ElFormItem label="管理员姓名" prop="customerName">
          <ElInput v-model="formData.customerName" placeholder="管理员姓名"/>
        </ElFormItem>
        <ElFormItem label="管理员电话" prop="phone">
          <ElInput v-model="formData.phone" placeholder="管理员电话"/>
        </ElFormItem>
        <ElFormItem label="地址" prop="address">
          <AMap
            ref="amap"
            v-model:address="formData.address"
            v-model:area="formData.area"
            v-model:areaName="formData.areaName"
            v-model:lat="formData.lat"
            v-model:lng="formData.lng"
            :map-config="{
            lat:appSettingStore.defaultAddress.lat,
            lng:appSettingStore.defaultAddress.lng,
            }"
            class="amap" width="700px"/>
        </ElFormItem>
      </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 AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'
import UserDropTable from '@/pages/sys/user/UserDropTable.vue'
import AMap from '@/components/a-map/AMap.vue'
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'

const appSettingStore = useAppSettingStore()

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})

interface StationFormType {
  id?: string
  // 站点名称
  stationName?: string
  // 省；代码
  province?: string
  // 市；代码
  city?: string
  // 区县；代码
  area?: string
  // 乡镇街道；代码
  town?: string
  // 省；名称
  provinceName?: string
  // 市；名称
  cityName?: string
  // 区县；名称
  areaName?: string
  // 乡镇街道；名称
  townName?: string
  // 详细地址
  address?: string
  // 经度
  lng?: number
  // 纬度
  lat?: number
  // 账号
  userId?: string
  username?: string
  customerName?: string
  phone?: string
  // 统一社会信用代码
  uscc?: string
  // 企业名称
  orgName?: string
}

const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const status = ref<'add' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<StationFormType>({
  labelWidth: '100px',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve()
    } else {
      status.value = 'modify'
      return StationApi
        .detail(id!)
        .then(res => {
          return {
            id: res.data.id,
            stationName: res.data.stationName,
            province: res.data.province,
            city: res.data.city,
            area: res.data.area,
            town: res.data.town,
            provinceName: res.data.provinceName,
            cityName: res.data.cityName,
            areaName: res.data.areaName,
            townName: res.data.townName,
            address: res.data.address,
            lng: res.data.lng,
            lat: res.data.lat,
            userId: res.data.customer.userId,
            username: res.data.customer.username,
            customerName: res.data.customer.customerName,
            phone: res.data.customer.phone,
            uscc: res.data.customer.uscc,
            orgName: res.data.customer.orgName,
          }
        })
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return StationApi.add({
        stationName: data.stationName,
        area: data.area,
        areaName: data.areaName,
        address: data.address,
        lng: data.lng,
        lat: data.lat,
        userId: data.userId,
        customerName: data.customerName,
        phone: data.phone,
        orgInfo: {
          uscc: data.uscc,
          orgName: data.orgName,
        },
      })
        .then(props.research)
    } else {
      return StationApi.modify({
        id: data.id,
        stationName: data.stationName,
        area: data.area,
        areaName: data.areaName,
        address: data.address,
        lng: data.lng,
        lat: data.lat,
        userId: data.userId,
        customerName: data.customerName,
        phone: data.phone,
        orgInfo: {
          uscc: data.uscc,
          orgName: data.orgName,
        },
      })
        .then(props.research)
    }
  },
  rules: {
    stationName: [ {required: true, message: '请填写站点名称', trigger: 'blur'} ],
    userId: [ {required: true, message: '请填选择管理员账号', trigger: 'blur'} ],
    customerName: [ {required: true, message: '请填写管理员姓名', trigger: 'blur'} ],
    phone: [ {required: true, message: '请填写管理员电话', trigger: 'blur'} ],
    orgName: [ {required: true, message: '请填写企业名称', trigger: 'blur'} ],
    uscc: [ {required: true, message: '请填写统一社会信用代码', trigger: 'blur'} ],
    address: [ {required: true, message: '请填选择地址', trigger: 'blur'} ],
  },
})

watchEffect(() => {
  formPanelProps.title = status.value === 'add' ? '新建站点' : '修改站点'
})
defineExpose({
  open(data?: ProjectTypes.SearchProjectResult) {
    formPanelIns.value?.open(data?.id)
  },
})
</script>

<style lang="stylus" scoped>
.form-items {
  grid-template-areas "a1 a4" \
  "a2 a5" \
  "a3 a6" \
  "a7 a7";
  gap 10px

  :deep(.el-form-item) {
    align-items start
  }
  for val, i in (a1 a2 a3 a4 a5 a6 a7) {
    :deep(.el-form-item):nth-child({i+1}) {
      grid-area val
    }
  }
}
</style>
