<template>
  <div v-loading="loading" class="joylink-card map-list-main">
    <div class="clearfix">
      <div>iscs系统列表</div>
    </div>
    <div class="text_item">
      <!--<el-cascader v-model="mapStationList" style="width: 100%;" :props="props" placeholder="请选择车站" @change="handleChange" />-->
      <!--<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />-->
      <div style="border-bottom: 1px solid #EBEEF5; padding: 10px 10px;">
        <el-select v-model="lineCode" size="mini" placeholder="请选择线路">
          <el-option
            v-for="item in lineList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </div>
      <div class="tree_box">
        <el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent" @node-contextmenu="showContextMenu">
          <span slot-scope="{ node:tnode, data }">
            <span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
            <span>&nbsp;{{ tnode.label }}</span>
          </span>
        </el-tree>
      </div>
      <div class="buttonList">
        <!--<el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>-->
      </div>
    </div>
  </div>
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
import { removeSessionStorage } from '@/utils/auth';
import { getPublishMapListOnline, getStationListNeedAttendant } from '@/api/jmap/map';
import { getLineCodeList } from '@/api/management/mapline';

export default {
    name: 'UserMapList',
    data() {
        return {
            loading: false,
            defaultShowKeys: [],
            filterText: '',
            selected: {},
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            point: {
                x: 0,
                y: 0
            },
            editModel: {},
            lineCode: '',
            mapList: [],
            mapStationList: [],
            lineList: [],
            pageTreeMap: {
                '01': [],
                '02': [
                    {
                        // 牵引降压混合变电所主接线图 变电所接线图 降压变电所主接线图 解除网图 混合变电所主接线图
                        name: '电力监控系统',
                        mode: 'powerMonitoring02',
                        id: 'powerMonitoring',
                        type: 'totalSystem',
                        children: [
                            {
                                name: '黄山变电所接线图',
                                mode: 'powerMonitoring02',
                                id: 'substation',
                                type: 'interface'
                            },
                            {
                                name: '降压变电所主接线图',
                                mode: 'powerMonitoring02',
                                id: 'stepDown',
                                type: 'interface'
                            },
                            {
                                name: '控制中心图',
                                mode: 'powerMonitoring02',
                                id: 'hybrid',
                                type: 'interface'
                            },
                            {
                                name: '牵引降压混合变电所主接线图',
                                mode: 'powerMonitoring02',
                                id: 'combined',
                                type: 'interface'
                            },
                            {
                                name: '停车场接触网图',
                                mode: 'powerMonitoring02',
                                id: 'catenary',
                                type: 'interface'
                            }
                        ]
                    },
                    {
                        name: '环境与设备监控系统',
                        mode: 'environment02',
                        id: 'environment',
                        type: 'totalSystem',
                        children: [
                            {
                                name: '大系统',
                                mode: 'environment02',
                                id: 'environmentOne',
                                type: 'interface'
                            },
                            {
                                name: '冷水系统',
                                mode: 'environment02',
                                id: 'environmentTwo',
                                type: 'interface'
                            },
                            {
                                name: '隧道通风系统',
                                mode: 'environment02',
                                id: 'environmentThree',
                                type: 'interface'
                            },
                            {
                                name: '车站小系统1',
                                mode: 'environment02',
                                id: 'environmentFour',
                                type: 'interface'
                            }
                        ]
                    },
                    {
                        name: '自动售检票/门禁',
                        mode: 'afc02',
                        id: 'afc',
                        type: 'totalSystem',
                        children: [
                            {
                                name: '自动售检票系统',
                                mode: 'afc02',
                                id: 'autoTicket',
                                type: 'interface'
                            },
                            {
                                name: '门禁系统',
                                mode: 'afc02',
                                id: 'entranceGuard',
                                type: 'system',
                                children: [
                                    {
                                        name: '站厅层',
                                        mode: 'afc02',
                                        id: 'afcOne02',
                                        type: 'interface'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: '火灾报警系统',
                        mode: 'fas02',
                        id: 'fas',
                        type: 'totalSystem',
                        children: [
                            {
                                name: '火灾报警系统-FAS联动',
                                mode: 'fas02',
                                id: 'linkage',
                                type: 'interface'
                            },
                            {
                                name: '火灾报警系统-站厅层',
                                mode: 'fas02',
                                id: 'stationHall',
                                type: 'system',
                                children: [
                                    {
                                        name: '站厅层',
                                        mode: 'fas02',
                                        id: 'stationHallOne',
                                        type: 'interface'
                                    },
                                    {
                                        name: '站厅层A端',
                                        mode: 'fas02',
                                        id: 'stationHallTwo',
                                        type: 'interface'
                                    },
                                    {
                                        name: '站厅层B端',
                                        mode: 'fas02',
                                        id: 'stationHallThree',
                                        type: 'interface'
                                    },
                                    {
                                        name: '站厅层公共区段',
                                        mode: 'fas02',
                                        id: 'stationHallFour',
                                        type: 'interface'
                                    }
                                ]
                            },
                            {
                                name: '火灾报警系统-站台层',
                                mode: 'fas02',
                                id: 'platform',
                                type: 'system',
                                children: [
                                    {
                                        name: '站台层',
                                        mode: 'fas02',
                                        id: 'platformOne',
                                        type: 'interface'
                                    },
                                    {
                                        name: '站台层A端',
                                        mode: 'fas02',
                                        id: 'platformTwo',
                                        type: 'interface'
                                    },
                                    {
                                        name: '站台层B端',
                                        mode: 'fas02',
                                        id: 'platformThree',
                                        type: 'interface'
                                    },
                                    {
                                        name: '站台层公共区段',
                                        mode: 'fas02',
                                        id: 'platformFour',
                                        type: 'interface'
                                    }
                                ]
                            },
                            {
                                name: '火灾报警系统-区间',
                                mode: 'fas02',
                                id: 'section',
                                type: 'interface'
                            },
                            {
                                name: '感温光纤探测系统',
                                mode: 'fas02',
                                id: 'sensing',
                                type: 'interface'
                            },
                            {
                                name: '气体灭火系统',
                                mode: 'fas02',
                                id: 'gas',
                                type: 'interface'
                            }
                        ]
                    },
                    {
                        name: '信号系统',
                        mode: 'signalSystem02',
                        id: 'signalSystem',
                        type: 'totalSystem',
                        children: [
                            // 暂时没有 系统界面 介绍
                            // {
                            //     name: 'TIS管理器',
                            //     mode: 'signalSystem02',
                            //     id: 'tis',
                            //     type: 'interface'
                            // },
                            // {
                            //     name: '列车时刻表',
                            //     mode: 'signalSystem02',
                            //     id: 'schedule',
                            //     type: 'interface'
                            // },
                            // 这两个内容 不清晰
                            {
                                name: '信号系统',
                                mode: 'signalSystem02',
                                id: 'signal',
                                type: 'interface'
                            },
                            {
                                name: '全线信号系统界面',
                                mode: 'signalSystem02',
                                id: 'allLineSignal',
                                type: 'interface'
                            }
                        ]
                    },
                    {
                        name: '屏蔽门系统',
                        mode: 'psdSystem02',
                        id: 'psdSystem',
                        type: 'totalSystem',
                        children: [
                            {
                                name: '屏蔽门系统',
                                mode: 'psdSystem02',
                                id: 'psdOne',
                                type: 'interface'
                            }
                        ]
                    },
                    {
                        name: '通信',
                        mode: 'communication02',
                        id: 'communication',
                        type: 'totalSystem',
                        children: [
                            // 不用画图
                            // {
                            //     name: '乘客信息显示系统',
                            //     mode: 'communication02',
                            //     id: 'pis',
                            //     type: 'system',
                            //     children: [

                            //     ]
                            // },
                            // {
                            //     name: '广播系统',
                            //     mode: 'communication02',
                            //     id: 'broadcasting',
                            //     type: 'system',
                            //     children: [

                            //     ]
                            // },
                            {
                                name: '闭路电视',
                                mode: 'communication02',
                                id: 'cctv',
                                type: 'system',
                                children:[
                                    {
                                        name: '站厅',
                                        mode: 'communication02',
                                        id: 'basOne',
                                        type: 'interface'
                                    },
                                    {
                                        name: '上行站台',
                                        mode: 'communication02',
                                        id: 'basTwo',
                                        type: 'interface'
                                    },
                                    {
                                        name: '下行站台',
                                        mode: 'communication02',
                                        id: 'basThree',
                                        type: 'interface'
                                    },
                                    {
                                        name: '地下一层',
                                        mode: 'communication02',
                                        id: 'basFour',
                                        type: 'interface'
                                    },
                                    {
                                        name: '地下二层',
                                        mode: 'communication02',
                                        id: 'basFive',
                                        type: 'interface'
                                    }
                                ]
                            }
                        ]
                    }],
                '03': [],
                '04': [],
                '05': [],
                '06': [],
                '07': [{
                    name: 'FAS界面',
                    mode: 'fas',
                    id: 'fas',
                    type: 'totalSystem',
                    children: [
                        {
                            name: '站厅报警',
                            mode: 'fas',
                            id: 'stationHall',
                            type: 'system',
                            children: [
                                {
                                    name: '站厅报警',
                                    mode: 'fas',
                                    id: 'stationHall',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '站台报警',
                            mode: 'fas',
                            id: 'stand',
                            type: 'system',
                            children: [
                                {
                                    name: '站台报警',
                                    mode: 'fas',
                                    id: 'stand',
                                    type: 'interface'
                                },
                                {
                                    name: '公共区域',
                                    mode: 'fas',
                                    id: 'standPublicArea',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '系统状态',
                            mode: 'fas',
                            id: 'systemState',
                            type: 'system',
                            children: [
                                {
                                    name: '系统状态',
                                    mode: 'fas',
                                    id: 'systemState',
                                    type: 'interface'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'BAS界面',
                    mode: 'bas',
                    id: 'bas',
                    type: 'totalSystem',
                    children: [
                        {
                            name: '大系统',
                            mode: 'bas',
                            id: 'bigSystem',
                            type: 'system',
                            children:[
                                {
                                    name: '大系统',
                                    mode: 'bas',
                                    id: 'bigSystem',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '小系统',
                            mode: 'bas',
                            id: 'smallSystem',
                            type: 'system',
                            children: [
                                {
                                    name: '小系统A端(一)',
                                    mode: 'bas',
                                    id: 'aSideOne',
                                    type: 'interface'
                                },
                                {
                                    name: '小系统A端(二)',
                                    mode: 'bas',
                                    id: 'aSideTwo',
                                    type: 'interface'
                                },
                                {
                                    name: '小系统B端',
                                    mode: 'bas',
                                    id: 'bSide',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '水系统',
                            mode: 'bas',
                            id: 'waterSystem',
                            type: 'system',
                            children: [
                                {
                                    name: '水系统',
                                    mode: 'bas',
                                    id: 'waterSystem',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '照明',
                            mode: 'bas',
                            id: 'lightingSystem',
                            type: 'system',
                            children: [
                                {
                                    name: '照明系统',
                                    mode: 'bas',
                                    id: 'lightingSystem',
                                    type: 'interface'
                                },
                                {
                                    name: 'EPS系统',
                                    mode: 'bas',
                                    id: 'epsSystem',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '电扶梯',
                            mode: 'bas',
                            id: 'electricEscalator',
                            type: 'system',
                            children: [
                                {
                                    name: '电扶梯',
                                    mode: 'bas',
                                    id: 'electricEscalator',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '机电排水',
                            mode: 'bas',
                            id: 'waterSupply',
                            type: 'system',
                            children: [
                                {
                                    name: '机电排水',
                                    mode: 'bas',
                                    id: 'waterSupply',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '隧道通风',
                            mode: 'bas',
                            id: 'tunnelVentilation',
                            type: 'system',
                            children: [
                                {
                                    name: '隧道通风',
                                    mode: 'bas',
                                    id: 'tunnelVentilation',
                                    type: 'interface'
                                },
                                {
                                    name: '射流风机图',
                                    mode: 'bas',
                                    id: 'jetFan',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '车站网络',
                            mode: 'bas',
                            id: 'stationNet',
                            type: 'system',
                            children: [
                                {
                                    name: '车站网络',
                                    mode:'bas',
                                    id: 'stationNet',
                                    type: 'interface'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'PSD界面',
                    mode: 'psd',
                    id: 'psd',
                    type: 'totalSystem',
                    children: [
                        {
                            name: '屏蔽门',
                            mode: 'psd',
                            id: 'psd',
                            type: 'system',
                            children: [
                                {
                                    name: '屏蔽门',
                                    mode: 'psd',
                                    id: 'psd',
                                    type: 'interface'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'cctv界面',
                    mode: 'cctv',
                    id: 'cctv',
                    type: 'system',
                    children: [
                        {
                            name: '车站控制',
                            mode: 'cctv',
                            id: 'cctv',
                            type: 'system',
                            children: [
                                {
                                    name: '站厅',
                                    mode: 'cctv',
                                    id: 'stationHall',
                                    type: 'interface'
                                },
                                {
                                    name: '站台',
                                    mode: 'cctv',
                                    id: 'stand',
                                    type: 'interface'
                                },
                                {
                                    name: '云台',
                                    mode: 'cctv',
                                    id: 'holder',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '中心设备状态',
                            mode: 'cctv',
                            id: 'centralDeviceState',
                            type: 'system',
                            children: [
                                {
                                    name: '中心设备状态',
                                    mode: 'cctv',
                                    id: 'centralDeviceState',
                                    type: 'interface'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'AFC界面',
                    mode: 'afc',
                    id: 'afc',
                    type: 'totalSystem',
                    children: [
                        {
                            name: '售检票',
                            mode: 'afc',
                            id: 'afc',
                            type: 'system',
                            children: [
                                {
                                    name: '售检票',
                                    mode: 'afc',
                                    id: 'afc',
                                    type: 'interface'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'ACS界面',
                    mode: 'acs',
                    id: 'acs',
                    type: 'totalSystem',
                    children: [
                        {
                            name: '门禁-站台层',
                            mode: 'acs',
                            id: 'acs',
                            type: 'system',
                            children: [
                                {
                                    name: '门禁-站台层',
                                    mode: 'acs',
                                    id: 'stand',
                                    type: 'interface'
                                }
                            ]
                        },
                        {
                            name: '门禁-站厅层',
                            mode: 'acs',
                            id: 'acs',
                            type: 'system',
                            children: [
                                {
                                    name: '门禁-站厅层',
                                    mode: 'acs',
                                    id: 'stationHall',
                                    type: 'interface'
                                }
                            ]
                        }
                    ]
                },
                {
                    name: '网络状态',
                    mode: 'netState',
                    id: 'netState',
                    type: 'totalSystem',
                    children: [
                        {
                            name: '网络状态',
                            mode: 'netState',
                            id: 'netState',
                            type: 'system',
                            children: [
                                {
                                    name: '网络状态',
                                    mode: 'netState',
                                    id: 'netState',
                                    type: 'interface'
                                }
                            ]
                        }
                    ]
                }],
                '08': [],
                '09': [],
                '10': [],
                '11': [],
                '12': []
            }
        };
    },
    computed: {
        props() {
            const self = this;
            return {
                lazy: true,
                lazyLoad (node, resolve) {
                    const { level } = node;
                    let nodes = [];
                    if (level === 1) {
                        getStationListNeedAttendant(node.data.value).then(resp => {
                            nodes = resp.data.map(elem => { return {value: elem.code, label: elem.name, leaf: true}; });
                            resolve(nodes);
                        }).catch(() => {
                            self.$message.error('获取车站列表失败');
                            resolve(nodes);
                        });
                    } else if (!level) {
                        getPublishMapListOnline().then(resp => {
                            nodes = resp.data.map(elem => { return { value: elem.id, label: elem.name, leaf: false }; });
                            resolve(nodes);
                        }).catch(() => {
                            self.$message.error('获取地图列表失败！');
                            resolve(nodes);
                        });
                    }
                }
            };
        },
        treeList() {
            if (this.lineCode) {
                return this.pageTreeMap[this.lineCode];
            } else {
                return [];
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        mapStationList(val) {
            // console.log(val);
        }
    },
    beforeDestroy () {
        removeSessionStorage('demonList');
    },
    mounted() {
        if (this.$route.query.lineCode) {
            this.lineCode = this.$route.query.lineCode;
        }
        getLineCodeList().then(resp => {
            this.lineList = resp.data || [];
        }).catch(() => {
            this.$message.error('获取线路列表异常！');
        });
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        createMap() {
            this.$emit('createMap');
        },
        clickEvent(obj, data, ele) {
            switch (obj.type) {
            case 'totalSystem':
                break;
            case 'system' :
                break;
            case 'interface':
                this.$router.push({ path: `/iscs/design/edit`, query: {mode: obj.mode, system: data.parent.data.id, part: obj.id, lineCode: this.lineCode} });
                break;
            }
        },
        showContextMenu(e, obj, node, vueElem) {
            const deviceMenuMap = { system: DeviceMenu.IscsSystem, interface: DeviceMenu.IscsInterface };
            if (obj && (obj.type == 'system' || obj.type == 'interface')) {
                e.preventDefault();
                const menu = deviceMenuMap[obj.type];
                this.point = {
                    x: e.clientX,
                    y: e.clientY
                };
                this.editModel = obj;
                this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
	.clearfix{
		padding: 0 20px;
		border-bottom: 1px solid #EBEEF5;
		box-sizing: border-box;
		height: 47px;
		line-height: 47px;
        position: absolute;
        width:100%;
		display: flex;
		justify-content: space-between;
	}
    .text_item{
        height: 100%;
        padding-top: 47px;
        .tree_box{
            height: calc(100% - 89px);
            overflow-y: auto;
        }
    }
    .buttonList{
        padding: 8px 0px 8px 0px;
        border-top: 1px #ccc solid;
    }
    .eachButton{
        margin-left:10px;
    }
    .uploadDemo {
        position: relative;
        overflow: hidden;
        // float: right;
        padding: 9px 15px;
        margin-right: 3px;
        cursor: pointer;
        input {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }
    }
    .map-list-main{
        text-align:left;
		height: 100%;
        position: relative;
    }
</style>
