<template>
  <div :style="{backgroundImage:'url('+bgUrl+')'}" class="app-container">
    <div class="title-div">
      <div>智慧城管平台</div>
      <!--<div class="divider-line"/>-->
    </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">
        <!--<el-row>-->
        <!--<el-col v-for="(system,index) of currentSystems" :key="system.id" :span="8" :class="'sys-'+index">-->
        <div v-for="(system,index) of currentSystems" :key="system.id" :class="'sys-'+index" class="system-div" @click="changeSystem(system)">
          <!--<router-link :to="system.url" tag="div" class="system-div" @click.native="changeSystem(system)">-->
          <div class="icon-div"><svg-icon :icon-class="system.icon"/></div>
          <div class="system-title-div">{{ system.name }}</div>
          <!--</router-link>-->
        </div>
        <!--</el-col>-->
        <!--</el-row>-->
      </div>
      <div v-show="page<fullPage" class="dashboard-right" @click="nextPage"><i class="el-icon-arrow-right"/></div>
    </div>
    <!--<div class="decorate">-->
    <!--<el-image-->
    <!--class="decorate-image"-->
    <!--src="./static/images/login_images/small.png"-->
    <!--fit="fill"/>-->
    <!--</div>-->
    <div class="outSystem">
      <svg-icon icon-class="icon-out" @click="logout"/>
    </div>
  </div>

</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      bgUrl: require('../../assets/login_images/bg-blue.png'), // 背景图片
      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: {
    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) {
        // 取token
        const params = '?token=' + this.$store.getters.token
        debugger
        window.open(system.url + params, '_blank')
      } 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,#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,#164abb,#1b5ae2,#4183d7;
  $iconheight: 70%;
  $titleheight: 30%;
  .app-container{
    width: 100%;
    height:100%;
    position: relative;
    height: 100%;
    width: 100%;
    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;
      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;
      height: 70%;
      max-height: 700px;
      position: absolute;
      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;
        flex-wrap: wrap;
      }
      .el-icon-arrow-left:hover{
        cursor: pointer;
        color:#22a7f0
      }
      .el-icon-arrow-right:hover{
        cursor: pointer;
        color:#22a7f0
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
      .system-div{
        width:33.333%;
        height:33.33%;
        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;
          padding-top: 20px;
          font-size:55px;
        }
        .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}{//+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: #22a7f0;
      cursor: pointer;
    }
  }

</style>