<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="归属客户" prop="customerId">
          <ElInput
            v-model="formData.customerId"
            placeholder="归属客户"/>
        </ElFormItem>
        <ElFormItem label="归属企业" prop="orgId">
          <ElInput
            v-model="formData.orgId"
            placeholder="归属企业"/>
        </ElFormItem>
        <ElFormItem label="车牌" prop="licensePlate">
          <ElInput
            v-model="formData.licensePlate"
            placeholder="车牌"/>
        </ElFormItem>
        <ElFormItem label="行驶证图片" prop="truckLicense">
          <Uploader ref="truckLicenseUploader" v-model:file="formData.truckLicense"/>
        </ElFormItem>
        <ElFormItem label="车架号" prop="vnCode">
          <ElInput
            v-model="formData.vnCode"
            placeholder="车架号"/>
        </ElFormItem>
        <ElFormItem label="合格证图片" prop="qualification">
          <Uploader ref="qualificationUploader" v-model:file="formData.qualification"/>
        </ElFormItem>
        <ElFormItem label="最大载重" prop="carryingCapacity">
          <ElInput
            v-model="formData.carryingCapacity"
            placeholder="最大载重"/>
        </ElFormItem>
        <ElFormItem label="皮重" prop="tareWeight">
          <ElInput
            v-model="formData.tareWeight"
            placeholder="皮重"/>
        </ElFormItem>
        <ElFormItem label="行驶证有效期" prop="licenseStartDate">
          <ElInput
            v-model="formData.licenseStartDate"
            placeholder="行驶证有效期"/>
        </ElFormItem>
        <ElFormItem label="行驶证有效期" prop="licenseEndDate">
          <ElInput
            v-model="formData.licenseEndDate"
            placeholder="行驶证有效期"/>
        </ElFormItem>
        <ElFormItem label="合格证有效期" prop="qualificationStartDate">
          <ElInput
            v-model="formData.qualificationStartDate"
            placeholder="合格证有效期"/>
        </ElFormItem>
        <ElFormItem label="合格证有效期" prop="qualificationEndDate">
          <ElInput
            v-model="formData.qualificationEndDate"
            placeholder="合格证有效期"/>
        </ElFormItem>
        <ElFormItem label="车辆类型" prop="truckCategory">
          <ElInput
            v-model="formData.truckCategory"
            placeholder="车辆类型"/>
        </ElFormItem>
        <ElFormItem label="车辆图片" prop="picture">
          <Uploader ref="pictureUploader" v-model:file="formData.picture"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

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

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

const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
// const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
const status = ref<'add' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<TruckTypes.SearchTruckResult>({
  title: status.value === 'add' ? '新建产品分类' : '修改产品分类',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve({})
    } else {
      status.value = 'modify'
      return TruckApi
        .detail(id!)
        .then(res => res.data)
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return TruckApi.add(data)
        .then(props.research)
    } else {
      return TruckApi.modify(data)
        .then(props.research)
    }
  },
  rules: () => {
    return {
      customerId: [ {required: true, message: '请填写归属客户 Id；cst_customer.id', trigger: 'blur'} ],
      orgId: [ {required: true, message: '请填写归属企业', trigger: 'blur'} ],
      licensePlate: [ {required: true, message: '请填写车牌', trigger: 'blur'} ],
      truckLicense: [ {required: true, message: '请填写行驶证图片', trigger: 'blur'} ],
      vnCode: [ {required: true, message: '请填写车架号', trigger: 'blur'} ],
      qualification: [ {required: true, message: '请填写合格证图片', trigger: 'blur'} ],
      carryingCapacity: [ {required: true, message: '请填写最大载重；单位：千克', trigger: 'blur'} ],
      tareWeight: [ {required: true, message: '请填写皮重；单位：千克', trigger: 'blur'} ],
      licenseStartDate: [ {required: true, message: '请填写行驶证有效期', trigger: 'blur'} ],
      licenseEndDate: [ {required: true, message: '请填写行驶证有效期', trigger: 'blur'} ],
      qualificationStartDate: [ {required: true, message: '请填写合格证有效期', trigger: 'blur'} ],
      qualificationEndDate: [ {required: true, message: '请填写合格证有效期', trigger: 'blur'} ],
      truckCategory: [ {required: true, message: '请填写车辆类型', trigger: 'blur'} ],
      picture: [ {required: true, message: '请填写车辆图片', trigger: 'blur'} ],
      busy: [ {required: true, message: '请填写忙碌中', trigger: 'blur'} ],
    }
  },
})

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

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

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