<template>
    <div>
        <div class="bigBox">
            <template v-for="(item, index) in listArr">
                <span :class="selectsNum == index ? 'result' : 'nowSpan'" @click="spanClick(item, index)">{{ item.name
                }}</span>
            </template>
            <router-link to="/home/mission">测试</router-link>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router'
export default {
    props: {
    },
    setup(props, { emit }) {
        let router = useRouter()
        let route = useRoute()
        let listArr = ref([
            {
                name: "网络结构图",
                id: 0
            },
            {
                name: "scd可视化",
                id: 1
            }
        ])
        let selectsNum = ref(0)
        function spanClick(row, num) {
            selectsNum.value = num
            console.log(selectsNum.value,'link');
            if (row.name === '网络结构图') {
                router.push("/home/int")
            } else if (row.name === 'scd可视化') {
                router.push("/home/scdMap")
            }
        }
        function getRoutes(){
            if(route.path=='/home/scdMap'){
                selectsNum.value = 1
            }
            if(route.path == '/home/int'){
                selectsNum.value = 0
            }
        }
        onMounted(() => {
            getRoutes()
        })
        return {
            listArr,
            selectsNum,
            spanClick,
            getRoutes,
        }
    }
}
</script>

<style scoped>
.result {
    display: inline-block;
    width: 90px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    border-bottom: 2px solid blue;
    color: blue;
    cursor: pointer;
    margin: 0 10px;
}

.nowSpan {
    display: inline-block;
    width: 90px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
    margin: 0 10px;
}
</style>