<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">
          <el-tab-pane label="目录" name="maintenance">
            <MaintenanceDescription :maintenance="maintenance" class="margin-top" v-show="queryParams.maintenanceId != null" />
            <el-empty v-show="queryParams.maintenanceId == null" />
          </el-tab-pane>
          <el-tab-pane label="维保" name="maintenanceProject">
            <maintenanceProject :maintenance="maintenance" :maintenanceList="maintenanceList" :maintenanceOptions="maintenanceOptions" v-model="queryParams.maintenanceId" v-model:showSidebar="showSidebar" v-model:sidebarSpan="sidebarSpan" />
          </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" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

  </div>
</template>

<script setup name="MaintenanceProjectManage">
import MaintenanceSidebar from "@/components/Maintenance/sidebar";
import MaintenanceDescription from "@/components/Maintenance/description";
import maintenanceProject from "@/views/maintenance/maintenance/manage/component";
import sparePart from "@/views/sparePart/sparePart/component";
import { ref, watch } from "vue-demi";
import { useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();
const showSidebar = ref(true);
const sidebarSpan = ref(6);
const maintenance = ref({});
const maintenanceList = ref([]);
const maintenanceOptions = ref([]);
const activeTabName = ref(route.query.activeTabName || "maintenanceProject");
const showMaintenanceDrawer = ref(false);

console.log(Number(route.query.maintenanceId));

const data = reactive({
  queryParams: {
    maintenanceId: 2665,
  },
});
const { queryParams } = toRefs(data);
queryParams.value.maintenanceId = Number(route.query.maintenanceId);

watch(
  () => activeTabName.value,
  (newValue) => {
    console.log(newValue);
    console.log(queryParams);
    router.push({
      path: route.path,
      query: {
        activeTabName: newValue,
        maintenanceId: queryParams.value.maintenanceId,
      },
    });
  }
);

watch(
  () => queryParams.value.maintenanceId,
  (newValue) => {
    router.push({
      path: route.path,
      query: {
        activeTabName: activeTabName.value,
        maintenanceId: newValue,
      },
    });
  }
);

function handleMaintenanceView(data) {
  //// console.log(data)
  queryParams.value.maintenanceId = data.maintenanceId;
  maintenance.value = data;
  showMaintenanceDrawer.value = true;
  activeTabName.value = "maintenance";
}
</script>

