<template>
    <div class="screen-header">
        <div class="company-name">
            <img src="../../assets/img/bigScreen/company-name.png" />
        </div>

        <div class="system-name">
            <img src="../../assets/img/bigScreen/system-name.png" />
        </div>
        <div class="desk-menu">
            <div
                class="desk-menu-list"
                v-for="item in menuData"
                :key="item.alias"
                :class="{choose: menuActived == item.alias}"
                @click="enterMenu(item.alias)"
            >
                {{ item.name }}
            </div>
            <div class="desk-normal" v-if="showWorkPlat">
                <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    active-text-color="#fff"
                    background-color="#00000000"
                    text-color="#fff"
                >
                    <el-submenu index="1" :popper-append-to-body="false">
                        <template slot="title">{{
                            workPlatMenu[0].name
                        }}</template>
                        <el-menu-item
                            @click="changeNormal(workItem)"
                            class="menu-item"
                            :index="workItem.name"
                            v-for="(workItem, index) in workPlatMenu[0]
                                .children"
                            :key="index"
                            >{{ workItem.name }}</el-menu-item
                        >
                    </el-submenu>
                </el-menu>
            </div>
        </div>
        <div class="header-tool">
            <div class="tool-weather" :title="weathernow">
                <img class="weather-icon" :src="weatherIcon" alt="image" />
                {{ weathernow }}
            </div>
            <span class="line"></span>
            <div class="tool-day">{{ daynow }}</div>
            <span class="line"></span>
            <div class="tool-time">{{ timenow }}</div>
        </div>
        <div class="logout" @click="handleLogout" title="退出">
            <img
                src="../../assets/img/bigScreen/icon-logout.png"
                style="width: 22px; height: 22px"
            />
        </div>
    </div>
</template>



<script>
import commomAPI from '@/api/bigScreen/common.js'
import utils from '@/utils'
import moment from 'moment'
export default {
    name: 'bigScreen',
    data() {
        return {
            menuData: [],
            workPlatMenu: [],
            showWorkPlat: false,
            timenow: '',
            daynow: '',
            weathernow: '',
            activeIndex: '1',
            weatherIcon: '',
            hournow: '',
            workPlatData: [],
            menuActived: '',
            timer: null,
        }
    },
    mounted() {
        this.menuActived = this.$route.name
        this.getTimeNow()
        this.getWeather()
        this.getMenu()
    },
    methods: {
        getWeather() {
            let ss = sessionStorage.getItem('weathernow')
            if (ss) {
                this.getWeatherIcon(JSON.parse(ss))
            } else {
                commomAPI
                    .queryWeather()
                    .then((res) => {
                        console.log('res', res)
                        // console.log('获取的数据' + res.data.lives[0].weather)
                        this.weathernow = res.data.lives[0].weather
                        this.getWeatherIcon(this.weathernow)
                        sessionStorage.setItem(
                            'weathernow',
                            JSON.stringify(this.weathernow)
                        )
                    })
                    .catch((err) => {
                        console.log('err', err)
                    })
            }
        },
        getMenu() {
            this.$store.dispatch('menu/actionFrontMenus').then((data) => {
                let bigScreen =
                    data && data.filter((item) => item.alias === 'bigScreen')

                if (bigScreen[0].children.length !== 0) {
                    bigScreen[0].children.forEach((item) => {
                        if (item.alias != 'workPlat') {
                            this.menuData.push(item)
                        } else {
                            this.workPlatMenu.push(item)
                        }
                    })
                    if (this.workPlatMenu.length) this.showWorkPlat = true
                }
            })
        },
        // 切换不同大屏菜单
        enterMenu(alias) {
            if (alias == 'workPlat') {
                return
            } else {
                this.$router.push({
                    path: '/' + alias,
                })
            }
        },
        // 切换工作台
        changeNormal(item) {
            console.log('我切换了', item)
            if (item.alias == 'normal') {
                if (
                    item.children[0].length !== 0 &&
                    item.children[0].children.length
                ) {
                    this.$router.push({
                        path: `/platLayout/${item.children[0].children[0].alias}`,
                    })
                } else {
                    this.$router.push({
                        path: `/platLayout/${item.children[0].alias}`,
                    })
                }
            }
        },
        // 退出登陆
        handleLogout() {
            this.$store.dispatch('menu/clearMenus')
            this.$store.dispatch('user/clearUser')
            this.$store.dispatch('menu/setCopyMenus', []) //菜单
            let loginRouthPath =
                localStorage.getItem(
                    this.$store.state.login.currentUser.account +
                        'loginRoutePath'
                ) || '/login'
            this.$store.dispatch('login/logoutAndCleanUp').then(() => {
                switch (window.ssoConfig.mode) {
                    case 'cas':
                    case 'oauth':
                        window.sessionStorage.removeItem('currentUser')
                        window.location.href =
                            window.ssoConfig.logout +
                            '?service=' +
                            window.location.href.split('?')[0]
                        break
                    default:
                        this.$router.push({
                            path: loginRouthPath,
                        })
                        break
                }
            })
        },
        // 实时获取
        getTimeNow() {
            this.daynow = moment().format('YYYY年MM月DD日')
            this.timenow = moment().format('hh:mm:ss')
            this.timer = setInterval(() => {
                this.timenow = moment().format('hh:mm:ss')
            }, 1000)
        },
        clear() {
            clearInterval(this.timer)
        },
        // 工作台二级菜单
        handleSelect(key, keyPath) {
            console.log(key, keyPath)
        },
        // 获取天气icon
        getWeatherIcon(weather) {
            this.hournow = moment().format('hh') // 获取时间 判断半天黑夜
            this.weathernow = weather
            if (
                this.hournow > 6 &&
                this.hournow < 19 &&
                this.weathernow == '晴'
            ) {
                this.weatherIcon = require('@/assets/img/weather/qing.png')
            } else if (
                this.hournow > 6 &&
                this.hournow < 19 &&
                this.weathernow == '多云'
            ) {
                this.weatherIcon = require('@/assets/img/weather/duoyun.png')
            } else if (this.weathernow == '阴') {
                this.weatherIcon = require('@/assets/img/weather/yin.png')
            } else if (this.weathernow == '霾') {
                this.weatherIcon = require('@/assets/img/weather/yin.png')
            } else if (this.weathernow == '雷阵雨') {
                this.weatherIcon = require('@/assets/img/weather/leizhenyu.png')
            } else if (this.weathernow == '雨') {
                this.weatherIcon = require('@/assets/img/weather/xiaoyu.png')
            } else if (this.weathernow == '小雨') {
                this.weatherIcon = require('@/assets/img/weather/xiaoyu.png')
            } else if (this.weathernow == '中雨') {
                this.weatherIcon = require('@/assets/img/weather/zhongyu.png')
            } else if (this.weathernow == '大雨') {
                this.weatherIcon = require('@/assets/img/weather/dayu.png')
            } else if (this.weathernow == '暴雨') {
                this.weatherIcon = require('@/assets/img/weather/baoyu.png')
            } else if (this.weathernow == '大暴雨') {
                this.weatherIcon = require('@/assets/img/weather/baoyu.png')
            } else if (
                this.weathernow == '中雨-大雨' ||
                this.weathernow == '小雨-中雨' ||
                this.weathernow == '大雨-暴雨' ||
                this.weathernow == '暴雨-大暴雨'
            ) {
                this.weatherIcon = require('@/assets/img/weather/dayu.png')
            } else if (this.weathernow.indexOf('风') != -1) {
                this.weatherIcon = require('@/assets/img/weather/dafeng.png')
            } else if (
                this.hournow < 6 &&
                this.hournow > 19 &&
                this.weathernow == '多云'
            ) {
                this.weatherIcon = require('@/assets/img/weather/duoyunye.png')
            } else if (
                this.hournow < 6 &&
                this.hournow > 19 &&
                this.weathernow == '晴'
            ) {
                this.weatherIcon = require('@/assets/img/weather/qingye.png')
            } else {
                this.weatherIcon = require('@/assets/img/weather/yin.png')
            }
        },
        beforeDestroy() {
            this.clear()
        },
    },
}
</script>

<style lang="scss" scoped>

.screen-header{
    position: absolute;
    left: 13px;
    top: 16px;
    width: calc(100% - 26px);
    height: 80px;
    display: flex;
    /* background-color: rgba(107, 107, 107, 0.4); */
    background: url('../../assets/img/bigScreen/header.png') no-repeat center / 100%;

}
.company-name{
  width: 150px;
  height: 100%;
  margin-left: 16px;
}
.company-name img{
    width: 146px;
    height: 34px;
    margin-top: 13px;
}
.system-name{
  width: 180px;
  height: 100%;
  margin-left: 20px;
}
.system-name img{
    width: 180px;
    height: 100%;

}
.desk-menu{
    width: 900px;
    height: 100%;
    margin-left: 112px;
    display: flex;
    font-size: 18px;
    font-weight: 400;
}
.desk-menu-list{
    width: 150px;
    height: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    margin-top: 2px;
    background: url('../../assets/img/bigScreen/bg-list.png') no-repeat center / 158px 63px;
}
.desk-normal{
    width: 150px;
    height: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    margin-top: 2px;
    background: url('../../assets/img/bigScreen/bg-list.png') no-repeat center / 158px 63px;
}
.choose{
    /* background-color:#fbfbfb ; */
    color: #fff;
    font-weight: 700;
    margin-top: 2px;
    background: url('../../assets/img/bigScreen/bg-list-actived.png') no-repeat center / 158px 63px;
}
.header-tool{
  width: 365px;
  height: 100%;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-left: 60px;
  display: flex;
  align-items: center;
}
.tool-weather{
width: 70px;
height: 23px; 
font-size: 14px;
font-weight: 400;
line-height: 23px;
text-align: center;
color: #FFFFFF;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor:default;


}
.tool-day{
border-radius: 0px 0px 0px 0px;
opacity: 1; 
width: 125px;
height: 30px;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
line-height: 30px;
margin-left: 16px;
text-align: center;
}
.tool-time{
border-radius: 0px 0px 0px 0px;
opacity: 1; 
width: 95px;
height: 31px;
font-size: 24px;
font-weight: 700;
color: #FFFFFF;
line-height: 31px;
margin-left: 16px;
}
.line{
  display: inline-block;
  box-sizing: border-box;
  width: 1px;
  height: 10px;
  background: #B2B2B2;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-left: 16px;
}
.logout{
  width: 66px;
  height: 100%;
  margin-left: 28px;
  display: flex;
  align-items: center;
  align-content: space-between;
  cursor: pointer;
}
.logout a{
width: 33px;
height: 16px;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
line-height: 16px;
}
.el-menu{
  background-color: rgba(0,0,0,0);
}
/deep/ .el-submenu .el-submenu__title{
  color: #fff;
  font-size: 18px;
  width: 150px;
  padding-left: 30px;
    padding-right: 16px;
}
/deep/ .el-submenu__title i{
  color: #fff;
  font-size: 14px;
  margin-left: 2px!important;
}
/deep/ .el-menu--horizontal .el-menu{
  width: 160px !important;
  background: linear-gradient(135deg, rgba(122,143,153,0.8) 0%, rgba(138,148,153,0.8) 100%, rgba(92,99,102,0.8) 100%) !important;
  color: #fff;
  border-radius: 4px 4px 4px 4px !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  padding: 0;
}
/deep/ .el-menu.el-menu--horizontal{
  border-bottom: none;
}
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: rgba(0,0,0,0) !important;
}
/deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
    border-bottom: none!important;
}
/deep/ .el-menu--popup .el-menu-item .el-menu{
width: 160px !important;
height: 243px;
background-color: none;
}
.weather-icon{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
/deep/ .el-menu .el-menu-item.menu-item{
    text-align: left!important;
    background-color:rgba(138,148,153,0.8) !important;
    padding-left: 24px;
    position: relative;
}
/deep/ .el-menu .el-menu-item.menu-item::before{
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #00E6E6;
    border-radius: 6px;
    // opacity: 0.8;
    filter: blur(4px);
    display: none;
}
/deep/ .el-menu .el-menu-item.menu-item::after{
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: #00E6E6;
    border-radius: 5px;
    display: none;
}
/deep/ .el-menu .el-menu-item.menu-item:hover{
    background-color: none !important;
}
/deep/ .el-menu .el-menu-item.menu-item:hover::after,/deep/ .el-menu .el-menu-item.menu-item:hover::before{
        display: inline-block;
    }
</style>