<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="d2-theme-header" flex-box="0" flex  v-show='false'> -->
        <div class="logo-group" flex-box="0">
          <!-- <img class="img-logo-all" src="./imgs/logo2x.png" @click="out" /> -->
          <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" :style="{width:station.length*13+ 'px','min-width':'60px'}">
                 <!-- <span :class="station.length<6?'lineFeed':''">{{station}}</span> -->
                 <span>{{station}}</span>
                <!-- <div class="out-img">
                </div> -->
              </div>
              <div class="user-img"><img src="./imgs/subway.png" /></div>
            </div>
            <d2-header-theme />  <!-- 主题 -->
            <el-badge class="msg-img" :value="xlCountNum == 0 ? '' : xlCountNum > 99 ? '99+' : xlCountNum"  type="danger" v-if="isShow">
              <div title="报警中心"  style="cursor: pointer" @click="toAlarms">
                <img src="./imgs/msg.png" />
              </div>
            </el-badge>
            <el-badge class="msg-img" :value="zdCountNum == 0 ? '' : zdCountNum > 99 ? '99+' : zdCountNum"  type="danger" v-if="!isShow">
              <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>

            <!-- <d2-header-theme />
            <div class="time-container">
              <div class="current-time">{{ time | formatDate }}</div>
              <div class="current-date">{{ time | formatDate2 }}</div>
            </div>
            <el-badge
              :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum"
              type="danger"
            >
              <div class="msg-img" style="cursor: pointer" @click="toAlarms">
                <img src="./imgs/msg.png" />
              </div>
            </el-badge>
            <div class="user-container" @click="logOff">
              <div class="user-img"><img src="./imgs/user.png" /></div>
              <div class="logOut-container">
                <d2-header-user class="user-info" />
                <div class="out-img">
                  <img src="./imgs/out.png" />
                  <span>退出</span>
                </div>
              </div>
            </div>
          </div> -->
          <!-- <div width="95%" style="float:right;margin-right:6%">
            <font color="#C5CBD2" size="2">
              {{
                station
                  ? "欢迎访问" + station + "轨道交通综合安防平台！"
                  : "请先登录"
              }}
            </font>
          </div> -->

        </div>
      </div>

      <lineHeader  v-if="$route.matched[0].path.split('/')[1] !== 'routes'"></lineHeader>
      <!-- 下面 主体 -->
      <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">
              <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>
              <rAlarms v-if="$route.matched[0].name == 'routes-alarms'" ></rAlarms>
              <!-- 页面 -->
              <div  class="d2-theme-container-main-body" flex-box="1"  style="background-color: white"    >
                <keep-alive :include="keepAlive">
                  <router-view />
                </keep-alive>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div style="z-index:9999!important;" 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'
let that
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'),
    sys: () => import('../../pages/sys/index.vue'),
    monitor: () => import('../../pages/monitor/index.vue'),
    access: () => import('../../pages/access/index.vue'),
    police: () => import('../../pages/police/index.vue'),
    inspect: () => import('../../pages/inspect/index.vue'),
    patrol: () => import('../../pages/patrol/index.vue'),
    eme: () => import('../../pages/em/index.vue'),
    eq: () => import('../../pages/eq/index.vue'),
    plan: () => import('../../pages/plan/index.vue'),
    linkage: () => import('../../pages/linkage/index.vue'),
    alarms: () => import('../../pages/alarms/index.vue'),
    // 线路级
    rEme: () => import('../../pages/routes/em/index.vue'),
    rSys: () => import('../../pages/routes/sys/index.vue'),
    rPlan: () => import('../../pages/routes/plan/index.vue'),
    rEq: () => import('../../pages/routes/eq/index.vue'),
    rAna: () => import('../../pages/routes/analysis/index.vue'),
    rAlarms: () => import('../../pages/routes/alarms/index.vue'),
    lineHeader: () => import('./components/line-header')
  },
  data() {
    return {
      isLine: false,
      drawer: false,
      // [侧边栏宽度] 正常状态
      asideWidth: '220px',
      // [侧边栏宽度] 折叠状态
      asideWidthCollapse: '65px',
      time: new Date(),
      timer: null,
      logTimeout: null,
      xlCountNum: 0,
      zdCountNum: 0,
      isShow: false,
      station: ''
    }
  },
  mounted() {
    this.getStation()
    this.getDate()
    this.zdCountNum = this.size.split('-')[0]
    this.xlCountNum = this.size.split('-')[1]

    let currentPath = this.$route.path
    let routeName = currentPath.slice(0, 7)
    if (routeName == '/routes') {
      this.isShow = true
    } else {
      this.isShow = false
    }
  },
  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.zdCountNum = val.split('-')[0]
      this.xlCountNum = val.split('-')[1]
      // console.log(this.zdCountNum, '1--------1')
      // console.log(this.xlCountNum, '2--------2')
    },
    '$route.path'(val) {
      // console.log(val, '--------')
      // console.log(val.slice(0, 7))
      let routeName = val.slice(0, 7)
      if (routeName == '/routes') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  },
  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.$http({
              url: this.$http.adornUrl('/sys/menu/clickMenuHeader'),
              method: 'post',
              data: this.$http.adornParams({
                  menuName: res.list[0].name,
                  blockName: res.name,
                  path: res.path,
                  stationId: localStorage.getItem('stationId')
              })
          }).then(data => {
              if (data && data.code === 0) {
                  console.log(data)
              }
          })
          this.$router.push({ path: res.list[0].path })
        }
        if (res.path === '/routes/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;
  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;
  }
}

.user-container {
  margin-left: 10px;
  margin-right: 20px;
  display: flex;
  align-items: center;

  .user-img {
    transform: translateX(13px);

    img {
      width: 45px;
      height: 45px;
      vertical-align: middle;
    }
  }

  .logOut-container {
    width: 96px;
    height: 36px;
    background: url(./imgs/userbg.png);
    background-size: 100% 100%;
    margin-left: 5px;

    .user-info {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);
      margin-left: 10px;
    }

    .out-img {
      margin-left: 10px;

      img {
        width: 15px;
        height: 17px;
        vertical-align: middle;
      }

      span {
        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/bg-a.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);
}

// 注册主题
@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;*/
}
.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 {
    height: 34px;
    line-height:34px;
    text-align:right;
    font-size: 12px;
    padding-right:16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    transform: translateX(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
    border-left: 1px solid rgba(255, 255, 255, 0.75);
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
  }
}
</style>