<template>
  <div class="menus" :style="{width: width + 'px'}">
    <menu-cancel ref="menuCancel" />
    <template v-show="isShowAll">
      <template v-show="isShowBar">
        <menu-bar ref="menuBar" :selected="selected" />
      </template>
      <menu-button ref="menuButton" />
      <menu-station-control ref="menuStationControl" :selected="selected" />
      <menu-station-stand ref="menuStationStand" :selected="selected" />
      <menu-switch ref="menuSwitch" :selected="selected" />
      <menu-signal ref="menuSignal" :selected="selected" />
      <menu-section ref="menuSection" :selected="selected" />
      <menu-train ref="menuTrain" :selected="selected" />
      <menu-station ref="menuStation" :selected="selected" />
      <passive-alarm ref="passiveAlarm" />
      <passive-contorl ref="passiveControl" />
      <passive-Timeout ref="passiveTimeout" />
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import MenuCancel from './menuCancel';
import MenuSignal from './menuSignal';
import MenuButton from './menuButton';
import MenuStationControl from './menuStationControl';
import MenuStationStand from './menuStationStand';
import MenuSwitch from './menuSwitch';
import MenuSection from './menuSection';
import MenuTrain from './menuTrain';
import MenuStation from './menuStation';
import MenuBar from './menuBar';
import PassiveAlarm from './passiveDialog/alarm';
import PassiveContorl from './passiveDialog/control';
import PassiveTimeout from './passiveDialog/timeout';

export default {
    name: 'Menus',
    components: {
        MenuBar,
        MenuButton,
        MenuCancel,
        MenuSignal,
        MenuSwitch,
        MenuSection,
        MenuStationControl,
        MenuStationStand,
        MenuStation,
        MenuTrain,
        PassiveAlarm,
        PassiveContorl,
        PassiveTimeout
    },
    props: {
        selected: {
            type: Object,
            default() {
                return null;
            }
        }
    },
    computed: {
        ...mapGetters('config', [
            'width'
        ]),
        isShowAll() {
            return this.$route.params.mode !== 'dp' &&
                    this.$route.params.mode !== 'plan' &&
                    this.$store.state.training.roles != 'BigScreen';
        },
        isShowBar() {
            return this.$store.state.training.prdType;
        }
    },
    watch: {
        isShowBar(val) {
            val && this.$store.dispatch('config/updateMenuBar');
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.$store.dispatch('config/updateMenuBar');
        });
    }
};
</script>

<style>
    .menus .pop-menu {
        background: #F0F0F0;
    }

    .menus .pop-menu span {
        color: #000;
    }

    .menus .pop-menu .is-disabled span {
        color: #B4B3B8;
    }

    .chengdou-03__systerm {
        overflow: hidden !important;
    }

    .chengdou-03__systerm .el-dialog {
        background: #0055E8;
        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
        border: 1px solid rgb(69, 134, 247);
        border-radius: 6px;
        font-size: 13px !important;
        color: #000;
    }

    .chengdou-03__systerm .el-dialog span {
        font-size: 13px !important;
        line-height: 22px;
    }

    .chengdou-03__systerm .el-dialog .el-dialog__footer {
        background: #ECE9D8;
        opacity: 1;
    }

    .chengdou-03__systerm .el-dialog .el-dialog__body {
        padding: 20px;
        margin: 0px 3px 3px;
        border: 2px solid rgba(120, 121, 123, 0.5);
        box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
        background: #ECE9D8;
        opacity: 1;
    }

    .chengdou-03__systerm .el-dialog .el-dialog__title {
        font-size: 16px;
        color: #fff;
        position: absolute;
        top: 4px;
        left: 7px;
    }

    .chengdou-03__systerm .el-dialog .el-dialog__headerbtn {
        background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
        border: 1px solid #fff;
        border-radius: 4px;
        top: 6px;
        right: 3px;
        line-height: 16px;
    }

    .chengdou-03__systerm .el-dialog .el-dialog__headerbtn .el-icon-close:before {
        font-size: 16px;
    }

    .chengdou-03__systerm .el-dialog .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
    }

    .chengdou-03__systerm .el-dialog .el-button {
        height: 24px;
        line-height: 22px;
        padding: 0px;
        width: 80px;
        border: 2px outset #E2E2E2;
        border-radius: 4px !important;
        color: #000;
        background: #F0F0F0;
    }

    .chengdou-03__systerm .el-dialog .expand {
        width: 120px;
    }

    .chengdou-03__systerm .el-dialog .el-button:focus span {
        border: 1px dashed gray;
    }

    .chengdou-03__systerm .el-dialog .el-button:active {
        border: 2px inset #E2E2E2;
    }

    .chengdou-03__systerm .el-dialog .el-button:disabled {
        border: 2px inset #E2E2E2;
    }

    .chengdou-03__systerm .el-dialog .el-button:disabled span {
        border: 0px;
    }

    .chengdou-03__systerm .el-dialog .el-input {
        border: 2px inset #E9E9E9;
        height: 22px !important;
        line-height: 22px !important;
    }

    .chengdou-03__systerm .el-dialog .el-input__inner {
        color: #000;
        background: #fff !important;
        border: 0px;
        border-radius: 0px !important;
        box-sizing: border-box;
        height: 22px !important;
        line-height: 22px !important;
    }

    .chengdou-03__systerm .el-dialog .el-input.is-disabled .el-input__inner {
        background: #F0F0F0 !important;
    }

    .chengdou-03__systerm .el-dialog .el-textarea {
        border: 2px inset #E9E9E9;
        border-radius: 0px;
    }

    .chengdou-03__systerm .el-dialog .el-textarea .el-textarea__inner {
        color: #000;
        background: #fff !important;
        border: 0px;
        border-radius: 0px !important;
        box-sizing: border-box;
    }

    .chengdou-03__systerm .el-dialog .el-textarea.is-disabled .el-textarea__inner {
        background: #F0F0F0 !important;
    }

    .chengdou-03__systerm .el-dialog .el-table--border th.gutter {
        background: #EBEADB !important;
    }

    .chengdou-03__systerm .el-dialog .el-table {
        border: 2px inset #E9E9E9;
        color: #000 !important;
    }

    .chengdou-03__systerm .el-dialog .el-table .cell {
        height: 22px;
        line-height: 22px;
    }

    .chengdou-03__systerm .el-dialog .el-table th.is-leaf {
        background: #F0F0F0 !important;
        border-right: 1px solid #BDBDBD !important;
        border-bottom: 1px solid #BDBDBD !important;
        color: #000 !important;
        height: 20px !important;
        padding: 0px;
    }

    .chengdou-03__systerm .el-dialog .el-table tr td {
        height: 20px !important;
        padding: 0px;
    }

    .chengdou-03__systerm .el-dialog .el-table .el-table__empty-text {
        top: 15px !important;
    }

    .chengdou-03__systerm .el-dialog .current-row>td {
        background: #3399FF !important;
        color: #fff !important;
    }

    .chengdou-03__systerm .el-dialog .el-checkbox__inner {
        border: 1px inset #dcdfe6 !important;
    }

    .chengdou-03__systerm .el-dialog .el-checkbox__label {
        color: #000 !important;
    }

    .chengdou-03__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__inner {
        background: #E6E6E6 !important;
    }

    .chengdou-03__systerm .el-dialog .el-checkbox.is-disabled .el-checkbox__label {
        color: #C5C9CC !important;
    }

    .chengdou-03__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
        background: #fff !important;
        border: 1px inset #dcdfe6 !important;
    }

    .chengdou-03__systerm .el-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after {
        position: absolute;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        content: "";
        border: 1px solid #000;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        top: 1px;
    }

    .chengdou-03__systerm .el-dialog .el-radio__inner {
        border: 1px inset #dcdfe6 !important;
    }

    .chengdou-03__systerm .el-dialog .el-radio__label {
        color: #000 !important;
    }

    .chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner {
        background: #fff !important;
        border: 1px inset #dcdfe6 !important;
    }

    .chengdou-03__systerm .el-dialog .el-radio__input.is-checked .el-radio__inner::after {
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: #000 !important;
        position: absolute;
        left: 50%;
        top: 50%;
    }

    .chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__inner {
        background: #E6E6E6 !important;
    }

    .chengdou-03__systerm .el-dialog .el-radio.is-disabled .el-radio__label {
        color: #C5C9CC !important;
    }

    .chengdou-03__systerm .el-dialog .base-label {
        background: rgba(0, 0, 0, x);
        position: relative;
        left: -15px;
        top: -18px;
    }

    .chengdou-03__systerm .el-dialog .el-form-item label {
        font-weight: normal !important;
        color: #000 !important;
    }

    .chengdou-03__systerm .el-dialog .context {
        height: 100px;
        border: 2px inset #E2E2E2;
        overflow-y: scroll;
    }

    .chengdou-03__systerm .el-dialog .table {
        margin-top: 10px;
    }

    .chengdou-03__systerm .el-dialog .notice {
        margin-left: 62px;
        line-height: 30px;
    }

    .chengdou-03__systerm .el-dialog .button-group {
        margin-top: 20px;
    }
</style>
