<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" type="number" :disabled="status === 'view'" placeholder="请输入磅重">
          <template #append>吨</template>
        </ElInput>
      </ElFormItem>

      <ElFormItem label="车头照" prop="cargoPhoto">
        <Uploader v-model:file="formData.cargoPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
          <span style="font-size: 50px; padding: 0 40px">+</span>
        </Uploader>
      </ElFormItem>

      <ElFormItem label="车斗照" prop="bodyPhoto">
        <Uploader v-model:file="formData.bodyPhoto" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
          <span style="font-size: 50px; padding: 0 40px">+</span>
        </Uploader>
      </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.leaving(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>
