<template>
  <div id="PlanMenuTool">
    <div class="nav">
      <div v-for="(item,index) in tools" :key="index" class="tool">
        <img :src="item.src" :alt="item.title">
      </div>
    </div>
  </div>
</template>
<script>
import { prefixIntrger } from '@/utils/date';
import logo_ from '@/assets/logo_.png';

export default {
    name: 'PlanMenuTool',
    data() {
        return {
            tools: [
                {
                    title: '服务器1',
                    operate: '',
                    src: logo_,
                    click: this.undeveloped
                },
                {
                    title: '服务器2',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '前置机1',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '前置机2',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '主调',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '调度台1',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '调度台2',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '调度台3',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '大屏',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '维护工作站',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '运行图显示人工站',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '跳停',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '扣车',
                    operate: '',
                    src: '',
                    click: this.undeveloped
                },
                {
                    title: '列车报警',
                    operate: '',
                    src: logo_,
                    click: this.undeveloped
                }
            ]
        };
    },
    computed: {
        isShowSystemTime() {
            return this.$route.params.mode == 'demon' || this.$route.params.mode === 'dp' || !this.$route.params.mode;
        }
    },
    watch: {
        '$store.state.training.initTime': function (initTime) {
            const date = new Date(initTime);
            this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
        }
    },
    mounted() {
        this.initTools();
    },
    methods: {
        initTools() {
            this.tools = [];
        }
    }
};
</script>

<style scoped rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    $top: 48px;
    $width: 25px;
    $height: 25px;

    #PlanMenuTool {
        z-index: 5;
        position: absolute;
        width: 100%;
        top: $top;
    }

    .nav {
        display: block;
        color: #0000;
        background: #EBEADB;
        border: 1px solid #B6BCCC !important;
        border-bottom: 2px solid #B6BCCC !important;
        list-style: none;
        height: $height;
        line-height: $height;
    }

    .tool {
        padding-left: 10px;
        display: flex;
        justify-content: center;
        cursor: pointer;
        position: relative;
        float: left;
        margin: 1px;
        width: $width;

        img {
            display: block;
            text-align: center;
            padding-top: 2px;
            height: $height - 5;
            width: $width - 5;
        }
    }
</style>
