<template>
  <!-- 台式机静态页面 -->

  <div class="content_container" id="wheelDelta">
    <!-- 圆环转动样式 -->
    <div class="circle_container">
      <img :src="require('../../../static/images/tabpage/ny.png')" class="in_circle">
      <img :src="require('../../../static/images/tabpage/zy.png')" class="middle_circle">
      <img :src="require('../../../static/images/tabpage/wy.png')" class="outside_circle">
      <img :src="require('../../../static/images/tabpage/gs.png')" class="cursor_container">
      <img :src="require('../../../static/images/tabpage/gs_two.png')" class="cursor_two_container">
    </div>
    <!-- 基础子系统按钮容器 -->
    <div class="base_system_container" id="baseSystem">
    </div>
    <!-- 拓展子系统按钮容器 -->
    <div class="extended_system_container" id="extendedSystem">
    </div>
    <!-- 基础子系统图标 -->
    <div class="base_icon_container">
      <img class="top_img" :src="require('../../../../static/img/tabpage/ty.png')" />
      <div class="imgs"></div>
    </div>
    <!-- 拓展子系统图标 -->
    <div class="extended_icon_container">
      <img :src="require('../../../../static/img/tabpage/xt.png')" />
      <img class="img" :src="require('../../../../static/img/tabpage/xt_1.png')" />
    </div>
    <!-- 系统按钮切换点击事件 -->
    <div class="system_title_container">
      <div class="click" id="titleinfo">基础子系统</div>
      <div id="ztitleinfo">扩展子系统</div>
    </div>
    <!-- 头部按钮切换 -->
    <div class="top_button_container" @click="handleUpward">
      <em class="em">
        <i class="i01"></i>
        <i class="i02"></i>
        <i class="i03"></i>
        <i class="i04"></i>
      </em>
    </div>
    <!-- 底部按钮切换 -->
    <div class="bottom_button_container" @click="handleDown">
      <em class="ems">
        <i class="i011"></i>
        <i class="i022"></i>
        <i class="i033"></i>
        <i class="i044"></i>
      </em>
    </div>

    <!-- 中间内容显示 -->
    <div class="center_show_container">
      <div class="system_text_container" :class="showTitle?'show_system_text_container':''">
        <div class="text_show_top" @click="jump(jumpID)">{{systemTitle}}</div>
        <div class="text_show_bottom">
          <span class="text-splite"></span>
          {{jumpInfo}}
        </div>
      </div>
    </div>

    <!-- 系统标题图标 -->
    <!-- <img :src="require('../../../../static/img/tabpage/newLogo.png')" class="logoStyle"> -->
    <div class="logoStyle">
      <img :src="require('../../../../static/img/logo-big.png')" class="logo-icon">
      <div class="logo-text">
        <p class="logo-cn">{{cnTitle}}</p>
        <p class="logo-en">{{enTitle}}</p>
      </div>
    </div>

    <!-- <detection></detection> -->
    <div @click="logout" title="退出登录" class="logoutBtn"></div>
  </div>

</template>

<script>

export default {
  name: 'Dashboard2',
  data() {
    return {
      bgUrl: require('../../assets/login_images/bg-blue.png'), // 背景图片
      loading: true
    }
  },
  computed: {
    systems() {
      return this.$store.getters.systems
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      this.$store.dispatch('GetSystems').then(() => {
        this.loading = false
        console.log('获取子系统成功')
      })
    },
    changeSystem(system) {
      console.log(system.url)
      this.$store.commit('SET_SYSTEM', system)
      // this.$message('进入' + system.name)
      // debugger
      // this.$router.push(system.url)
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $btn-colors: #22a7f0, #4183d7,#164abb, #3a539b,#581ba0,#523ba0,#191b94,#161abb,#164abb;
  $btn-class: sys-0,sys-1,sys-2,sys-3,sys-4,sys-5,sys-6,sys-7,sys-8;
  $btn-hovercolors: #23affc, #4892f0, #1b5ae2, #4a69c4,#6223a0,#554ba0,#191b94,#161abb,#164abb;
  $iconheight: 120;
  $titleheight: 60;
  .app-container{
    width: 100%;
    height:100%;
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #000000;
    background-repeat: no-repeat;    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    .title-div{
      width: 100%;
      font-size: 40px;
      height: 120px;
      color: white;
      margin-top: 20px;
      text-align: center;
      .divider-line{
        margin: 5px auto;
        height: 10px;
        width: 60%;
        border-bottom: solid 3px #d3d3d3;
      }
    }
    .dashboard {
      width: 1280px;
      max-height: 700px;
      position: absolute;
      text-align: center;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%);
      /*margin: 10px 100px;*/
      z-index: 5;
      .dashboard-left,.dashboard-right{
        position: absolute;
        font-size: 60px;
        line-height: 300px;
        color:white;
      }
      .dashboard-left{
        /*float:left;*/
        left: 5%;
        top:50%;
        transform: translate(-50%,-50%);
      }
      .dashboard-right{
        text-align: right;
        float:right;
        margin-left: 10px ;
        right: 0%;
        top:50%;
        transform: translate(-50%,-50%);
      }
      .dashboard-middle{
        position: absolute;
        text-align: center;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        float: left;
        width: 980px;
        height: 500px;
        padding: 30px 10px 10px 10px;
        /*.el-row{*/
          /*width: 100%;*/
        /*}*/
        /*background-color: rgba(255,255,255,0.3);*/
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
      .system-div{
        width:100%;
        height:($iconheight+$titleheight)+px;
        text-align: center;
        /*margin-top: 30px;*/
        /*background-color: #191b94;*/
        /*border: 1px solid #2c16b0;*/
        /*margin-left: 26px;*/
        /*-moz-border-radius: 15px;*/
        /*-webkit-border-radius: 15px;*/
        /*border-radius: 10px;*/
        color: white;
        .icon-div{
          height: $iconheight+px;
          padding-top: 20px;
          font-size:55px;
          line-height: ($iconheight - 20)+px;
        }
        .system-title-div{
          line-height: $titleheight+px;
          font-size: 25px;
        }
      }
      .system-div:hover{
        background-color: #3b1ce7;
        border: 1px solid #3b1ce7;
        cursor: pointer;
      }
      .dashboard-middle{
        @each $c in $btn-class{
          $i:index($btn-class,$c);
          .#{$c} .system-div{//+1是除了第一个以外的li
            background-color: nth($btn-colors,$i);
            border: 1px solid nth($btn-colors,$i)
          }
          .#{$c} .system-div:hover{//+1是除了第一个以外的li
            background-color: nth($btn-hovercolors,$i);
            border: 1px solid nth($btn-hovercolors,$i);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
          }
        }
      }
    }
    .decorate{
      position: fixed;
      width:284px;
      bottom: 15px;
      left: 15px;
    }
    .outSystem{
      position: fixed;
      top: 35px;
      right: 35px;
      color: #ffffff;
      font-size: 40px;
      z-index: 9999;
    }
    .outSystem:hover{
      color: #22a7f0;
      cursor: pointer;
    }
  }

</style>