<template>
  <el-drawer v-model="open" :title="`维保申请清单`" :before-close="handleClose" direction="rtl" class="demo-drawer"
    modal-class="el-subscribe-drawer" size="80%">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="top">
      <el-form-item label="说明" prop="maintenanceApplyExplain">
        <el-input maxlength="300" v-model="form.maintenanceApplyExplain" type="textarea" placeholder="请输入说明" />
      </el-form-item>
      <el-divider content-position="center">备件列表</el-divider>
    </el-form>

    <Index :editable="false"
      :list="[...Object.values($store.state.data.maintenanceApplyDetails), ...$store.state.data.maintenanceApplyDetailsCustomList]"
      :showProjectFile="false" />
    <template #footer>
      <el-button plain @click="handleClose">取 消</el-button>
      <el-button :disabled="disabled" type="primary" @click="submitForm">提 交</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import { clearMaintenanceApplyDetails } from "@/utils/maintenanceApplyDetails";
import { listMaintenanceApply, getMaintenanceApply, delMaintenanceApply, addMaintenanceApply, updateMaintenanceApply } from "@/api/maintenanceApply/maintenanceApply";

import Index from "@/components/MaintenanceApplyDetails/index";
const { proxy, ctx } = getCurrentInstance();
const open = ref(false);
const disabled = ref(true);
const store = useStore();
const emit = defineEmits();

const data = reactive({
  form: {},

  rules: {
    maintenanceApplyExplain: [
      {
        required: true,
        message: "说明不能为空",
        trigger: "blur",
      },
    ],
  }
})

const { form, rules } = toRefs(data);




// 显示弹框
function show() {
  open.value = true;
  disabled.value = [...Object.values(store.state.data.maintenanceApplyDetails), ...store.state.data.maintenanceApplyDetailsCustomList].length <= 0;
}

// 关闭按钮
function handleClose() {
  form.value = {}
  open.value = false;
  emit("close")
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      form.value.maintenanceApplyDetailsList = [...Object.values(store.state.data.maintenanceApplyDetails), ...store.state.data.maintenanceApplyDetailsCustomList];
      if (form.value.maintenanceApply != null) {
        updateMaintenanceApply(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          handleClose()
        });
      } else {
        addMaintenanceApply(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          handleClose()
          clearMaintenanceApplyDetails(false)
        });
      }
    }
  });
}



defineExpose({
  show,
  handleClose,
});
</script>