<template>
  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
    <ElForm :model="formData" :rules="rules" ref="transForm" class="form-panel" label-width="auto">
      <ElFormItem label="磅重" prop="weight">
        <ElInput v-model="formData.weight" placeholder="请输入磅重" type="number">
          <template #append>吨</template>
        </ElInput>
      </ElFormItem>

      <ElFormItem label="车头照" prop="cargoPhoto">
        <Uploader v-model:file="formData.cargoPhoto"
          :upload-props="{
          accept: 'image/*',
          listType:'picture-card'
        }"/>
      </ElFormItem>

      <ElFormItem label="车斗照" prop="bodyPhoto">
        <Uploader v-model:file="formData.bodyPhoto"
          :upload-props="{
          accept: 'image/*',
          listType:'picture-card'
        }"/>
      </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 TransApi from '@/pages/order/trans-order/trans-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'
import Uploader from '@/components/uploader/Uploader.vue'

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

const transFormIns = useTemplateRef<FormInstance>('transForm')

const formData = Utils.resetAble(reactive<TransTypes.InOutResult>({
  weight: 0,
}))
const rules = reactive<FormRules<TransTypes.InOutResult>>({
  orderTransId: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
  cargoPhoto: [ {required: true, message: '请上传车头照', trigger: 'blur'} ],
  bodyPhoto: [ {required: true, message: '请上传车尾照', trigger: 'blur'} ],
  weight: [ {required: true, message: '请输入磅重', trigger: 'blur'} ],
})

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

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true

  FormUtil.submit(transFormIns, () => {
    let data = Object.assign({}, formData)
    data.weight = data.weight * 1000
    return TransApi.coming(data)
  })
    .then(() => {
      ElMessage.success('进场成功')
      emits('editSucc')
      showDialog.value = false
    })
    .finally(() => {
      submiting.value = false
    })

  // if (formData.id != null) {
  //   FormUtil.submit(transFormIns, () => TransApi.modify(formData))
  //     .then(() => {
  //       ElMessage.success("修改成功");
  //       emits("editSucc");
  //       showDialog.value = false;
  //     })
  //     .finally(() => {
  //       submiting.value = false;
  //     });
  // } else {
  //   FormUtil.submit(transFormIns, () => TransApi.add(formData))
  //     .then(() => {
  //       ElMessage.success("添加成功");
  //       emits("editSucc");
  //       showDialog.value = false;
  //     })
  //     .finally(() => {
  //       submiting.value = false;
  //     });
  // }
}

defineExpose({
  open(data: TransTypes.SearchTransResult = {}) {
    formData.orderTransId = data.id
    showDialog.value = true
  },
})
</script>

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