<template>
    <div class="proheader" :class="!switchTheme ? 'themeDarks' : 'themeLights'">
        <el-container>
            <el-header :class="getStyle()">
                <div class="logoSty">
                    <img src="../assets/logoGuo_DB.png" alt="">
                </div>
                <div class="proMenu">
                    <el-button-group>
                        <el-button type="primary" v-for="(item,index) in menuData" :key="index" :icon="item.icon"
                            :class="getColor(item.showBac)" @click="changeRoute(item)">
                            {{item.name}}
                        </el-button>
                    </el-button-group>
                    <div class="userMsg">
                        <!-- <span style="margin-right: 10px">{{userName}}</span> -->
                        <el-tooltip class="box-item" effect="light" content="用户设置">
                            <el-icon :size="size" :color="color">
                                <Avatar />
                            </el-icon>
                        </el-tooltip>
                    </div>
                    <div class="divider" style="margin: 0 20px">|</div>
                    <div class="settingStop">
                        <el-tooltip class="box-item" effect="light" content="系统设置">
                            <el-icon class="Settingitem" size="small" :color="color">
                                <Setting />
                            </el-icon>
                        </el-tooltip>
                        <el-switch v-model="switchTheme" :active-action-icon="SunnyIcon"
                            :inactive-action-icon="MoonIcon" @change="changSwith" />
                        <el-tooltip class="box-item" effect="light" content="退出">
                            <el-icon class="outitem" :size="size" :color="color" @click="backLogin"
                                style="margin: 0 15px">
                                <SwitchButton />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </div>
            </el-header>
        </el-container>
    </div>
</template>

<script>
    import httpRequest from '@/utils/request.js'
    import {
        Sunny,
        Moon
    } from '@element-plus/icons-vue'
    import {
        apiGetpersonalInformation
    } from '@/api/api'
    import {
        removeToken
    } from '@/utils/auth'
    export default {
        name: 'headerCom',
        data() {
            return {
                SunnyIcon: Sunny,
                MoonIcon: Moon,
                leftIndex: '1',
                currentTime: '',
                showRole: true,
                menuData: [],
                rainW: false,
                userName: '',
                switchTheme: false
            }
        },
        created() {
            this.menuData = [{
                    index: '/home',
                    icon: 'Menu',
                    name: '首页',
                    showBac: true
                },
                {
                    index: '/generatingCap/dataFilter/prepare',
                    icon: 'Histogram',
                    name: '发电能力分析'
                },
                {
                    index: '/intelligentReport/reporting',
                    icon: 'PictureFilled',
                    name: '智能报表'
                },
                {
                    index: '/powerPrediction/index',
                    icon: 'TrendCharts',
                    name: '功率预测'
                },
            ]
        },
        mounted() {
            let that = this;
            if (!JSON.parse(window.sessionStorage.getItem('theme'))) {
                window.sessionStorage.setItem('theme', false)
            } else {
                this.switchTheme = JSON.parse(window.sessionStorage.getItem('theme'))
                this.$store.state.theme = this.switchTheme
                this.$emit('swichFn', this.switchTheme)
            }
            let userMes = JSON.parse(window.sessionStorage.getItem('userMessage'))
            that.userName = userMes ? userMes.role : 'administrator'
            if (this.$route.query.markKey) {
                that.userName = that.$route.query.userid
            }
            if (userMes && userMes.role === 'ordinaryUser') {
                that.showRole = false
            }
            that.showHeader(that.$route)
        },
        watch: {
            $route: {
                handler: function (route) {
                    console.log('route', route)
                    this.showHeader(route)
                },
                immediate: true
            }
        },
        methods: {
            changSwith(val) {
                this.$emit('swichFn', val)
                window.sessionStorage.setItem('theme', JSON.stringify(this.switchTheme))
                this.$store.state.theme = this.switchTheme
            },
            showHeader(route) {
                this.menuData.forEach(it => {
                    if (route.path.indexOf('powerPrediction') > -1) {
                        if (it.name === '功率预测') {
                            it.showBac = true
                        } else {
                            it.showBac = false
                        }
                    } else if (route.path.indexOf('intelligentReport') > -1) {
                        if (it.name === '智能报表') {
                            it.showBac = true
                        } else {
                            it.showBac = false
                        }
                    } else if (route.path.indexOf('generatingCap') > -1) {
                        if (it.name === '发电能力分析') {
                            it.showBac = true
                        } else {
                            it.showBac = false
                        }
                    } else if (route.path === '/home') {
                        if (it.name === '首页') {
                            it.showBac = true
                        } else {
                            it.showBac = false
                        }
                    } else {
                        it.showBac = false
                    }
                })
            },
            changeRoute(item) {
                window.sessionStorage.setItem('headerRoute', item.index)
                this.$router.push({
                    path: item.index
                })
                this.$emit('headerName', item.name)
            },
            async backLogin() {
                let loginName = this.userName
                if (loginName) {
                    await this.LogoutInfor(loginName)
                }
            },
            // 插入登出信息
            LogoutInfor(name) {
                let that = this
                let onlyData = JSON.parse(window.sessionStorage.getItem('userDatamsg'))
                let loginData = JSON.parse(window.sessionStorage.getItem('loginMsg'))
                if (onlyData) {
                    let paramsLogin = onlyData ? onlyData.identifier : loginData.identific
                    let params = {
                        identifier: paramsLogin,
                        loginName: name
                    }
                    apiGetinsertLogoutInformation(params).then(datas => {
                        if (datas) {
                            let url = location.origin + '/#/login'
                            window.open(url, '_self')
                            location.reload()
                            removeToken()
                        }
                    })
                } else {
                    let url = location.origin + '/#/login'
                    window.open(url, '_self')
                    location.reload()
                    removeToken()
                }

            },
            getStyle() {
                if (this.$route.path === '/weather') {
                    if (this.rainW) {
                        return 'weatherSty'
                    } else {
                        return 'headerSty'
                    }
                }
            },
            getColor(val) {
                let strWea = ''
                if (val) {
                    strWea = 'changeBacksty'
                } else {
                    strWea = 'defaultBacksty'
                }
                return strWea
            },
            //获取个人信息
            getUserMes(id) {
                let params = {
                    userId: id
                }
                apiGetpersonalInformation(params).then(datas => {
                    window.sessionStorage.setItem('userInfo', JSON.stringify(datas.data.user))
                })
            },
            changeDate(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                minute = minute < 10 ? ('0' + minute) : minute;
                var second = date.getSeconds();
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
            },
            nowTime() {
                let that = this;
                let date = new Date()
                this.statusTimer = setInterval(function () {
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    var d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    var h = date.getHours();
                    h = h < 10 ? ('0' + h) : h;
                    var minute = date.getMinutes();
                    minute = minute < 10 ? ('0' + minute) : minute;
                    var second = date.getSeconds();
                    second = second < 10 ? ('0' + second) : second;
                    that.currentTime = y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
                }, 1000)
            },
            handleSelect(index) {
                if (this.leftIndex === index) return
                this.leftIndex = index
                // this.$router.push({path: index})
                console.log(index)
            }
        }
    }
</script>

<style lang="less">
    .proheader {
        // background: #040c0b;
        // position: fixed;
        // top: 0;
        width: 100%;
        z-index: 1999;
        height: 60px;

        .weatherSty {
            background: rgb(74, 87, 100);
        }

        .el-header {
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
            // background: rgb(13, 104, 188);
            // background: rgba(96,103,105,.75);
            color: #fff;
            line-height: 60px;
            height: 60px !important;

            .logoSty {
                padding: 10px 0 0 0;

                img {
                    width: 310px;
                }
            }

            .proMenu {
                .settingStop {
                    .Settingitem {
                        margin-right: 10px;
                    }

                    .outitem {
                        position: relative;
                        top: 2px;
                    }

                    .el-icon {
                        cursor: pointer;
                    }
                }


                .userMsg {
                    margin-left: 150px;

                    .el-icon {
                        cursor: pointer;
                    }
                }

                .divider {
                    position: relative;
                    top: -3px;
                }
            }
        }
    }

    .themeDarks {
        .proMenu {
            display: flex;
            align-items: center;

            .el-button-group {
                .changeBacksty {
                    background: linear-gradient(0deg, transparent, #000);
                }

                .defaultBacksty {
                    background-color: #000 !important;
                }

                .defaultweathersty {
                    background-color: #0d68bc !important;
                }

                .defaultweatherRainsty {
                    background-color: #4a5764 !important;
                }

                .el-button {
                    background-color: #373590;
                    border-color: #8679df;
                    padding: 0 20px;

                    &:hover {
                        background-color: #504bb5;
                    }
                }
            }

            .el-switch {
                position: relative;
                top: -2px;

                .el-switch__core {
                    background: #000;

                    .el-switch__action {
                        .el-icon {
                            background: #000;
                            border-radius: 5px;
                            color: #fff;
                        }
                    }
                }
            }


        }
    }

    .themeLights {
        .proMenu {
            display: flex;
            align-items: center;

            .el-button-group {
                .changeBacksty {
                    background-color: #504bb5 !important;
                }

                .defaultBacksty {
                    background-color: #373590 !important;
                }

                .defaultweathersty {
                    background-color: #0d68bc !important;
                }

                .defaultweatherRainsty {
                    background-color: #4a5764 !important;
                }

                .el-button {
                    background-color: #373590;
                    border-color: #8679df;
                    padding: 0 20px;

                    &:hover {
                        background-color: #504bb5;
                    }
                }
            }

            .el-switch {
                position: relative;
                top: -2px;

                .el-switch__core {
                    background: #373590;

                    .el-switch__action {
                        .el-icon {
                            background: #373590;
                            border-radius: 5px;
                            color: #fff;
                        }
                    }
                }
            }

        }
    }
</style>