<template>
  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="dashboard-container">
    <div class="title-div">
      <img :src="require('@/assets/login_images/title_left.png')" class="title-image">
      <div>{{ title }}</div>
      <img :src="require('@/assets/login_images/title_right.png')" class="title-image">
    </div>
    <div class="dashboard">
      <div class="dashboard-left"><i v-show="page>1" class="el-icon-arrow-left" @click="prevPage"/></div>
      <div class="dashboard-middle">
        <div v-for="(system,index) of currentSystems" :key="system.id" :style="{'background-image':'url('+sysUrl+')'}" class="system-div" @mouseover="changeImg(1,index)" @click="changeSystem(system)">
          <div class="icon-div"><svg-icon :icon-class="system.icon"/></div>
          <div class="system-title-div">{{ system.name }}</div>
        </div>
      </div>
      <div :style="{'visibility': page<fullPage?'visible':'hidden'}" class="dashboard-right" @click="nextPage"><i class="el-icon-arrow-right"/></div>
    </div>
    <div title="注销" class="outSystem">
      <svg-icon title="注销" icon-class="icon-out" @click="logout"/>
    </div>
  </div>

</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      title: this.baseConfig.title,
      bgUrl: require('../../assets/login_images/bg3.jpg'), // 背景图片
      sysUrl: require('../../assets/login_images/btn-bg.png'),
      sysHoverUrl: require('../../assets/login_images/sys-hover.png'),
      hoverIndex: null,
      loading: true, // 加载状态
      pageSize: 9, // 一页子系统数量
      page: 1 // 第几页
    }
  },
  computed: {
    currentSystems() {
      const first = (this.page - 1) * this.pageSize + 0
      const last = (this.page - 1) * this.pageSize + this.pageSize
      return this.$store.getters.systems.slice(first, last)
    },
    systems() {
      return this.$store.getters.systems
    },
    fullPage() {
      return Math.ceil(this.$store.getters.systems.length / this.pageSize)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    changeImg(state, index) {
      this.hoverIndex = index
    },
    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)
      // 判断是外部链接还是本项目的路由
      if (system.url.indexOf('http') > -1) {
        // 跳转数据中台的
        const params = '?token=' + this.$store.getters.token + '&url=' + system.url
        const loginUrl = this.baseConfig.biUrl + '/sso/integrationConfig/login'
        // window.location.href = loginUrl + params
        window.open(loginUrl + params, '_blank')
        // 取token
        // const params = '?token=' + this.$store.getters.token
        // if (this.baseConfig.sameWindow) {
        //   window.location.href = system.url + params
        // } else {
        //   window.open(system.url + params, '_blank')
        // }
      } else if (system.url === '/dataMiddlePlatform') { // 数据中台

      } else {
        this.$router.push(system.url)
      }
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    // 下一页
    nextPage() {
      if (this.page < this.fullPage) {
        this.page++
      }
    },
    // 上一页
    prevPage() {
      if (this.page > 1) {
        this.page--
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $btn-colors: #22a7f0, #4183d7,#164abb, #3a539b,#191b94,#161abb,#164abb,	#009ACD,#1874CD;
  $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,#164abb,#1b5ae2,#4183d7,#00BFFF,#1C86EE;
  $iconheight: 70%;
  $titleheight: 30%;
  .dashboard-container{
    width: 100%;
    height:100%;
    /*position: relative;*/
    background-color: #000000;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    .title-div{
      width: 100%;
      font-size: 40px;
      font-weight: bolder;
      height: 120px;
      color: white;
      padding-top: 20px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      .divider-line{
        margin: 5px auto;
        height: 10px;
        width: 60%;
        border-bottom: solid 3px #d3d3d3;
      }
      .title-image{
        height:50px;
        width:40%;
      }
    }
    .dashboard {
      width: 1280px;
      height: 70%;
      max-height: 700px;
      position: fixed;
      text-align: center;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%);
      display: flex;
      justify-content: space-between;
      z-index: 5;
      .dashboard-left,.dashboard-right{
        /*position: absolute;*/
        width:70px;
        height:100%;
        font-size: 60px;
        line-height: 300px;
        color:white;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .dashboard-right{
        text-align: right;
        float:right;
        margin-left: 10px ;
      }
      .dashboard-middle{
        flex:1;
        height:100%;
        text-align: center;
        float: left;
        padding: 30px 10px 10px 10px;
        display: flex;
        justify-content: start;
        align-content: start;
        flex-wrap: wrap;
      }
      .el-icon-arrow-left:hover{
        cursor: pointer;
        color:#3c82f0
      }
      .el-icon-arrow-right:hover{
        cursor: pointer;
        color:#3c82f0
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
      .system-div{
        width:30%;
        height:30%;
        margin:10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #e5f3ff;
        justify-content: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 10px;
        box-shadow: 0px 2px 10px #93b3fe,0px -2px 5px #93b3fe,2px 0px 10px #93b3fe,-2px 0px 5px #93b3fe;
        .icon-div{
          padding-bottom: 0.8rem;
          font-size:3.5rem;
          /*text-shadow: 0px 0px 10px #ffffff;*/
        }
        .system-title-div{
          line-height: $titleheight+px;
          font-size: 1.8rem;
          /*text-shadow: 0px 0px 10px #ffffff;*/
        }
      }
      .system-div:hover{
        box-shadow: 0px 4px 10px #B9D3FE,0px -4px 10px #B9D3FE,4px 0px 10px #B9D3FE,-2px 0px 5px #B9D3FE;
        cursor: pointer;
        text-shadow: 0px 0px 10px #ffffff;
        color:white;
      }
      .dashboard-middle{
        @each $c in $btn-class{
          $i:index($btn-class,$c);
          .#{$c}{//+1是除了第一个以外的li
            background-color: nth($btn-colors,$i);
            border: 1px solid nth($btn-colors,$i)
          }
          .#{$c}: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: #3c82f0;
      cursor: pointer;
    }
  }
</style>