<template>
  <ElDialog v-model="showDialog"
    :close-on-click-modal="false"
    destroy-on-close
    width="fit-content"
    @close="dialogCloseHandler">
    <ElForm :model="formData"
      :rules="rules"
      ref="orderForm"
      class="form-panel"
      label-width="auto">
       <ElFormItem label-width="90" label="Id" prop="id">
        <ElInput
          v-model="formData.id"
          :disabled="status === 'view'"
          placeholder="Id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="订单编号" prop="sn">
        <ElInput
          v-model="formData.sn"
          :disabled="status === 'view'"
          placeholder="订单编号"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="项目 Id" prop="projectId">
        <ElInput
          v-model="formData.projectId"
          :disabled="status === 'view'"
          placeholder="项目 Id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="下单人 Id；sys_user.id" prop="userId">
        <ElInput
          v-model="formData.userId"
          :disabled="status === 'view'"
          placeholder="下单人 Id；sys_user.id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="下单人客户 Id；cst_customer.id" prop="customerId">
        <ElInput
          v-model="formData.customerId"
          :disabled="status === 'view'"
          placeholder="下单人客户 Id；cst_customer.id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="下单人姓名" prop="contacts">
        <ElInput
          v-model="formData.contacts"
          :disabled="status === 'view'"
          placeholder="下单人姓名"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="下单人联系方式" prop="phone">
        <ElInput
          v-model="formData.phone"
          :disabled="status === 'view'"
          placeholder="下单人联系方式"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="下单时间" prop="orderTime">
        <ElInput
          v-model="formData.orderTime"
          :disabled="status === 'view'"
          placeholder="下单时间"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出" prop="orderCategory">
        <ElInput
          v-model="formData.orderCategory"
          :disabled="status === 'view'"
          placeholder="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消" prop="orderStatus">
        <ElInput
          v-model="formData.orderStatus"
          :disabled="status === 'view'"
          placeholder="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="完结时间" prop="finishTime">
        <ElInput
          v-model="formData.finishTime"
          :disabled="status === 'view'"
          placeholder="完结时间"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="运输组织 Id；cst_org.id" prop="transOrgId">
        <ElInput
          v-model="formData.transOrgId"
          :disabled="status === 'view'"
          placeholder="运输组织 Id；cst_org.id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="运输方客户 Id" prop="transCustomerId">
        <ElInput
          v-model="formData.transCustomerId"
          :disabled="status === 'view'"
          placeholder="运输方客户 Id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="指派清运公司时间" prop="assignmentTransTime">
        <ElInput
          v-model="formData.assignmentTransTime"
          :disabled="status === 'view'"
          placeholder="指派清运公司时间"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="站点 Id；cst_station.id" prop="stationId">
        <ElInput
          v-model="formData.stationId"
          :disabled="status === 'view'"
          placeholder="站点 Id；cst_station.id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="站点名称；cst_station.station.name" prop="stationName">
        <ElInput
          v-model="formData.stationName"
          :disabled="status === 'view'"
          placeholder="站点名称；cst_station.station.name"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="运距；单位：米" prop="transDistance">
        <ElInput
          v-model="formData.transDistance"
          :disabled="status === 'view'"
          placeholder="运距；单位：米"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="预估量" prop="estimatedQuantity">
        <ElInput
          v-model="formData.estimatedQuantity"
          :disabled="status === 'view'"
          placeholder="预估量"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="预估车数" prop="estimatedTrainNum">
        <ElInput
          v-model="formData.estimatedTrainNum"
          :disabled="status === 'view'"
          placeholder="预估车数"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="产品 Id" prop="goodsId">
        <ElInput
          v-model="formData.goodsId"
          :disabled="status === 'view'"
          placeholder="产品 Id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="产品名称" prop="goodsName">
        <ElInput
          v-model="formData.goodsName"
          :disabled="status === 'view'"
          placeholder="产品名称"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="计量单位；字典代码：unit" prop="unit">
        <ElInput
          v-model="formData.unit"
          :disabled="status === 'view'"
          placeholder="计量单位；字典代码：unit"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="客户备注" prop="customerMemo">
        <ElInput
          v-model="formData.customerMemo"
          :disabled="status === 'view'"
          placeholder="客户备注"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="创建人 Id； sys_user.id" prop="creatorId">
        <ElInput
          v-model="formData.creatorId"
          :disabled="status === 'view'"
          placeholder="创建人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="修改人 Id； sys_user.id" prop="modifierId">
        <ElInput
          v-model="formData.modifierId"
          :disabled="status === 'view'"
          placeholder="修改人 Id； sys_user.id"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="创建时间" prop="createTime">
        <ElInput
          v-model="formData.createTime"
          :disabled="status === 'view'"
          placeholder="创建时间"/>
      </ElFormItem>
       <ElFormItem label-width="90" label="修改时间" prop="modifyTime">
        <ElInput
          v-model="formData.modifyTime"
          :disabled="status === 'view'"
          placeholder="修改时间"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import OrderApi from '@/pages/order/book-order/order-api.ts'
import Strings from '@/common/utils/strings.ts'
import FormUtil from '@/common/utils/formUtil.ts'
import Utils from '@/common/utils'
import {
  ElMessage,
  type FormInstance,
  type FormRules,
} from 'element-plus'

const emits = defineEmits(['editSucc'])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')

const orderFormIns = useTemplateRef<FormInstance>('orderForm')

const formData = Utils.resetAble(reactive<OrderTypes.SearchOrderResult>({}))
const rules = reactive<FormRules<OrderTypes.SearchOrderResult>>({
id: [{ required: true, message: '请填写Id', trigger: 'blur' }],
sn: [{ required: true, message: '请填写订单编号', trigger: 'blur' }],
projectId: [{ required: true, message: '请填写项目 Id', trigger: 'blur' }],
userId: [{ required: true, message: '请填写下单人 Id；sys_user.id', trigger: 'blur' }],
customerId: [{ required: true, message: '请填写下单人客户 Id；cst_customer.id', trigger: 'blur' }],
contacts: [{ required: true, message: '请填写下单人姓名', trigger: 'blur' }],
phone: [{ required: true, message: '请填写下单人联系方式', trigger: 'blur' }],
orderTime: [{ required: true, message: '请填写下单时间', trigger: 'blur' }],
orderCategory: [{ required: true, message: '请填写订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出', trigger: 'blur' }],
orderStatus: [{ required: true, message: '请填写订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消', trigger: 'blur' }],
finishTime: [{ required: true, message: '请填写完结时间', trigger: 'blur' }],
transOrgId: [{ required: true, message: '请填写运输组织 Id；cst_org.id', trigger: 'blur' }],
transCustomerId: [{ required: true, message: '请填写运输方客户 Id', trigger: 'blur' }],
assignmentTransTime: [{ required: true, message: '请填写指派清运公司时间', trigger: 'blur' }],
stationId: [{ required: true, message: '请填写站点 Id；cst_station.id', trigger: 'blur' }],
stationName: [{ required: true, message: '请填写站点名称；cst_station.station.name', trigger: 'blur' }],
transDistance: [{ required: true, message: '请填写运距；单位：米', trigger: 'blur' }],
estimatedQuantity: [{ required: true, message: '请填写预估量', trigger: 'blur' }],
estimatedTrainNum: [{ required: true, message: '请填写预估车数', trigger: 'blur' }],
goodsId: [{ required: true, message: '请填写产品 Id', trigger: 'blur' }],
goodsName: [{ required: true, message: '请填写产品名称', trigger: 'blur' }],
unit: [{ required: true, message: '请填写计量单位；字典代码：unit', trigger: 'blur' }],
customerMemo: [{ required: true, message: '请填写客户备注', trigger: 'blur' }],
creatorId: [{ required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur' }],
modifierId: [{ required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur' }],
createTime: [{ required: true, message: '请填写创建时间', trigger: 'blur' }],
modifyTime: [{ required: true, message: '请填写修改时间', trigger: 'blur' }],
deleted: [{ required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur' }],
})

function dialogCloseHandler() {
  formData.$reset()
}

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (formData.id != null) {
  FormUtil.submit(orderFormIns, () => OrderApi.modify(formData))
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
  FormUtil.submit(orderFormIns, () => OrderApi.add(formData))
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data: OrderTypes.SearchOrderResult = {}) {
    showDialog.value = true
    if (!Strings.isBlank(data.id)) {
      status.value = 'modify'
      OrderApi.detail(data.id!)
        .then(res => {
          formData.$reset(res.data)
        })
    } else {
      status.value = 'add'
      formData.$reset(data)
    }
  }
})
</script>

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