<template>
  <div class="app-container">
    <div class="title-div">
      <div>智慧城管平台</div>
      <div class="divider-line"/>
    </div>
    <div class="dashboard">
      <div class="dashboard-left"><i class="el-icon-arrow-left"/></div>
      <div class="dashboard-middle">
        <el-row>
          <el-col v-for="(system,index) of systems" :key="system.id" :span="6" :class="'sys-'+index">
            <!--<div 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 class="dashboard-right"><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 {
      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: #000000 url("/static/images/login_images/bg-blue.png") 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;
      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>