<template>
  <transition name="el-zoom-in-center">
    <div class="map-control">
      <div class="border-card">
        <div class="clearfix">
          <span>
            {{ $t('map.mapName') }}
            <b>{{ mapInfo.name }}</b>
          </span>
          <el-button v-if="isSave" type="text" style="float: right; padding: 3px 0" :disabled="mapSaveing" @click="saveMapEvent">{{ $t('map.save') }}</el-button>
          <el-button v-if="isSave" type="text" style="float: right; padding: 3px 0; margin-right: 5px;" :disabled="mapSaveing" @click="verifyMapEvent">{{ $t('map.dataVerification') }}</el-button>
          <el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="dataRelation">{{ $t('map.advanced') }}</el-button>
          <el-button type="text" style="float: right; padding: 3px 0; margin-right: 5px;" @click="showMap">绘图显隐</el-button>
        </div>
        <el-tabs v-model="enabledTab" class="mapEdit" type="card">
          <el-tab-pane :label="$t('map.section')" class="tab_pane_box" name="Section">
            <section-draft
              ref="Section"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @fieldSelect="fieldSelect"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.switch')" class="tab_pane_box" name="Switch">
            <switch-draft
              ref="Switch"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @fieldSelectSwitchSection="fieldSelectSwitchSection"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.station')" class="tab_pane_box" name="Station">
            <station-draft
              ref="Station"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @stationSectionCode="stationEnabledTab"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.signal')" class="tab_pane_box" name="Signal">
            <signal-draft
              ref="Signal"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @signalSectionCode="selectEnabledTab"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.platform')" class="tab_pane_box" name="StationStand">
            <station-stand-draft
              ref="StationStand"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @standStationCode="standStationTab"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.psd')" class="tab_pane_box" name="Psd">
            <psd-draft
              ref="PsdDraft"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @standStationCode="psdTab"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.platformEmergencyStop')" class="tab_pane_box" name="Esp">
            <esp-draft
              ref="EspDraft"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
              @standStationCode="esqTab"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.trainWindow')" class="tab_pane_box" name="TrainWindow">
            <train-window-draft
              ref="TrainWindow"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.zcZoneControl')" class="tab_pane_box" name="ZcControl">
            <zc-control-draft
              ref="ZcControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.functionButton')" class="tab_pane_box" name="ControlDraft">
            <control-draft
              ref="ControlDraft"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.saidLamp')" class="tab_pane_box" name="ControlLamp">
            <control-lamp
              ref="ControlLamp"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.train')" class="tab_pane_box" name="Train">
            <train-draft
              ref="Train"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.line')" class="tab_pane_box" name="Line">
            <line-draft
              ref="Line"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.text')" class="tab_pane_box" name="Text">
            <text-draft
              ref="Text"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.lcControl')" class="tab_pane_box" name="LcControl">
            <lc-control-draft
              ref="LcControl"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.rectangularBox')" class="tab_pane_box" name="OutFrame">
            <out-frame-draft
              ref="OutFrame"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.image')" class="tab_pane_box" name="Resource">
            <Image-control-draft
              ref="Resource"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('map.boundingBox')" class="tab_pane_box" name="CheckBox">
            <checkbox-draft
              ref="CheckBox"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
          <el-tab-pane label="站间分隔" class="tab_pane_box" name="SplitStation">
            <split-station
              ref="SplitStation"
              :selected="selected"
              @updateMapModel="updateMapModel"
              @setCenter="setCenter"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </transition>
</template>

<script>
import SectionDraft from './section/index';
import SwitchDraft from './switch/index';
import SignalDraft from './signal/index';
import StationDraft from './station';
import StationStandDraft from './stationstand';
import PsdDraft from './psdDraft';
import EspDraft from './espDraft';
import TrainDraft from './train/index';
import LineDraft from './line';
import TextDraft from './text';
import ControlDraft from './ControlDraft';
import TrainWindowDraft from './trainwindow';
import ZcControlDraft from './zcControl';
import OutFrameDraft from './outFrameControl';
import LcControlDraft from './lcControl';
import ImageControlDraft from './ImageControl';
import CheckboxDraft from './checkboxDraft';
import ControlLamp from './controlLamp';
import SplitStation from './splitStation';

import { ViewMode } from '@/scripts/ConstDic';

export default {
    name: 'MapOperate',
    components: {
        // CounterDraft,
        SectionDraft,
        SwitchDraft,
        SignalDraft,
        StationDraft,
        StationStandDraft,
        PsdDraft,
        EspDraft,
        ControlDraft,
        TrainWindowDraft,
        TrainDraft,
        LineDraft,
        TextDraft,
        ZcControlDraft,
        OutFrameDraft,
        LcControlDraft,
        ImageControlDraft,
        CheckboxDraft,
        ControlLamp,
        SplitStation
    },
    props: {
        selected: {
            type: Object,
            default: function () {
                return null;
            }
        },
        mapInfo: {
            type: Object,
            default: function() { return {name: this.$t('map.pleaseSelectMap')}; }
        },
        mapSaveing: [Boolean]
    },
    data() {
        return {
            feild: '',
            singlaType: '',
            stationType: '',
            switchType: '',
            stationStandType:'',
            psdType: '',
            ViewMode: ViewMode,
            enabledTab: 'Section',
            autoSaveTask: null,
            show: {
                mapEditShow: false,
                mapPaintShow: true
            },
            oldDevice: null
        };
    },
    computed: {
        isSave() {
            return this.mapInfo && this.mapInfo.id;
        }
    },
    watch: {
        '$store.state.map.deleteCount': function (val) {
            if (this.selected) {
                this.$refs[this.enabledTab].deleteObj();
            }
        },
        '$store.state.map.updateCount': function (val) {
            this.$refs[this.enabledTab].edit();
        }
    },
    mounted() {
    },
    methods: {
        dataRelation() {
            this.$emit('selectView', 'path');
        },
        showMap() {
            this.$emit('showMap');
        },
        handleSelectControlPage(device) {
            const controlLampTypeList = ['AtsControl', 'CenterCommunication', 'ChainControl', 'IntersiteControl', 'LeuControl', 'LocalControl', 'Maintain',
                'PowerSupply', 'NoOneReturn', 'MaintenanceLamps', 'ZcCommunication', 'FaultStatusGroup', 'ModeStatusGroup', 'LampFilament', 'ReturnModeGroup', 'ControlSwitch', 'Axle'];
            const type = device._type;
            if (this.stationType) {
                this.enabledTab = 'Station';
            } else if (this.switchType) {
                this.enabledTab = 'Switch';
            } else if (this.singlaType) {
                this.enabledTab = 'Signal';
            } else if (this.stationStandType) {
                this.enabledTab = 'StationStand';
            } else if (this.psdType) {
                this.enabledTab = 'Psd';
            } else if (this.esqType) {
                this.enabledTab = 'Esp';
            } else if (this.feild) {
                this.enabledTab = 'Section';
            } else if (type == 'AutomaticRoute' || type == 'AutoTurnBack' || type == 'AxleReset' || type == 'LimitControl' || type == 'GuideLock') {
                this.enabledTab = 'ControlDraft';
            } else if (controlLampTypeList.includes(type)) {
                this.enabledTab = 'ControlLamp';
            } else {
                this.enabledTab = type;
            }
        },
        esqTab(type) {
            this.esqType = type;
        },
        psdTab(type) {
            this.psdType = type;
        },
        standStationTab(type) {
            this.stationStandType = type;
        },
        stationEnabledTab(type) {
            this.stationType = type;
        },
        selectEnabledTab(type) {
            this.singlaType = type;
        },
        fieldSelect(type) {
            this.feild = type;
        },
        fieldSelectSwitchSection(type) {
            this.switchType = type;
        },
        handleSelectLogicalView(handle) {
            this.$emit('handleSelectLogicalView', handle);
        },
        handleSelectPhysicalView(handle) {
            this.$emit('handleSelectPhysicalView', handle);
        },
        saveMapEvent() {
            this.$emit('saveMapEvent');
        },
        verifyMapEvent() {
            this.$emit('verifyMapEvent');
        },
        updateMapModel(obj) {
            this.$emit('updateMapModel', obj);
        },
        setCenter(code) {
            this.$emit('setCenter', code);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .map-context {
        display: block;
        float: left;
        margin-left: 5px;
    }

    .map-control {
        float: right;
        width: 100%;
        height: 100%;
        .border-card{
            height: 100%;
        }
    }

    .physical-view {
        line-height: 25px;
        height: 118px;
        padding-left: 12px;

        .el-checkbox {
            width: 70px;
            margin: 0;
            margin-right: 30px;
        }
    }

    .clearfix{
        height: 47px;
        padding: 15px
    }
    .mapEdit{
        height: calc(100% - 47px);
        .tab_pane_box{
            height: 100%;
        }
    }

    /deep/ .button_box{
        width: 100%;
        background: #ffffff;
        overflow: hidden;
        border-top: 1px #f3f1f1 solid;
        box-shadow: 4px 7px 10px #565656;
        border-radius: 0;
        border-bottom: 1px transparent solid;
	}

    /deep/ .map-draft-group {
        float: right;
        margin: 6px 5px;
    }

    /deep/ .view-control {
            overflow-y: auto;
        }

    /deep/ {
		.mapEdit .el-tabs__nav-wrap.is-scrollable  {
			padding: 0 20px;
		}
		.mapEdit .el-tabs__header .el-tabs__item.is-active {
			border-bottom-color: #f5f7fa;
			background: #f5f7fa;
		}
		.mapEdit .el-tabs__active-bar{
			background: transparent;
		}
		.mapEdit .el-tabs__content {
			height: calc(100% - 56px);
		}

		.card .el-tabs__nav .el-tabs__item.is-active {
			border-bottom: 2px solid #E4E7ED;
			background: #409eff;
			color: #fff;
		}
		.card .el-tabs__nav .el-tabs__item{
			padding: 0 20px!important;
		}

		.mapEdit .el-tabs__nav-prev {
			width: 20px;
			height: 41px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 1px 1px 4px #ccc;
		}

		.mapEdit .el-tabs__nav-next {
			width: 20px;
			height: 41px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 1px 1px 4px #ccc;
		}
	}

    // 页面页签样式
    /deep/ {
		.card .el-transfer-panel__filter{
			margin: 5px 15px;
		}
		.card .el-transfer-panel__list.is-filterable{
			height: 290px;
		}

		.card .el-transfer-panel__body{
			height: 328px;
		}
		.card .el-transfer__buttons{
			padding: 0 16px;
		}

		.card .el-transfer{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
