<template>
  <div id="menuBar">
    <div class="nav">
      <template v-for="(item,i) in menu">
        <template v-if="noShowingChildren(item.children)">
          <li :id="item.operate.domId" :key="i" class="nav-li" @click="hookClick(item)">
            <span class="nav-li-text">{{ item.title }}</span>
          </li>
        </template>
        <template v-else>
          <li :id="item.operate.domId" :key="i" class="nav-li" @click.stop="selectedClassA(item, i)">
            <span class="nav-li-text">{{ item.title }}</span>
            <ul class="nav-ul" :class="{'active' :i==classA}">
              <template v-for="(child,j) in item.children">
                <template
                  v-if="child.children&&child.children.length>0&&hasShowingChildren(child.children)"
                >
                  <li
                    :id="child.operate.domId"
                    :key="j"
                    class="menu-li"
                    @click.stop="selectedClassB(child, j)"
                  >
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                    <ul class="menu-ul" :class="{'active' :j==classB}">
                      <template v-for="(grandchild,k) in child.children">
                        <li
                          v-if="grandchild.show"
                          :id="grandchild.operate.domId"
                          :key="k"
                          class="menu-li"
                          @click.stop="hookClick(grandchild)"
                        >
                          <div class="menu-li-block">
                            <span class="menu-li-text">
                              <span class="status">&ensp;</span>
                              <span class="label">{{ grandchild.title }}</span>
                            </span>
                          </div>
                        </li>
                      </template>
                    </ul>
                  </li>
                </template>
                <template v-else>
                  <li
                    v-if="child.show"
                    :id="child.operate.domId"
                    :key="j"
                    class="menu-li"
                    @click.stop="hookClick(child)"
                  >
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                  </li>
                </template>
              </template>
            </ul>
          </li>
        </template>
      </template>
    </div>
    <station-control-convert ref="stationControlConvert" />
    <password-box ref="passwordBox" @setLoginResult="getLoginResult" />
    <view-train-id ref="viewTrainId" />
    <view-name ref="viewName" />
    <view-device ref="viewDevice" />
    <notice-info ref="noticeInfo" />
    <train-add ref="trainAdd" />
    <train-transtalet ref="trainTranstalet" />
    <train-delete ref="trainDelete" />
    <manage-user ref="manageUser" />
    <help-about ref="helpAbout" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { TrainingMode, OperationEvent } from '@/scripts/ConstDic';
// import { OperateMode } from '@/scripts/ConstDic';
import { menuBarConvert, SystemType } from './utils/menuItemStatus';
import StationControlConvert from './menuDialog/stationControlConvert';
import TrainAdd from './menuDialog/trainAdd';
import TrainTranstalet from './menuDialog/trainTranstalet';
import TrainDelete from './menuDialog/trainDelete';
import PasswordBox from './menuDialog/passwordBox';
import ViewTrainId from './menuDialog/viewTrainId';
import ViewName from './menuDialog/viewName';
import ViewDevice from './menuDialog/viewDevice';
import ManageUser from './menuDialog/manageUser';
import HelpAbout from './menuDialog/helpAbout';
import NoticeInfo from './dialog/childDialog/childDialog/noticeInfo';
import { EventBus } from '@/scripts/event-bus';

export default {
	name: 'MenuBar',
	components: {
		NoticeInfo,
		StationControlConvert,
		PasswordBox,
		ViewTrainId,
		ViewName,
		ViewDevice,
		TrainAdd,
		TrainTranstalet,
		TrainDelete,
		ManageUser,
		HelpAbout
	},
	props: {
		selected: {
			type: Object,
			default() {
				return null;
			}
		}
	},
	data() {
		return {
			classA: -1,
			classB: -1,
			tempClassA: -1,
			tempClassB: -1,
			valid: true,
			menu: [],
			menuNormal: {
				local: [
					{
						title: this.$t('menu.menuBar.system'),
						operate: OperationEvent.Command.mBar.system,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.view'),
						operate: OperationEvent.Command.mBar.check,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.refresh'),
						operate: OperationEvent.Command.mBar.fresh,
						click: this.refresh,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.display'),
						operate: OperationEvent.Command.mBar.view,
						children: [
							{
								title: this.$t('menu.menuBar.setTrainIdDisplay'),
								click: this.setTrainIdDisplay,
								operate: OperationEvent.Command.view.setTrainIdDisplay
							},
							{
								title: this.$t('menu.menuBar.setNameDisplay'),
								click: this.setNameDisplay,
								operate: OperationEvent.Command.view.setNameDisplay
							},
							{
								title: this.$t('menu.menuBar.setDeviceDisplay'),
								click: this.setDeviceDisplay,
								operate: OperationEvent.Command.view.setDeviceDisplay
							}
						]
					},
					{
						title: this.$t('menu.menuBar.stationMapSwitch'),
						operate: '',
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.controlModeSwitch'),
						operate: OperationEvent.Command.mBar.remoteControl,
						children: [
							{
								title: this.$t('menu.menuBar.toStationControl'),
								click: this.turnToStationControl,
								operate: OperationEvent.StationControl.requestStationControl.mbar
							},
							{
								title: this.$t('menu.menuBar.forcedStationControl'),
								click: this.mandatoryStationControl,
								operate: OperationEvent.StationControl.forcedStationControl.password
							},
							{
								title: this.$t('menu.menuBar.toCentralControl'),
								click: this.conterStationControl,
								operate: OperationEvent.StationControl.requestCentralControl.mbar,
								froce: true
							}
						]
					},
					{
						title: this.$t('menu.menuBar.requestOperationArea'),
						operate: OperationEvent.Command.mBar.requestZone,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.historyQuery'),
						operate: OperationEvent.Command.mBar.historyQuery,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.userManage'),
						operate: OperationEvent.Command.mBar.userManage,
						children: [
							{
								title: this.$t('menu.menuBar.userManage'),
								click: this.userManage,
								operate: OperationEvent.Command.manage.userManage
							}
						]
					},
					{
						title: this.$t('menu.menuBar.help'),
						operate: OperationEvent.Command.mBar.help,
						children: [
							{
								title: this.$t('menu.menuBar.about'),
								click: this.about,
								operate: OperationEvent.Command.help.about
							}
						]
					}
				],
				central: [
					{
						title: this.$t('menu.menuBar.system'),
						operate: OperationEvent.Command.mBar.system,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.view'),
						operate: OperationEvent.Command.mBar.check,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.refresh'),
						operate: OperationEvent.Command.mBar.fresh,
						click: this.refresh,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.display'),
						operate: OperationEvent.Command.mBar.view,
						children: [
							{
								title: this.$t('menu.menuBar.setTrainIdDisplay'),
								click: this.setTrainIdDisplay,
								operate: OperationEvent.Command.view.setTrainIdDisplay
							},
							{
								title: this.$t('menu.menuBar.setNameDisplay'),
								click: this.setNameDisplay,
								operate: OperationEvent.Command.view.setNameDisplay
							},
							{
								title: this.$t('menu.menuBar.setDeviceDisplay'),
								click: this.setDeviceDisplay,
								operate: OperationEvent.Command.view.setDeviceDisplay
							}
						]
					},
					{
						title: this.$t('menu.menuBar.stationMapSwitch'),
						operate: '',
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.planCarOperation'),
						operate: OperationEvent.Command.mBar.planTrain,
						children: [
							{
								title: this.$t('menu.menuBar.addPlanCar'),
								click: this.addPlanTrain,
								operate: OperationEvent.Command.planTrain.addPlanTrain
							},
							{
								title: this.$t('menu.menuBar.panPlanCar'),
								click: this.translatPlanTrain,
								operate: OperationEvent.Command.planTrain.translatPlanTrain
							},
							{
								title: this.$t('menu.menuBar.deletePlanCar'),
								click: this.delPlanTrain,
								operate: OperationEvent.Command.planTrain.delPlanTrain
							}
						]
					},
					{
						title: this.$t('menu.menuBar.trainNumberMaintenance'),
						operate: '',
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.controlModeSwitch'),
						operate: OperationEvent.Command.mBar.remoteControl,
						children: [
							{
								title: this.$t('menu.menuBar.toStationControl'),
								click: this.turnToStationControl,
								operate: OperationEvent.StationControl.requestStationControl.mbar,
								froce: true
							},
							{
								title: this.$t('menu.menuBar.forcedStationControl'),
								click: this.mandatoryStationControl,
								operate: OperationEvent.StationControl.forcedStationControl.password,
								froce: true
							},
							{
								title: this.$t('menu.menuBar.toCentralControl'),
								click: this.conterStationControl,
								operate: OperationEvent.StationControl.requestCentralControl.mbar
							}
						]
					},
					{
						title: this.$t('menu.menuBar.requestOperationArea'),
						operate: OperationEvent.Command.mBar.requestZone,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.schedulingLog'),
						operate: '',
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.systemAnalysis'),
						operate: '',
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.userManage'),
						operate: OperationEvent.Command.mBar.userManage,
						children: [
							{
								title: this.$t('menu.menuBar.userManage'),
								click: this.userManage,
								operate: OperationEvent.Command.manage.userManage
							}
						]
					},
					{
						title: this.$t('menu.menuBar.historyQuery'),
						operate: OperationEvent.Command.mBar.historyQuery,
						click: this.undeveloped,
						children: [
						]
					},
					{
						title: this.$t('menu.menuBar.help'),
						operate: OperationEvent.Command.mBar.help,
						children: [
							{
								title: this.$t('menu.menuBar.about'),
								click: this.about,
								operate: OperationEvent.Command.help.about
							}
						]
					}
				]
			}
		};
	},
	computed: {
		...mapGetters('training', [
			'mode',
			'started',
			'steps',
			'order',
			'mode'
		]),
		...mapGetters('map', [
			'stationList'
		])
	},
	watch: {
		tempClassA() {
			this.classA = this.$store.state.menuOperation.break ? -1 : this.tempClassA;
		},
		tempClassB() {
			this.classB = this.$store.state.menuOperation.break ? -1 : this.tempClassB;
		},
		'$store.state.menuOperation.break': function (val) {
			if (val) {
				this.classA = this.classB = -1;
			} else {
				this.classA = this.tempClassA;
				this.classB = this.tempClassB;
			}
		},
		'$store.state.training.operatemode': function (mode) {
			this.initMenu();
		},
		'$store.state.training.started': function (val) {
			this.closeMenu(true);
		},
		'$store.state.training.prdType': function () {
			this.initMenu();
		}
	},
	mounted() {
		this.initMenu();
	},
	methods: {
		initMenu(menu) {
			this.menu = menuBarConvert(this.menuNormal[SystemType[this.$store.state.training.prdType]], this.$store.state.training.operatemode);
			this.clickEvent();
			this.closeMenu(true);
		},
		clickEvent() {
			const self = this;
			window.onclick = function (e) {
				if (document.getElementById('menuBar')) {
					self.closeMenu(false);
				}
			};
		},
		noShowingChildren(children) {
			if (!children || children.length <= 0) {
				return true;
			}
			return false;
		},
		hasShowingChildren(children) {
			if (children && children.length > 0) {
				return true;
			}
			return false;
		},
		closeMenu(flag) {
			if (flag || (this.mode !== TrainingMode.EDIT && this.mode !== TrainingMode.TEACH)) {
				this.classA = this.tempClassA = -1;
				this.classB = this.tempClassB = -1;
			}
		},
		hookClick(item, event) {
			this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
			if (item && typeof item.click == 'function') {
				item.click(item.operate);
			}
		},
		selectedClassA(item, index) {
			const order = this.order || 0;
			if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
				this.popupMenuA(item, index);
			} else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
				this.popupMenuA(item, index);
			}
		},
		// 弹出顶部菜单操作
		popupMenuA(item, index) {
			this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
			this.clickEvent();
			const operate = {
				type: 'bar',
				operation: item.operate.operation
			};
			this.tempClassA = index;
			this.tempClassB = -1;
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
				}
			});
		},
		selectedClassB(item, index) {
			const order = this.order || 0;
			if (this.mode !== TrainingMode.TEACH) { // 编辑模式下可显示
				this.popupMenuB(item, index);
			} else if (this.steps[order] && this.steps[order].type == 'bar') { // 操作步骤没有顶部操作顶部菜单都不可显示
				this.popupMenuB(item, index);
			}
		},
		popupMenuB(item, index) {
			this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
			const operate = {
				type: 'bar',
				operation: item.operate.operation
			};
			this.tempClassB = index;
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
				}
			});
		},
		// 转为站控
		turnToStationControl(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.stationControlConvert.doShow(operate);
				}
			});
		},
		// 强制转为站控
		mandatoryStationControl(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.passwordBox.doShow(operate);
				}
			});
		},
		// 请求中控
		conterStationControl(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.stationControlConvert.doShow(operate);
				}
			});
		},
		// 设置列车识别号显示
		setTrainIdDisplay(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.viewTrainId.doShow(operate);
				}
			});
		},
		// 设置设备显示
		setNameDisplay(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.viewName.doShow(operate);
				}
			});
		},
		// 设置名称显示
		setDeviceDisplay(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.viewDevice.doShow(operate);
				}
			});
		},
		// 添加计划车
		addPlanTrain(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.trainAdd.doShow(operate);
				}
			});
		},
		// 平移计划车
		translatPlanTrain(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.trainTranstalet.doShow(operate);
				}
			});
		},
		// 删除计划车
		delPlanTrain(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.trainDelete.doShow(operate);
				}
			});
		},
		// 用户管理
		userManage(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.manageUser.doShow(operate);
				}
			});
		},
		// 关于
		about(order) {
			const operate = {
				type: 'bar',
				operation: order.operation
			};
			this.$store.dispatch('training/next', operate).then(({ valid }) => {
				if (valid) {
					this.closeMenu(true);
					this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
					this.$refs.helpAbout.doShow(operate);
				}
			});
		},
		// 刷新
		refresh() {
			this.closeMenu(true);
			EventBus.$emit('refresh');
		},
		getLoginResult(operate) {
			/** 密码校验*/
			if (operate.operation == OperationEvent.StationControl.forcedStationControl.passwordConfirm.operation) {
				if (operate.success) {
					/** 校验成功*/
					this.$refs.stationControlConvert.doShow({ operation: OperationEvent.StationControl.forcedStationControl.mbar.operation });
				}
			}
		},
		undeveloped() {
			this.doClose();
			
			this.$alert(this.$t('menu.menuBar.implemented'), this.$t('global.tips'), {
				confirmButtonText: this.$t('global.confirm'),
				callback: action => {
				}
			});
		},
		doClose() {
			this.$nextTick(() => {
				EventBus.$emit('closeMenu');
			});
		}
	}
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";
    $width: 30px;
    $height: 30px;
    $menuPadding: 10px;
    $menuItemHeight: 30px;
    $menuItemWidth: 180px;
    $menuItemPadding: 5px;

    #menuBar {
        z-index: 10;
        position: absolute;
        width: inherit;
        height: $height;
        line-height: $height;
    }

    .nav {
        display: block;
        cursor: pointer;
        color: #0000;
        background: -webkit-linear-gradient(#FDFDFE, #DEE3F3);
        background: -o-linear-gradient(#FDFDFE, #DEE3F3);
        background: -moz-linear-gradient(#FDFDFE, #DEE3F3);
        background: linear-gradient(#FDFDFE, #DEE3F3);
        border: 1px solid #B6BCCC !important;
        border-bottom: 2px solid #B6BCCC !important;
        list-style: none;
    }

    .nav-li {
        position: relative;
        display: inline-block;
        padding-left: $menuPadding;
        padding-right: $menuPadding;
    }

    .nav-li:active {
        background: #C9D0E1;
        border-radius: 4px;
    }

    .nav-li-text {
        font-size: 13px;
        color: #000;
        text-align: center;
        text-decoration: none;
    }

    .nav-ul {
        display: none;
        position: absolute;
        list-style: none;
        border: 1px solid gray !important;
        line-height: $menuItemHeight;
        width: $menuItemWidth;
        padding: 0px;
        margin: 0px;
    }

    .menu-ul {
        display: none;
        list-style: none;
        background: #F0F0F0;
        line-height: $menuItemHeight;
        width: $menuItemWidth;
        bottom: $menuItemHeight;
    }

    .active {
        position: absolute;
        display: block !important;
    }

    .menu-ul-text {
        font-size: 14px;
        color: #000;
        letter-spacing: 0;
        height: $menuItemHeight;
        line-height: $menuItemHeight;
    }

    .menu-li {
        text-align: left;
        background: #F0F0F0;
        height: $menuItemHeight;
        line-height: $menuItemHeight;
    }

    .menu-li-block {
        display: flex;
        letter-spacing: 0;
        height: $menuItemHeight;
        line-height: $menuItemHeight;
    }

    .menu-li-text {
        font-size: 14px;
        color: #000;
    }

    .menu-li-text .status {
        display: inline-block;
        border-right: 1px inset #CACACA;
        width: $width;
    }

    .menu-li-text .label {
        display: inline-block;
    }

    .menu-li-block:hover {
        background: #C9DEF7;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
</style>
