<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--侧边栏-->
            <el-col :span="sidebarSpan" :xs="24" v-show="showSidebar">
                <MaintenanceSidebar v-model="queryParams.maintenanceId" v-model:maintenanceList="maintenanceList"
                    v-model:maintenanceOptions="maintenanceOptions" v-model:maintenance="maintenance"
                    @onView="handleMaintenanceView" />
            </el-col>
            <!--内容区-->
            <el-col :span="showSidebar ? 24 - sidebarSpan : 24" :xs="24">
                <el-tabs type="border-card" v-model="activeTabName" @tab-click="handleTabClick">
                    <el-tab-pane label="目录" name="maintenance">
                        <el-descriptions border :column="2" class="margin-top"
                            v-show="queryParams.maintenanceId != null">
                            <el-descriptions-item label="维保名称" span="2">{{ maintenance.maintenanceName }}
                            </el-descriptions-item>
                            <el-descriptions-item label="生产厂商">{{ maintenance.manufacturer }}</el-descriptions-item>
                            <el-descriptions-item label="型号">{{ maintenance.model }}</el-descriptions-item>
                            <el-descriptions-item label="序列号">{{ maintenance.serialNumber }}</el-descriptions-item>
                            <el-descriptions-item label="供货商">{{ maintenance.supplier }}</el-descriptions-item>
                            <el-descriptions-item label="生产日期">{{ parseTime(maintenance.productionTime, '{y}-{m}-{d}') }}</el-descriptions-item>
                            <el-descriptions-item label="船检编号">{{ maintenance.shipInspectionNo }}</el-descriptions-item>
                        </el-descriptions>
                        <el-empty v-show="queryParams.maintenanceId == null" />
                    </el-tab-pane>
                    <el-tab-pane label="备件" name="sparePart">
                        <sparePart :maintenanceList="maintenanceList" :maintenanceOptions="maintenanceOptions"
                            v-model="queryParams.maintenanceId" v-model:showSidebar="showSidebar"
                            v-model:sidebarSpan="sidebarSpan"
                            :showSparePartApplySubmitDrawer="route.query.showSparePartApplySubmitDrawer" />
                    </el-tab-pane>
                </el-tabs>

            </el-col>
        </el-row>







    </div>
</template>

<script setup name="SparePart">
import MaintenanceSidebar from "@/components/Maintenance/sidebar"
import sparePart from "@/views/sparePart/sparePart/component"
const route = useRoute();
const showSidebar = ref(true);
const sidebarSpan = ref(6);
const maintenance = ref({});
const maintenanceList = ref([]);
const maintenanceOptions = ref([]);
const activeTabName = ref("sparePart");
const showMaintenanceDrawer = ref(false);

const data = reactive({
    queryParams: {},
});

const { queryParams } = toRefs(data);

const handleTabClick = (tab, event) => {
    //// console.log(tab, event)
}

function handleMaintenanceView(data) {
    //// console.log(data)
    queryParams.value.maintenanceId = data.maintenanceId
    maintenance.value = data
    showMaintenanceDrawer.value = true
    activeTabName.value = "maintenance"

}
</script>

