<template>
  <el-drawer v-model="open" :title="warehouseAccessType == 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="warehouseAccessExplain">
        <el-input maxlength="300" v-model="form.warehouseAccessExplain" type="textarea" placeholder="请输入说明" autofocus />
      </el-form-item>
      <el-divider content-position="center">物料清单</el-divider>
    </el-form>

    <Index :editable="false" :warehouseAccessType="warehouseAccessType" />
    <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 { clearWarehouseAccessDetailsOut } from "@/utils/warehouseAccessDetailsOut";
import { clearWarehouseAccessDetailsIn } from "@/utils/warehouseAccessDetailsIn";
import { listWarehouseAccess, getWarehouseAccess, delWarehouseAccess, addWarehouseAccess, updateWarehouseAccess } from "@/api/warehouseAccess/warehouseAccess";

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


const data = reactive({
  form: {},

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

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


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

const { warehouseAccessType } = toRefs(props);


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

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

}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      form.value.warehouseAccessDetailsList = Object.values(warehouseAccessType.value == 10 ? store.state.data.warehouseAccessDetailsIn : store.state.data.warehouseAccessDetailsOut);
      if (form.value.formId != null) {
        updateWarehouseAccess(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          handleClose()
          emit("submit")
        });
      } else {
        addWarehouseAccess(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          handleClose()
          emit("submit")
          warehouseAccessType.value == 10 ? clearWarehouseAccessDetailsIn(false) : clearWarehouseAccessDetailsOut(false)
        });
      }
    }
  });
}



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