<template>
    <div >
        <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus">
        </div>
        <div class="text-left p-4 ">
            <div class="custom-style">
                <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
            </div>
        </div>
        <!-- 综合数据页面组件 -->
        <allDataTab v-if="mode === '综合数据'">
        </allDataTab>
        <!-- DSN数据页面组件 -->
        <dsnDataTab v-if="mode === 'DSN数据'">
        </dsnDataTab>
        <!-- ITU数据页面组件 -->
        <ituDataTab v-if="mode === 'ITU数据'">
        </ituDataTab>
        <!-- ST数据页面组件 -->
        <stDataTab v-if="mode === 'ST数据'">
        </stDataTab>
    </div>




</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import allDataTab from './components/allDataTab.vue'
import ituDataTab from './components/ituDataTab.vue'
import stDataTab from './components/stDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue'

const mode = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const route = useRoute()
const router = useRouter()
const ooo = ref<any>('数据展示')
const goToStatus = () => {
    router.push({
        path: '/osStatus/list',
    })
}
onMounted(()=>{
    console.log('数据展示');
    console.log(route.query);
    ooo.value = route.query.mode
    mode.value = ooo.value
})
</script>

<style scoped lang="scss">
.el-button:focus {
    outline: none;
}

/* 文字样式 */
.el-text {
    color: #FFFFFF;
}

.backStyle {
    background-image: url("@/assets/picture/back.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 5vh;
    width: 5%;
    display: flex;
    margin-left: 0.8%;
}
</style>
