<template>
    <el-drawer v-model="open" :title="`维保记录清单`" :before-close="handleClose" direction="rtl" class="demo-drawer"
        modal-class="el-maintenance-record-drawer" size="80%">
        <div v-loading="loading">
            <Index :form="form" :editable="false" />
        </div>
        <template #footer>
            <el-button type="primary" @click="handleUpdateMaintenanceRecordDetails">保 存</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { getMaintenanceRecord } from "@/api/maintenanceRecord/maintenanceRecord";
import { updateMaintenanceRecordDetails } from "@/api/maintenanceRecord/maintenanceRecord";
import Index from "@/components/MaintenanceRecord/detail/index";


const { proxy, ctx } = getCurrentInstance();
const store = useStore();
const open = ref(false);
const loading = ref(true);
const emit = defineEmits(['update']);

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

const { maintenanceRecordId } = toRefs(props);
const data = reactive({
    form: {},
})

const { form } = toRefs(data);


// 显示弹框
function show() {
    open.value = true;
    loading.value = true;
    nextTick(() => {
        getData()
    })
}

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



function getData() {
    if (maintenanceRecordId.value) {
        getMaintenanceRecord(maintenanceRecordId.value).then(response => {
            form.value = response.data;
            loading.value = false;
        });
    }
}

function handleUpdateMaintenanceRecordDetails() {
    let length = form.value.maintenanceRecordDetails.length
    for (let i in form.value.maintenanceRecordDetails) {
        updateMaintenanceRecordDetails(form.value.maintenanceRecordDetails[i]).then(response => {
            if (i == form.value.maintenanceRecordDetails.length - 1) {
                proxy.$modal.msgSuccess("修改成功");
                console.log(`response`)
                console.log(response)
                handleClose();
                emit("update")
            }
        });
    }
}


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

<style>
.el-maintenance-record-drawer {
    line-height: 1.5rem;
}
</style>