<template>
  <el-select v-if="showSelectStation" v-model="showStation" :style="styleCss" size="small" @change="switchStationMode">
    <el-option v-for="item in stationListMode" :key="item.value" :label="item.name" :value="item.value" />
  </el-select>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
    name:'SelectStation',
    props:{
        styleCss: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            stationListMode: [], // 设备集中站列表
            showStation: '', // 展示的设备集中站
            showSelectStation: false // 是否展示现地选择设备集中站select
        };
    },
    computed:{
        ...mapGetters('map', [
            'map',
            'stationList'
        ])
    },
    watch:{
        'stationList': function () {
            this.setStationList();
        },
        '$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
            this.setMode();
            this.setStationList();
            this.switchStationMode(this.showStation);
        },
        '$store.state.training.centerStationCode': function(code) {
            if (code) {
                this.showStation = code;
            }
        },
        '$store.state.training.prdType': function (val) { // 根据权限类型计算高度
            this.setMode();
        },
        '$store.state.socket.simulationStart':function(val) {
            if (val) {
                if (this.$route.query.lineCode == '06') {
                    this.switchStationMode(this.showStation);// 宁波线 过滤列车显示
                }
            }
        }
    },
    methods:{
        setMode() {
            if (this.map) {
                this.showSelectStation = this.map.skinVO.code === '06' && this.$store.state.training.prdType === '01';
            }
        },
        switchStationMode(val) {
            if (this.stationListMode.length > 0) {
                if (val == null) {
                    this.showStation = this.stationListMode[0].value;
                } else {
                    this.showStation = val;
                }
                const nameList = Object.keys(this.$store.state.map.map);
                let list = [];
                nameList.forEach(item => {
                    if (this.$store.state.map.map[item] && this.$store.state.map.map[item].constructor === Array) {
                        if (item === 'trainList') {
                            this.$store.state.map.map[item].forEach(elem => {
                                elem && list.push(elem);
                            });
                        } else {
                            list = [...list, ...this.$store.state.map.map[item]];
                        }
                    }
                });
                this.$jlmap.updateShowStation(list, this.showStation);
                this.setCenter(this.showStation);
                // this.$store.dispatch('map/setShowCentralizedStationCode', this.showStation);
                // this.$store.dispatch('map/setShowCentralizedStationNum');
            }
        },
        setCenter(code) {
            this.$jlmap.setCenter(code);
        },
        setStationList() {
            this.stationListMode = [];
            (this.stationList || []).forEach(item => {
                if (item.centralized) {
                    this.stationListMode.push({value: item.code, name: item.name});
                }
            });
            if (this.stationListMode.length && this.showSelectStation) {
                this.showStation = this.stationListMode[0].value;
            }
        }
    }
};
</script>
