<template>
    <el-drawer v-model="open" :title="`${sparePartAccessType == 10 ? '入库' : '出库'}列表(${total})`"
        :before-close="handleClose" direction="rtl" class="demo-drawer" modal-class="el-subscribe-drawer"
        size="80%">
        <Index :sparePartAccessType="sparePartAccessType" />
        <template #footer >
            <el-button plain @click="clearSparePartAccessDetailsIn" v-if="sparePartAccessType == 10 && total > 0">清 空
            </el-button>
            <el-button plain @click="clearSparePartAccessDetailsOut" v-else-if="sparePartAccessType == 20 && total > 0">
                清 空
            </el-button>
            <el-button :disabled="disabled || total == 0" type="primary" @click="submit" v-if="total > 0">提 交</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { clearSparePartAccessDetailsOut } from "@/utils/sparePartAccessDetailsOut";
import { clearSparePartAccessDetailsIn } from "@/utils/sparePartAccessDetailsIn";
import Index from "@/components/SparePartAccessDetails/index";
const { ctx } = getCurrentInstance();
const open = ref(false);
const disabled = ref(true);
const store = useStore();
const emit = defineEmits(["submit"]);

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

const { sparePartAccessType } = toRefs(props);

const total = computed(() => {
    let total = 0;
    Object.values(sparePartAccessType.value == 10 ? store.state.data.sparePartAccessDetailsIn : store.state.data.sparePartAccessDetailsOut).map((item) => {
        total += item.sparePartRetrievalQuantity;
    });
    return total;
});


// 显示弹框
function show() {
    open.value = true;
    disabled.value = false;
}

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

function submit() {
    emit("submit", sparePartAccessType.value == 10 ? store.state.data.sparePartAccessDetailsIn : store.state.data.sparePartAccessDetailsOut);
    // ctx.$emit("submit", sparePartAccessType.value == 10 ? store.state.data.sparePartAccessDetailsIn : store.state.data.sparePartAccessDetailsOut);
}

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