<template>
  <div class="app-container">
    <div class="title-div">
      <div>智慧城管平台</div>
    </div>
    <el-row v-loading="loading" class="dashboard">
      <el-col :span="1">
        <div class="dashboard-left"><i class="el-icon-arrow-left"/></div>
      </el-col>
      <el-col :span="22">
        <div class="dashboard-middle">
          <el-row :gutter="20">
            <el-col v-for="system of systems" :key="system.id" :span="6">
              <!--<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="title-div">{{ system.name }}</div>
              </router-link>
              <!--</div>-->
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="dashboard-right"><i class="el-icon-arrow-right"/></div>
      </el-col>
    </el-row>
  </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)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    width: 100%;
    height:100%;
    background-color: #1f2d3d;
    .title-div{
      width: 100%;
      font-size: 40px;
      line-height: 150px;
      color: white;
      text-align: center;
    }
    .dashboard {
      margin: 50px 100px;
      .dashboard-left,.dashboard-right{
        width: 100%;
        font-size: 60px;
        line-height: 300px;
        color:white;
      }
      .dashboard-left{
        float:left;
      }
      .dashboard-right{
        float:right;
      }
      .dashboard-middle{
        width: 100%;
      }
      &-text {
        font-size: 30px;
        line-height: 46px;
      }
      .system-div{
        width:100%;
        height:140px;
        text-align: center;
        background-color: #85ce61;
        border: 1px solid #13ce66;
        margin-left: 26px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        color: white;
        .icon-div{
          line-height: 70px;
        }
        .title-div{
          line-height: 70px;
          font-size: 25px;
        }
      }
      .system-div:hover{
        background-color: #97ce89;
        border: 1px solid #c2cec5;
        cursor: pointer;
      }
    }
  }

</style>