<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="项目名称" prop="projectName">
          <ElInput
            v-model="formData.projectName"
            placeholder="项目名称"/>
        </ElFormItem>
        <ElFormItem label="合同图片" prop="contractPicture">
          <ElInput
            v-model="formData.contractPicture"
            placeholder="合同图片"/>
        </ElFormItem>
        <ElFormItem label="运输方" prop="transCustomerId">
          <ElInput
            v-model="formData.transCustomerId"
            placeholder="运输方"/>
        </ElFormItem>

        <ElFormItem label="产废方/购买方" prop="fringeCustomerId">
          <ElInput
            v-model="formData.fringeCustomerId"
            placeholder="产废方/购买方"/>
        </ElFormItem>

        <ElFormItem label="区/县；名称" prop="areaName">
          <ElInput
            v-model="formData.areaName"
            placeholder="区县；名称"/>
        </ElFormItem>
        <ElFormItem label="详细地址" prop="address">
          <ElInput
            v-model="formData.address"
            placeholder="详细地址"/>
        </ElFormItem>
        <ElFormItem label="经度" prop="lng">
          <ElInput
            v-model="formData.lng"
            placeholder="经度"/>
        </ElFormItem>
        <ElFormItem label="纬度" prop="lat">
          <ElInput
            v-model="formData.lat"
            placeholder="纬度"/>
        </ElFormItem>
        <ElFormItem label="合同有效期" prop="contractStartDate">
          <ElInput
            v-model="formData.contractStartDate"
            placeholder="合同有效期"/>
        </ElFormItem>
        <ElFormItem label="合同有效期" prop="contractEndDate">
          <ElInput
            v-model="formData.contractEndDate"
            placeholder="合同有效期"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import ProjectApi from '@/pages/cst/project/project-api.ts'
import Strings from '@/common/utils/strings.ts'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'

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

const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const status = ref<'add' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<ProjectTypes.SearchProjectResult>({
  title: status.value === 'add' ? '新建项目' : '修改项目',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve()
    } else {
      status.value = 'modify'
      return ProjectApi
        .detail(id!)
        .then(res => res.data)
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return ProjectApi.add(data)
        .then(props.research)
    } else {
      return ProjectApi.modify(data)
        .then(props.research)
    }
  },
  rules: {
    projectName: [ {required: true, message: '请填写项目名称', trigger: 'blur'} ],
    contractPicture: [ {required: true, message: '请填写合同图片', trigger: 'blur'} ],
    transCustomerId: [ {required: true, message: '请填写运输方客户', trigger: 'blur'} ],
    transOrgId: [ {required: true, message: '请填写运输方企业', trigger: 'blur'} ],
    fringeCustomerId: [ {required: true, message: '请填写产废方/购买方', trigger: 'blur'} ],
    fringeOrgId: [ {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'} ],
    contractStartDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
    contractEndDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
  },
})

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

<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;

  :deep(.el-form-item) {
  }
}
</style>
