<template>
  <el-drawer v-model="open" :title="sparePartAccessType == 10 ? `入库清单` : `出库清单`" :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="sparePartAccessExplain">
        <el-input maxlength="300" v-model="form.sparePartAccessExplain" type="textarea" placeholder="请输入说明" autofocus />
      </el-form-item>
      <el-divider content-position="center">备件列表</el-divider>
    </el-form>

    <Index :editable="false" :sparePartAccessType="sparePartAccessType" />
    <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 { clearSparePartAccessDetailsOut } from "@/utils/sparePartAccessDetailsOut";
import { clearSparePartAccessDetailsIn } from "@/utils/sparePartAccessDetailsIn";
import { listSparePartAccess, getSparePartAccess, delSparePartAccess, addSparePartAccess, updateSparePartAccess } from "@/api/sparePartAccess/sparePartAccess";

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


const data = reactive({
  form: {},

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

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


const props = defineProps({
  sparePartAccessType: {
    type: [Number, String],
    default: null,
  },
});

const { sparePartAccessType } = toRefs(props);


// 显示弹框
function show() {
  open.value = true;
  disabled.value = Object.values(sparePartAccessType.value == 10 ? store.state.data.sparePartAccessDetailsIn : store.state.data.sparePartAccessDetailsOut).length <= 0;
  form.value.sparePartAccessType = sparePartAccessType.value
}

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

}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      form.value.sparePartAccessDetailsList = Object.values(sparePartAccessType.value == 10 ? store.state.data.sparePartAccessDetailsIn : store.state.data.sparePartAccessDetailsOut);
      if (form.value.formId != null) {
        updateSparePartAccess(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          handleClose()
          emit("submit")
        });
      } else {
        addSparePartAccess(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          handleClose()
          emit("submit")
          sparePartAccessType.value == 10 ? clearSparePartAccessDetailsIn(false) : clearSparePartAccessDetailsOut(false)
        });
      }
    }
  });
}



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