<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="产品" prop="goodsId">
          <GoodsDropTable
            v-model="formData.goodsId"
            :default-biz-type="category===orderCategory.XiaoShouYuYue?bizType.ZaiShengPin:bizType.HuiShouPin"/>
        </ElFormItem>
        <ElFormItem label="项目" prop="projectId">
          <ProjectDropTable
            v-model="formData.projectId"/>
        </ElFormItem>
        <ElFormItem label="产废方" prop="contacts">
          <CustomerDropTable
            v-model="formData.customerId"/>
        </ElFormItem>
        <ElFormItem label="客户姓名" prop="contacts">
          <ElInput
            v-model="formData.contacts"
            placeholder="客户姓名"/>
        </ElFormItem>
        <ElFormItem label="客户电话" prop="phone">
          <ElInput
            v-model="formData.phone"
            placeholder="客户电话"/>
        </ElFormItem>
        <ElFormItem label="运输企业" prop="transOrgId">
          <OrgDropTable
            v-model="formData.transOrgId"/>
        </ElFormItem>
        <ElFormItem label="收纳站点" prop="stationId">
          <StationDropTable
            v-model="formData.stationId"/>
        </ElFormItem>
        <ElFormItem label="预估量" prop="estimatedQuantity">
          <ElInput
            v-model="formData.estimatedQuantity"
            placeholder="预估量"/>
        </ElFormItem>
        <ElFormItem label="预估车数" prop="estimatedTrainNum">
          <ElInput
            v-model="formData.estimatedTrainNum"
            placeholder="预估车数"/>
        </ElFormItem>
        <ElFormItem label="客户备注" prop="customerMemo">
          <ElInput
            v-model="formData.customerMemo"
            placeholder="客户备注"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import OrderApi from '@/pages/order/order-api.ts'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'
import { bizType } from '@/pages/gds/goods-category/constants.ts'
import {
  orderCategory,
  type OrderCategoryType,
} from '@/pages/order/constants.ts'
import ProjectDropTable from '@/pages/cst/project/ProjectDropTable.vue'
import CustomerDropTable from '@/pages/cst/customer/CustomerDropTable.vue'
import GoodsDropTable from '@/pages/gds/goods/GoodsDropTable.vue'
import OrgDropTable from '@/pages/cst/org/OrgDropTable.vue'
import StationDropTable from '@/pages/cst/station/StationDropTable.vue'


const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const category = ref<OrderCategoryType>('HuiShouYuYue')
const formPanelProps = buildFormPanelProps<OrderTypes.SearchOrderResult>({
  title: `新建${orderCategory.txt(category.value)}`,
  detailsLoader() {
    return Promise.resolve({} as OrderTypes.SearchOrderResult)
  },
  doSubmit(data) {
    return OrderApi.add(data)
      .then(props.research)
  },
  rules: () => {
    return {
      contacts: [ {required: true, message: '请填写下单人姓名', trigger: 'blur'} ],
      phone: [ {required: true, message: '请填写下单人联系方式', trigger: 'blur'} ],
      orderCategory: [ {required: true, message: '请填写订单类型', trigger: 'blur'} ],
      transOrgId: [ {required: true, message: '请填写运输企业', trigger: 'blur'} ],
      stationId: [ {required: true, message: '请填写站点', trigger: 'blur'} ],
      transDistance: [ {required: true, message: '请填写运距', trigger: 'blur'} ],
      estimatedQuantity: [ {required: true, message: '请填写预估量', trigger: 'blur'} ],
      estimatedTrainNum: [ {required: true, message: '请填写预估车数', trigger: 'blur'} ],
      goodsId: [ {required: true, message: '请选择产品', trigger: 'blur'} ],
    }
  },
})
defineExpose({
  open(type: OrderCategoryType) {
    category.value = type
    formPanelIns.value?.open()
  },
})
</script>

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

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