<template>
  <!-- 添加或修改项目信息对话框 -->
  <el-dialog
    title="载具信息表单"
    v-model="visible"
    width="400px"
    append-to-body
    draggable
  >
    <div class="form-container">
      <el-form
        ref="carrierFormRef"
        class="master-container"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="载具编号" prop="code">{{
          form.code
        }}</el-form-item>
        <el-form-item label="废弃日期" prop="abandonmentDate">
          <el-date-picker
            type="date"
            v-model="form.abandonmentDate"
            placeholder="请选择废弃日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="废弃原因" prop="abandonmentReason">
          <el-select
            v-model="form.abandonmentReason"
            placeholder="请选择废弃原因"
            clearable
          >
            <el-option
              v-for="dict in reason_for_abandonment"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" icon="Check" @click="handleSave"
        >确 定</el-button
      >
      <el-button icon="Close" @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getCarrier, saveCarrierReject } from "@/api/business/carrier";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);
/** 字典数组区 */
const { reason_for_abandonment } = proxy.useDict("reason_for_abandonment");
/** 表单抽屉 页变量 */
const loading = ref(false);
const visible = ref(false);
const form = ref({});
const rules = {
  abandonmentDate: [
    { required: true, message: "废弃日期不能为空", trigger: "blur" },
  ],
  abandonmentReason: [
    { required: true, message: "废弃原因不能为空", trigger: "change" },
  ],
};

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (data) => {
  reset();
  visible.value = true;
  loading.value = true;
  form.value.categoryId = data.categoryId;
  getCarrier(data.id || 0).then((res) => {
    if (res.data) {
      form.value = res.data;
      form.value.abandonmentDate =
        form.value.isAbandoned === 1
          ? res.data.abandonmentDate
          : proxy.moment().format("YYYY-MM-DD");
      form.value.isAbandoned = "1";
    }
    loading.value = false;
  });
};

/** 表单重置 */
const reset = () => {
  form.value = {
    id: null,
    categoryId: 0,
    isAbandoned: "1",
    code: "",
    abandonmentDate: proxy.moment().format("YYYY-MM-DD"),
    abandonmentReason: "",
  };
  proxy.resetForm("carrierFormRef");
};

/** 提交按钮 */
const handleSave = () => {
  proxy.$refs["carrierFormRef"].validate((valid) => {
    if (valid) {
      var carrierReject = {};
      carrierReject.carrierId = form.value.id;
      carrierReject.operationDate = form.value.abandonmentDate;
      carrierReject.abandonmentReason = form.value.abandonmentReason;
      carrierReject.isAbandoned = form.value.isAbandoned;
      saveCarrierReject(carrierReject).then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("操作成功");
          emit("handleSaveSuccess");
        }
        visible.value = false;
      });
    }
  });
};

/** 取消按钮 */
const handleCancel = () => {
  visible.value = false;
  reset();
};

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
