<template>
    <header>
        <div class="flex-btn">
            <div class="base-btn">
                <div class="base-btn-part">
                    <span :class="{'span_active' : lineActive == 1}" @click="onActive(1)">综合数据</span>
                    <span :class="{'span_active' : lineActive == 2}" @click="onActive(2)">风险监测</span>
                    <span :class="{'span_active' : lineActive == 3}" @click="onActive(3)">隐患排查</span>
                    <span :class="{'span_active' : lineActive == 4}" @click="onActive(4)">销量监管</span>
                    <span :class="{'span_active' : lineActive == 5}" @click="onActive(5)">大数据</span>
                    <!-- <span :class="{'span_active' : lineActive == 4}" @click="onActive(4)">应急处置</span> -->
                </div>

                <div class="base-btn-part">

                    <el-select v-model="value" placeholder="请选择" @change="ChangeSelect">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <span @click="onClickActive(4)">管理系统</span>

                </div>
            </div>
        </div>
    </header>
</template>

<script>
import eventBus from "@/utils/eventbus"
import { randNum } from "@/utils"

export default {
    data() {
        return {
            lineActive: 1,

            options: [

                {
                    value: '1',
                    label: '非煤矿山'
                },

                {
                    value: '2',
                    label: '煤矿'
                },
                {
                    value: '3',
                    label: '危险化学品企业'
                },
                {
                    value: '4',
                    label: '冶金工贸'
                },
               
            ],
            value: '1'

        };
    },

    mounted() {
        this.onClickActive(1, '非煤矿山')
    },

    methods: {
        onClickActive(index, title) {
            if (index === 4) {
                // window.open('http://dwq.jingkongyun.com/')
               // window.open('http://Ndwq.jingkongyun.com/')
               // window.open('http://192.168.3.226:8083/dashboard')
				window.open('http://120.224.103.84:8083/dashboard')
				return;
            }
            this.$store.commit("SET_IS_LEFT", false);
            this.$store.commit("SET_TITLE", title);
        },

        onActive(index) {
            this.lineActive = index
            this.$store.commit("set_BaseLeftIndex", index);
            const objItem = {
                itemIndex: index,
                randNum: randNum(1, 10000, 1)
            }
            this.$store.commit("SET_IS_LEFT", objItem);
        },

        // 选择类型
        ChangeSelect(e) {
            for (let i of this.options) {
                if (i.value == e) {
                    this.onClickActive(i.value, i.label)
                    return
                }
            }
        },

    },
};
</script>
<style scoped>
/deep/ .el-select {
    width: 270px;
    border: 1px solid #02defa;
}
/deep/ .el-select input {
    border: none !important;
}
</style>