<template>
  <div
    class="d2-layout-header-aside-group"
    :style="styleLayoutMainGroup"
    :class="{ grayMode: grayActive }"
  >
    <!-- 半透明遮罩 -->
    <div class="d2-layout-header-aside-mask"></div>
    <!-- 主体内容 -->
    <div class="d2-layout-header-aside-content" flex="dir:top">
      <!-- 顶栏 -->
      <div class="d2-theme-header" flex-box="0" flex>
        <div class="logo-group" flex-box="0">
          <img class="img-logo-all" src="./imgs/logo2x.png" />
        </div>
        <d2-menu-header class="menu-header" flex-box="1" />
        <!-- 顶栏右侧 -->
        <div>
          <div class="d2-header-right">
            <div class="time-container">
              <!-- 当前时间 -->
              <div class="current-time">{{ time | formatDate }}</div>
              <div class="current-date">{{ time | formatDate2 }}</div>
            </div>
            <!-- <div class="subway-container">
              <div class="subway-info">
                <span :class="station.length < 6 ? 'lineFeed' : ''">{{
                  station
                }}</span>
              </div>
              <div class="user-img"><img src="./imgs/subway.png" /></div>
            </div> -->

            <!-- 主题 -->
            <d2-header-theme />
            <el-badge
              class="msg-img"
              :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum"
              type="danger"
            >
              <div title="报警中心" style="cursor: pointer" @click="toAlarms">
                <img src="./imgs/msg.png" />
              </div>
            </el-badge>
            <d2-header-user />
            <div
              title="退出"
              class="msg-img"
              style="cursor: pointer;"
              @click="logOff"
            >
              <img src="./imgs/out.png" />
            </div>
            <!-- <div class="subway-container" @click="logOff">
              <div class="user-img"><img src="./imgs/user.png" /></div>
              <div class="subway-info">
                <d2-header-user class="subway-title" />
                <div class="out-img">
                  <img src="./imgs/out.png" />
                  <span>退出</span>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 下面 主体 -->
      <div class="d2-theme-container" flex-box="1" flex>
        <!-- 主体 侧边栏 -->
        <!-- <div
                  flex-box="0"
                  ref="aside"
                  class="d2-theme-container-aside"
                  :style="{
                    width: asideCollapse ? asideWidthCollapse : asideWidth,
                    opacity: this.searchActive ? 0.5 : 1
                  }"
                >
                  <d2-menu-side />
                </div>-->
        <!-- 主体 -->
        <div class="d2-theme-container-main" flex-box="1" flex>
          <!-- 内容 -->
          <transition name="fade-scale">
            <div class="d2-theme-container-main-layer" flex="dir:top">
              <home v-if="$route.matched[0].name == 'ol'"></home>
              <sys v-if="$route.matched[0].name == 'sys'"></sys>
              <monitor v-if="$route.matched[0].name == 'monitor'"></monitor>
              <access v-if="$route.matched[0].name == 'access'"></access>
              <police v-if="$route.matched[0].name == 'police'"></police>
              <inspect v-if="$route.matched[0].name == 'inspect'"></inspect>
              <patrol v-if="$route.matched[0].name == 'patrol'"></patrol>
              <eme v-if="$route.matched[0].name == 'em'"></eme>
              <eq v-if="$route.matched[0].name == 'eq'"></eq>
              <plan v-if="$route.matched[0].name == 'plan'"></plan>
              <linkage v-if="$route.matched[0].name == 'linkage'"></linkage>
              <alarms v-if="$route.matched[0].name == 'alarms'"></alarms>
              <!-- 线路级 -->
              <rEme v-if="$route.matched[0].name == 'routes-em'"></rEme>
              <rSys v-if="$route.matched[0].name == 'routes-sys'"></rSys>
              <rPlan v-if="$route.matched[0].name == 'routes-plan'"></rPlan>
              <rEq v-if="$route.matched[0].name == 'routes-eq'"></rEq>
              <rAna v-if="$route.matched[0].name == 'routes-analysis'"></rAna>
              <!-- 页面 -->
              <div
                class="d2-theme-container-main-body"
                flex-box="1"
                style="background-color: white"
              >
                <!-- <bim></bim> -->
                <keep-alive :include="keepAlive">
                  <router-view />
                </keep-alive>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <!-- <el-button @click="drawer = true" type="primary" >
               点我打开
             </el-button>

             <el-drawer
               title="我是标题"
               direction="btt"
               :visible.sync="drawer"
               :with-header="false">
               <span>我来啦!</span>
             </el-drawer> -->

      <div style="z-index:9999!important;user-select:none;" class="mfooter">
        Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
        电话：86-028-689XXXX 传真：86-028-6893XXXX
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search'
import util from '@/libs/util.js'

export default {
  name: 'd2-layout-header-aside',
  mixins: [mixinSearch],
  components: {
    'd2-menu-side': () => import('./components/menu-side'),
    'd2-menu-header': () => import('./components/menu-header'),
    'd2-header-theme': () => import('./components/header-theme'),
    'd2-header-user': () => import('./components/header-user'),
    home: () => import('../../pages/ol/index.vue'),
    sys: () => import('../../pages/sys/index.vue'),
    monitor: () => import('../../pages/monitor/index.vue'),
    patrol: () => import('../../pages/patrol/index.vue'),
    eq: () => import('../../pages/eq/index.vue'),
    alarms: () => import('../../pages/alarms/index.vue'),
    bim: () => import('./components/bim')
  },
  data() {
    return {
      drawer: false,
      // [侧边栏宽度] 正常状态
      asideWidth: '220px',
      // [侧边栏宽度] 折叠状态
      asideWidthCollapse: '65px',
      time: new Date(),
      timer: null,
      logTimeout: null,
      countNum: 0,
      station: ''
    }
  },
  mounted() {
    this.getStation()
    this.getDate()
    this.countNum = this.size
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value)
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return ` ${h}:${m}:${s}`
    },
    formatDate2: function(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let week = date.getDay()
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      let getWeek = '星期' + weeks[week]
      // return `${y}/${MM}/${d} ${getWeek} `
      return `${MM}/${d} ${getWeek} `
    }
  },

  computed: {
    ...mapState('d2admin', {
      keepAlive: (state) => state.page.keepAlive,
      grayActive: (state) => state.gray.active,
      transitionActive: (state) => state.transition.active,
      asideCollapse: (state) => state.menu.asideCollapse
    }),
    ...mapState('d2admin/menu', ['header']),
    ...mapState('d2admin/toast', ['size']),
    ...mapGetters('d2admin', {
      themeActiveSetting: 'theme/activeSetting'
    }),
    /**
     * @description 最外层容器的背景图片样式
     */
    styleLayoutMainGroup() {
      return {
        // ...(this.themeActiveSetting.backgroundImage
        //   ? {
        //       backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
        //     }
        //   : {})
      }
    }
  },
  watch: {
    size(val) {
      this.countNum = val
    }
  },
  methods: {
    ...mapActions('d2admin/account', ['logout']),
    /**
     * @description 登出
     */
    logOff() {
      this.logout({
        vm: this,
        confirm: true
      })
    },
    getDate() {
      let _this = this
      this.timer = setInterval(() => {
        _this.time = new Date()
      }, 1000)
    },
    // out() {
    //   this.$router.push('/')
    // },
    toAlarms() {
      this.header.forEach((res) => {
        if (res.path === '/alarms') {
          this.$router.push({ path: res.list[0].path })
        }
      })
    },
    //读取站点名称
    getStation() {
      this.station = JSON.parse(localStorage.getItem('sysSystem')).name
      if (!this.station || this.station == 'undefined') {
        setTimeout(this.getStation, 3000)
      }
    }
  }
}
</script>

<style lang="scss">
.lineFeed {
  line-height: 36px;
  padding-top: 0px !important;
}
.time-container {
  width: 93px;
  margin-right: 10px;

  text-align: right;
  // border:1px solid red;
  padding: 2px;
  .current-time {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
  }

  .current-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
  }
}

.msg-img {
  margin-right: 10px;
  img {
    width: 37px;
    height: 36px;
    vertical-align: middle;
  }
}

.subway-container {
  display: flex;
  align-items: center;
  margin-right: 10px;

  .user-img {
    img {
      width: 37px;
      height: 36px;
      vertical-align: middle;
    }
  }

  .subway-info {
    width: 84px;
    height: 36px;
    background: url(./imgs/subwayBg.png);
    background-size: 100% 100%;
    transform: translateX(12px);
    text-align: right;
    span {
      display: inline-block;
      height: 36px;
      padding-top: 2px;
      padding-right: 16px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);
    }
  }
}

.drop-down img {
  transform: translateX(-15px);
}

.d2-theme-header {
  height: 90px !important;
  display: flex;
  align-items: center;
  position: relative !important;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important;
  background-image: url(./imgs/d2menu2x.png);
  background-size: 100% 100% !important;
}

// 菜单
.menu-header {
  width: 100%;
  height: 90px;
}

// 头部右侧
.d2-header-right {
  // height: 90px !important;
  // line-height: 90px !important;
}

//container
.d2-theme-container {
  transform: translateY(60px);
}

// 菜单样式
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item {
//   border-bottom: 4px solid rgba(255, 255, 255, 0) !important;
//   color: rgba(255, 255, 255, 0.75) !important;
// }

// .theme-tx1 .d2-theme-header .el-menu .el-menu-item:focus {
//   color: rgba(255, 255, 255, 1) !important;
//   border-bottom: 4px solid #35aff8 !important;
//   background: rgba(255, 255, 255, 0.1) !important;
//   box-shadow: #35aff8 0 0 10px inset !important;
// }

// .theme-tx1 .d2-theme-header .el-menu .el-menu-item.is-active {
//   color: rgba(255, 255, 255, 1) !important;
//   border-bottom: 4px solid #35aff8 !important;
//   background: rgba(255, 255, 255, 0.1) !important;
//   box-shadow: #35aff8 0 0 10px inset !important;
// }

// .theme-tx1 .d2-theme-header .el-menu .el-menu-item:hover {
//   color: rgba(255, 255, 255, 1) !important;
//   border-bottom: 4px solid #35aff8 !important;
//   background: rgba(255, 255, 255, 0.1) !important;
//   box-shadow: #35aff8 0 0 10px inset !important;
// }

// 注册主题
@import '~@/assets/style/theme/register.scss';
// 左上角logo
.d2-layout-header-aside-group
  .d2-layout-header-aside-content
  .d2-theme-header
  .logo-group
  img {
  height: 40px;
  padding: 0 20px 0 10px;
  width: 300px;
  vertical-align: middle;
}

.mfooter {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  // background: #2d3a4b;
  /*position: fixed;*/
  /*top: 0;*/
}
</style>
