<template>
  <div class="dashboard-container">
    <div class="logo">
      <img :src="logoImg">
      <div class="title">
        管理者驾驶舱
      </div>
    </div>
    <div class="dashboard">
      <div class="dashboard-middle">
        <div v-for="(system,index) of currentSystems" :key="system.id" 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>
    <div title="注销" class="outSystem">
      <svg-icon title="注销" icon-class="icon-out" @click="logout"/>
    </div>
  </div>
</template>

<script>
import { getMenus } from '@/api/login'
export default {
  name: 'AppIndex',
  data() {
    return {
      systems: [], // 主题域
      logoImg: require('@/assets/login_images/logo-simple.png'),
      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() {
      return this.systems
    },
    fullPage() {
      return Math.ceil(this.$store.getters.systems.length / this.pageSize)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    changeImg(state, index) {
      this.hoverIndex = index
    },
    fetchData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading'
      })
      const params = {
        resourceType: '05'
      }
      getMenus(params).then(response => { // 处理返回值
        const data = response.data
        if (data.menus && data.menus.length > 0) {
          this.systems = data.menus
          loading.close()
        }
      })
    },
    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 = 'http://59.49.106.24:9001/sso/integrationConfig/login'
        // window.location.href = loginUrl + params
        this.$router.push({ path: '/appSubject', query: { name: system.name, url: loginUrl + params }})
      }
    },
    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>
  $iconheight: 70%;
  $titleheight: 30%;
  .dashboard-container{
    width: 100%;
    height: 50%;
    /*position: relative;*/
    background-color: #54A2F7;
    .logo {
      text-align: center;
      padding-top: 15%;
      img {
        text-align: center;
        height: 20vw;
        width:20vw;
      }
      .title{
        margin-top: 20px;
        font-size:20px;
        color:#ffffff;
      }
    }
    .dashboard {
      background-color: white;
      margin-bottom: 20px;
      width: 90%;
      position: absolute;
      text-align: center;
      left: 50%;
      top:30%;
      transform: translateX(-50%);
      z-index: 5;
      border-radius: 7px;
      border: 1px solid #f0f0f0;
      .dashboard-middle{
        width:100%;
        height:100%;
        text-align: center;
        float: left;
        padding: 30px 10px 10px 10px;
        display: flex;
        justify-content: start;
        align-content: start;
        flex-wrap: wrap;
      }
      &-text {
        font-size: 16px;
        line-height: 46px;
      }
      .system-div{
        width:33%;
        padding:10px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #54A1FD;
        justify-content: center;
        .icon-div{
          padding-bottom: 12px;
          font-size:13vw;
        }
        .system-title-div{
          color: #131313;
          line-height: $titleheight+px;
          font-size: 15px;
        }
      }
      .system-div:hover{
        cursor: pointer;
      }
    }
    .outSystem{
      position: fixed;
      top: 15px;
      right: 15px;
      color: #ffffff;
      font-size: 25px;
      z-index: 9999;
    }
    .outSystem:hover{
      color: #3c82f0;
      cursor: pointer;
    }
  }
</style>