<template>
  <el-container>
    <el-header>
      <div class="logo">
        <div class="logo-bg">
          <div class="logo-text"></div>
        </div>
      </div>
      <div class="header-right">
        <div class="app-option">
          <span>{{ nowTime }}</span>
        </div>
        <el-button
          type="text"
          icon="el-icon-s-platform"
          class="workbench-btn"
          @click="toWorkbench"
        >
          工作台
        </el-button>
      </div>
    </el-header>
    <el-main><main></main></el-main>
    <el-footer>
      <ul>
        <li
          v-for="(item, index) in footerData.menuData"
          :key="item.id"
          @mousemove="handlemousemove(item, index)"
          @mouseleave="footerData.isShowTwoMenu = false"
        >
          <a
            :class="
              item.id == footerData.active ? 'menuItem-active' : 'menuItem'
            "
          >
            {{ item.name }}
          </a>
        </li>
        <div
          class="two-menu"
          :class="footerData.isShowTwoMenu ? '' : 'display'"
          :style="{left: `${footerData.left}px`, top: `-${footerData.top}px`}"
          @mousemove="footerData.isShowTwoMenu = true"
          @mouseleave="footerData.isShowTwoMenu = false"
        >
          <span
            class="span-pitch"
            v-for="item in footerData.twoMenuData"
            :key="item.id"
          >
            {{ item.name }}
          </span>
        </div>
      </ul>
    </el-footer>
  </el-container>
</template>
<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      nowTime: '',
      footerData: {
        active: 1,
        isShowTwoMenu: false,
        left: 0,
        top: 35,
        menuData: [],
        twoMenuData: []
      }
    }
  },
  computed: {
    ...mapState({
      frontMenus: state => {
        return state.menu.frontMenus
      }
    })
  },
  mounted() {
    this.initTime()
    this.$store.dispatch('menu/actionFrontMenus').then(data => {
      // 过滤出大屏菜单
      this.footerData.menuData = this.frontMenus.filter(
        item => item.alias === 'bigScreen'
      )[0].children
    })
  },
  methods: {
    // 显示当前时间
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? '0' + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1
      let date =
        new Date(timeStamp).getDate() < 10
          ? '0' + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate()
      let hh =
        new Date(timeStamp).getHours() < 10
          ? '0' + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours()
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? '0' + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes()
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? '0' + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds()
      let week = new Date(timeStamp).getDay()
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      let getWeek = '星期' + weeks[week]
      this.nowTime =
        year +
        '年' +
        month +
        '月' +
        date +
        '日' +
        ' ' +
        hh +
        ':' +
        mm +
        ':' +
        ss +
        ' ' +
        getWeek
    },
    getTime() {
      this.timeFormate(new Date())
    },
    initTime() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      this.timer = setInterval(() => {
        this.getTime()
      }, 1000)
    },
    toWorkbench() {
      this.$store.dispatch('menu/actionFrontMenus').then(res => {
        let dataArr = res && res.filter(item => item.alias === 'normal')
        if (dataArr && dataArr.length !== 0) {
          if (dataArr[0].children.length !== 0) {
            this.$router.push({
              path: `/platLayout/${dataArr[0].children[0].children[0].alias}`
            })
          } else {
            this.$router.push({
              path: `/platLayout/${dataArr[0].children[0].alias}`
            })
          }
        }
      })
    },
    handlemousemove(item, index) {
      this.footerData.active = item.id
      this.footerData.isShowTwoMenu = true
      this.footerData.left = index * 122
      this.footerData.top = item.children.length * 35
      this.footerData.twoMenuData = item.children
    }
  }
}
</script>
<style lang="scss" scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.el-header,
.el-footer {
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.el-header {
  display: flex;
  justify-content: flex-end;
  position: relative;
  .logo {
    width: 100%;
  }
  .logo-bg {
    width: 100%;
    height: 70px;
    background: url('../assets/img/newLog.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .logo-text {
      width: 277px;
      height: 60px;
      background-color: #0ff;
      background: url('../assets/img/idx-logo.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .header-right {
    position: absolute;
    top: 0;
    right: 20px;
    height: 70px;
    line-height: 70px;
    display: flex;
    .app-option {
      width: 300px;
      display: flex;
      cursor: pointer;
      color: #fff;
      letter-spacing: 2px;
      span {
        font-size: 16px;
      }
    }
    /deep/ .workbench-btn {
      color: #fff;
      background-color: rgba(4, 9, 15, 0);
      i,
      span {
        font-size: 16px;
      }
      &:hover {
        color: #50b6e9;
      }
    }
  }
}

.el-main {
  color: #fff;
  text-align: center;
  height: 100%;
}
.el-container {
  height: 100%;
  background: url('../assets/img/businss-bg.jpg');
  background-size: 100% 100%;
}
.el-footer,
ul {
  display: flex;
  justify-content: center;
  align-items: center;
  li {
    width: 122px;
  }
}
.el-footer ul {
  position: relative;
  .display {
    display: none !important;
  }
  .span-pitch {
    width: 120px !important;
    height: 35px;
    line-height: 35px;
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(6, 5, 5, 0.7);
    font-weight: 600;
    &:hover {
      background-color: #ffce5a;
      color: #fff;
      text-shadow: 2px 2px 2px #000;
    }
  }
  .two-menu {
    position: absolute;
    left: 0;
    top: -35px;
    display: flex;
    flex-wrap: wrap;
    width: 120px !important;
    line-height: 50px;
    text-align: center;
    // margin-bottom: 80px;
    cursor: pointer;
    border: 1px solid rgba(255, 206, 90, 0.2);
    z-index: 9999;
  }
}
.menuItem-active {
  font-weight: 600;
  font-size: 16px;
  line-height: 45px;
  white-space: nowrap;
  text-shadow: 2px 2px 2px #000;
  display: flex;
  justify-content: center;
  height: 50px;
  line-height: 50px;
  padding-left: 2rem;
  padding-right: 2rem;
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
  z-index: 999;
  cursor: pointer;
  color: #ffce5a;
  border-bottom: 4px solid #ffecb0;
  box-sizing: border-box;
  background: linear-gradient(transparent, rgba(236, 166, 56, 0.6));
}
.menuItem {
  font-weight: 600;
  font-size: 16px;
  line-height: 45px;
  white-space: nowrap;
  text-shadow: 2px 2px 2px #000;
  display: flex;
  justify-content: center;
  height: 50px;
  line-height: 50px;
  padding-left: 2rem;
  padding-right: 2rem;
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, var(--tw-text-opacity));
  z-index: 999;
  box-sizing: border-box;
  cursor: pointer;
}
</style>
