<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-12 13:33:14
 * @LastEditTime: 2019-08-13 13:47:23
 * @LastEditors: Please set LastEditors
 -->
<template>
  <el-container class="platform" :style="{background: 'url(' + cdn + 'bg.jpg) center center no-repeat'}">
    <el-container class="container">
      <el-header>
        <img class="header-logo" :src="cdn + 'login-text-log.png'" alt="">
        <div class="header-right">
          <span class="header-username">{{ userInfo.cnName}}</span>
          <div title="退出系统">
            <svg-icon class="header-out"  @click.native="logout" iconClass="out"></svg-icon>
          </div>
        </div>
      </el-header>
      <el-main>
        <template v-if="modules.length">
          <div
            class="protal"
            v-for="(platform, index) in modules"
            :key="index"
            @click="openSystem(platform)"
            >
            <div class="protal-icon">
              <svg-icon :iconClass="platform.icon"></svg-icon>
            </div>
            <span class="protal-name">{{ platform.name }}</span>
          </div>
        </template>
        <div v-else style="flex: 1; text-align: center;">
          您没有系统权限, 请联系系统管理员!
        </div>
      </el-main>
    </el-container>
    <el-container class="platform-footer">
      <span>{{$t('版权所有')}}</span>
    </el-container>
  </el-container>
</template>

<script>
import qs from 'qs';
import { mapState, mapMutations } from 'vuex';
import openSystem from './mixins/openSystem';
import svgIcon from './svg-icon';

export default {
  name: 'platform',
  components: {
    svgIcon
  },
  mixins: [openSystem],
  props: {
    cdn : {
      type: String,
      default : `${window.location.protocol}//${window.location.host}/image/`,
    }
  },
  data() {
    return {
      news: {
        total: 5,
      },
      userInfo: {
        cnName: '',
      },
      appName: '',
      modules: [],
    };
  },
  created() {
    this.getUserInfo();
    this.getModules();
  },
  methods: {
    ...mapMutations([
      'setLogout',
    ]),
    getUserInfo() {
      this.$http.get('auth/user').then(
        (res) => {
          res = res.data || {};
          this.userInfo = res.data;
        },
      );
    },
    getModules() {
      this.$http.get('/common/menu/modules').then(
        ({data}) => {
          this.modules = data.data || [];
        },
      ).catch();
    },
    async logout() {
      await this.$http.post('auth/logout').then(
        () => {
          this.$message({
            message: '退出登录成功',
            type: 'success',
          });
          this.setLogout();
        },
        () => {},
      );
      this.$router.push('/');
    },
  },
};
</script>

<style lang="scss">
@import './scss/common/var.scss';

.platform {
  .svg-icon {
    width: 50px;
    height: 50px;
  }
  .header-out {
    width: 1em;
    height: 1em;
  }
}
</style>