<template>
  <div class="main-box">
    <div class="card table-main">
      <el-tabs v-model="activeTab" tab-position="left" class="demo-tabs" style="height: 100%"  @tab-click="handleTabClick">
        <el-tab-pane  label="基本配置" name="basicConfig">
          <configuration-basic v-model="processData"></configuration-basic>
        </el-tab-pane>
        <el-tab-pane label="数据自动分发" name="distributionAutomatic">
          <distribution-automatic></distribution-automatic>
        </el-tab-pane>
        <el-tab-pane label="北斗服务配置" name="beidouService">
          <service-beidou></service-beidou>
        </el-tab-pane>
        <el-tab-pane label="授时服务配置" name="timingService">
         <configuration-authorization v-model="processData"></configuration-authorization>
        </el-tab-pane>
        <el-tab-pane label="全局配置" name="globalConfig">
          <configuration-global v-model="processData"></configuration-global>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="tsx">
import ConfigurationBasic from "./components/configurationBasic.vue"
import ConfigurationAuthorization from "./components/configurationAuthorization.vue";
import ServiceBeidou from "./components/serviceBeidou.vue";
import DistributionAutomatic from "./components/distributionAutomatic.vue";
import ConfigurationGlobal from "./components/configurationGlobal.vue";
import {onMounted,ref} from "vue";
import {getQueryAllSysItem} from "@/api/modules/allData";
import { useRoute } from "vue-router";

const route = useRoute();
const processData = ref([]);
const activeTab = ref<any>( route.query?.status ? route.query?.status : 'basicConfig')
const getList= async ()=>{
  const { data } = await getQueryAllSysItem();
  processData.value = data.list
}

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

onMounted(() => {
  getList()
});

</script>
