<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" :style="{ width: asideWidth }" flex-box="0">
          <img src="./imgs/logo2.png" />
        </div>
        <div style="width: 100%">
          <div 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="weather-container">
              <div class="user-img">室内</div>
              <div class="weather-info" v-if='list'>
                <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
                <div>温度 {{list.snqxzList[0].temperature}}℃</div>
                <div>湿度 {{list.snqxzList[0].humidity}}%</div>
              </div>
            </div>
            <div class="weather-container">
              <div class="user-img">室外</div>
              <div class="weather-info" v-if='list'>
                <!-- <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span> -->
                <div>温度 {{list.swqxzList[0].temperature}}℃</div>
                <div>湿度 {{list.swqxzList[0].humidity}}%</div>
              </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>
        </div>
      </div>
      <!-- 下面 主体 -->
      <div class="d2-theme-container" flex-box="1" flex>
        <!-- 主体 侧边栏 -->
        <div
          flex-box="0"
          ref="aside"
          class="d2-theme-container-aside"
          :style="{
            width: 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">
              <!-- 页面 -->
              <div class="d2-theme-container-main-body" flex-box="1">
                <!-- <bim></bim> -->
                <keep-alive :include="keepAlive">
                  <router-view />
                </keep-alive>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div style="z-index: 9999 !important; user-select: none" class="mfooter">
        Copyright (C) 2021-2022. 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'

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')
  },
  data() {
    return {
      drawer: false,
      // [侧边栏宽度] 正常状态
      asideWidth: '256px',
      // [侧边栏宽度] 折叠状态
      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'
    }),
    ...mapState('d2admin/paramsList', ['list']),

    /**
     * @description 最外层容器的背景图片样式
     */
    styleLayoutMainGroup() {
      return {
        // ...(this.themeActiveSetting.backgroundImage
        //   ? {
        //       backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
        //     }
        //   : {})
      }
    }
  },
  watch: {
    size(val) {
      this.countNum = val
    }
  },
  methods: {
    ...mapActions('d2admin/menu', ['asideCollapseToggle']),
    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside() {
      console.log(111111)
      this.asideCollapseToggle()
    },
    ...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;
  text-align: center;
  //   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: 37px;
    vertical-align: middle;
  }
}

.weather-container {
  display: flex;
  align-items: center;

  .user-img {
    width: 37px;
    height: 36px;
    line-height: 37px;
    text-align: center;
    font-size: 14px;
    color: #a0a8b4;
    border: 1px solid #a0a8b4;
    border-radius: 50%;
    img {
      width: 37px;
      height: 36px;
      vertical-align: middle;
    }
  }

  .weather-info {
    width: 90px;
    height: 36px;
    border: 1px solid;
    border-color: #a0a8b4 #a0a8b4 #a0a8b4 transparent;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    transform: translateX(-19px);
    div {
      text-indent: 25px;
      font-size: 12px;
      transform: translateY(1px);
      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;
}

//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 {
  height: 36px;
  width: 300px;
  display: flex;
  img {
    padding-left: 20px;
    height: 36px;
    &:last-child {
      padding-left: 10px;
    }
  }
}

.mfooter {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}
</style>