<template>
  <div class="map-view" :style="{width: canvasWidth+'px',height:'100%',position:'absolute',overflow:'hidden'}">
    <div v-show="maskOpen" class="mask" :style="{'width': maskWidth}" />
    <jlmap-visual ref="jlmapVisual" />
    <div class="display-draft">
      <el-button-group>
        <el-button type="small" @click="back">{{ $t('scriptRecord.scriptBack') }}</el-button>
      </el-button-group>
    </div>
    <menu-system-time ref="menuSystemTime" :offset="15" :group="group" />
    <div class="trainExample">
      <div class="trainExampleL">
        <div class="trainExampleName">车站 颜色图例</div>
        <div class="eachTrainExample">
          <span class="smallExample" />
          <span class="eachTrainExampleName">0 ~ 40</span>
        </div>
        <div class="eachTrainExample">
          <span class="mediumExample" />
          <span class="eachTrainExampleName">40 ~ 80</span>
        </div>
        <div class="eachTrainExample">
          <span class="bigExample" />
          <span class="eachTrainExampleName">80及以上</span>
        </div>
      </div>
      <div class="trainExampleR">
        <div class="trainExampleName">列车 颜色图例</div>
        <div class="eachTrainExample">
          <span class="smallExample" />
          <span class="eachTrainExampleName">0 ~ 100</span>
        </div>
        <div class="eachTrainExample">
          <span class="mediumExample" />
          <span class="eachTrainExampleName">100 ~ 200</span>
        </div>
        <div class="eachTrainExample">
          <span class="bigExample" />
          <span class="eachTrainExampleName">200及以上</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import JlmapVisual from '@/views/newMap/jlmapNew/index';
// import { Notification } from 'element-ui';
import { loadNewMapDataByGroup } from '@/utils/loaddata';
import { clearSimulation, getSimulationInfoNew } from '@/api/simulation';
import { creatSubscribe, clearSubscribe, displayTopic, jl3dTopic} from '@/utils/stomp';
import MenuSystemTime from '@/views/newMap/displayNew/menuSystemTime';
import { getToken } from '@/utils/auth';
import { mapGetters } from 'vuex';
import { timeFormat } from '@/utils/date';
export default {
    name:'PracticeDisplay',
    components: {
        JlmapVisual,
        MenuSystemTime
    },
    data() {
        return {
            maskOpen: false,
            maskWidth: '100%',
            group:''
        };
    },
    computed:{
        ...mapGetters([
            'canvasWidth'
        ]),
        // group() {
        //     return this.$route.query.group;
        // },
        width() {
            return this.$store.state.app.width;
        },
        height() {
            return this.$store.state.app.height;
        }
    },
    watch:{
        '$store.state.map.mapViewLoadedCount':function() {
            this.$store.dispatch('map/setTrainWindowShow', false);
            // this.$jlmap.off('zoom');
            if (this.group) {
                this.subscribe();
            }
        },
        '$store.state.app.windowSizeCount': function() { // 窗口缩放
            this.setWindowSize();
        },
        '$store.state.socket.equipmentStatus': function (val) {
            if (val.length && this.$route.query.group) {
                this.statusMessage(val);
            }
        },
        '$store.state.socket.simulationStart': function(val) {
            this.$store.dispatch('training/simulationStart').then(() => {
                this.$store.dispatch('map/setShowCentralizedStationNum');
            });
        },
        '$store.state.socket.standPfiNum':function(val) {
            const stationNumList = val;
            stationNumList.forEach(stationNum=>{
                stationNum.deviceType = 'STAND';
                stationNum.code = stationNum.standCode;
            });
            this.$store.dispatch('training/updateMapState', stationNumList);
        },
        '$store.state.socket.trainPfiNum':function(val) {
            const trainNumList = this.$store.state.socket.trainPfiNum;
            trainNumList.forEach(stationNum=>{
                stationNum.deviceType = 'TRAIN';
                console.log(stationNum.num, 'inital');
            });
            this.$store.dispatch('training/updateMapState', trainNumList);
        },
        '$store.state.socket.trainPfiBL':function(val) {
            const trainNum = this.$store.state.socket.trainPfiBL;
            const device = this.$store.getters['map/getDeviceByCode'](trainNum.code);
            trainNum.deviceType = 'TRAIN';
            // console.log(trainNum, device, device.num, trainNum.in, trainNum.out, 'changed');
            trainNum.num = device.num + trainNum.in - trainNum.out;
            // console.log(trainNum.num, 'changeder');
            this.$store.dispatch('training/updateMapState', [trainNum]);
        },
        '$store.state.socket.isFirst':function(val) {
            if (val) {
                const header = { group: this.group || '', 'X-Token': getToken() };
                creatSubscribe(`${jl3dTopic}\/${this.$route.query.group}`, header);
            }
        }
    },
    beforeDestroy() {
        this.$store.dispatch('map/mapClear');
        if (this.group) {
            clearSimulation(this.group);
            this.clearSubscribe();
            this.$store.dispatch('socket/resetTrainPassagerNum');
            this.$store.dispatch('socket/setIsFirst', false);
        }
    },
    mounted() {
        this.group = this.$route.query.group;
        this.setWindowSize();
        this.initLoadData();
    },
    methods:{
        async initLoadData() { // 加载地图数据
            if (this.group) {
                this.loadSimulationInfo();
                await loadNewMapDataByGroup(this.group);
            }
        },
        // 缩放设置
        setWindowSize() {
            const width = this.width;
            const height = this.height;
            this.$store.dispatch('config/resize', { width, height });
        },
        async back() {
            // if (this.group) {
            //     await clearSimulation(this.group);
            //     this.clearSubscribe();
            // }
            // this.$store.dispatch('map/setShowCentralizedStationCode', '');
            // history.go(-1);
            // await this.$store.dispatch('map/mapClear');
            // if (this.group) {
            //     await clearSimulation(this.group);
            //     this.clearSubscribe();
            // }
            window.close();
            // Notification.closeAll();
        },
        async statusMessage(list) {
            await this.$store.dispatch('training/updateMapState', list);
            await this.$store.dispatch('socket/setEquipmentStatus');
        },
        async subscribe() {
            this.clearSubscribe();
            const header = { group: this.group || '', 'X-Token': getToken() };
            // creatSubscribe(`${jl3dTopic}\/${this.$route.query.group}`, header);
            creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
            // setTimeout(()=>{

            // }, 500);
            // });
            await this.$store.dispatch('training/setHasSubscribed');
        },
        clearSubscribe() {
            clearSubscribe(`${jl3dTopic}\/${this.group}`);
            clearSubscribe(`${displayTopic}\/${this.group}`);
        },
        async loadSimulationInfo() {
            const resp = await getSimulationInfoNew(this.group);
            if (resp && resp.code == 200 && resp.data) {
                if (!resp.data.dataError) {
                    this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
                    this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));
                    this.$store.dispatch('training/countTime');
                    this.planRunning = resp.data.planRunning;
                    if (resp.data.planRunning) {
                        this.$store.commit('training/start');
                    }
                } else {
                    this.$messageBox('此地图数据正在维护中,无法运行！');
                }
                this.dataError = resp.data.dataError;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.display-draft {
    position: absolute;
    float: right;
    right: 15px;
    bottom: 15px;
}
.trainExample{
    position: absolute;
    width: 360px;
    padding: 10px;
    left: 20px;
    top: 20px;
    color: #fff;
    border: 1px #fff solid;
    border-radius: 3px;
    background: #000;
}
.trainExampleName{margin-bottom: 10px;}
.eachTrainExample{margin-top: 5px;}
.smallExample,.mediumExample,.bigExample{
    width: 50px;
    height: 20px;
    display: inline-block;
}
.eachTrainExampleName{
    vertical-align: top;
    line-height: 23px;
    margin-left: 8px;
}
.smallExample{background: #29a909;}
.mediumExample{background: #ffa500;}
.bigExample{background: #F00;}
.trainExampleL{
    float: left;
    display: inline-block;
    margin-right: 35px;
    margin-left: 10px;
}
.trainExampleR{display: inline-block;}
</style>
