<template>
    <div style="height:100%;">
        <div class="top">
            <button
                v-for="(item, index) in assemblies"
                :key="index"
                :class="current === index ? 'active' : ''"
                @click="
                    show(item);
                    switchTag(index);
                "
            >
                {{ item.name }}
            </button>
        </div>
        <router-view />
    </div>
</template>
<script>
export default {
    name: "App",
    data() {
        return {
            current: "",
            assemblies: [
                {
                    name: "GPS轨迹回放",
                    routerName: "gpsTrack"
                },
                {
                    name: "GPS实时定位",
                    routerName: "gpsRTMS"
                }
            ]
        };
    },
    created() {
        window._systemId = "98958643100416";
        window._WEB_CURENV = "dev";
        this.assemblies = this.assemblies.sort(this.sortBankList("name"));
        localStorage.setItem(
            "Authorization",
            "Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIxNDE2ODk3Mzg5MzUwNDAiLCJzdWIiOiJ1YXRjdHJkb25nY3kiLCJpc3MiOiJTRi1EU0MiLCJpYXQiOjE2NTc3NjA5MDcsInVzZXJfaW5mbyI6IjBHOURLWVJycE5YUW9QMWlVYzlPZitBMGlwVDZTRHprWjRnS21BVEFhL3hxRXU3YSsxQk9FVTQ3WFVBRjRCSDh2SHNnazV4UnBZQXBBUTZPN1ZUSmYzNFNZdjRrZ1JPZXZPa2tXN3pIL0VJPSIsImV4cCI6MTY1Nzg0NzMwN30.AjX4DfhDq2LbCp6EyDLIXM2KFMNojLMdlmCLIsrgYSFX2YRLGLdfvGLEm3oTK-Zrt8EEFA99jvy4_khnwOjqFw"
        );
    },
    methods: {
        show(item) {
            var rName = item.routerName;
            this.$router.push({ path: rName });
        },
        switchTag(index) {
            this.current = index;
        },
        sortBankList(propertyName) {
            return function sortList(object1, object2) {
                const value1 = object1[propertyName];
                const value2 = object2[propertyName];
                if (value2 < value1) {
                    return 1;
                }
                if (value2 > value1) {
                    return -1;
                }
                return 0;
            };
        }
    }
};
</script>
<style>
.top button {
    background: #fff;
    border: none;
    margin-right: 4px;
    padding: 10px;
}
.top .active {
    color: #3472fb;
}
</style>
