<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-24 15:06:33
 * @LastEditTime: 2019-08-12 09:29:55
 * @LastEditors: Please set LastEditors
 -->
<template>
  <el-container class="sscstore-platform" :style="{ background: backgroundStyle }">
    <!-- Nav -->
    <el-header>
      <img class="platform-logo" :src="logoUrl"/>
      <li class="userInfo">欢迎您，{{userInfo.cnName}}
        <span class="loginout"  @click="logout">
          <svg-icon type="css" iconClass="top-out"></svg-icon>退出
        </span>
      </li>
    </el-header>

    <!-- Front / Middle / Back -->
    <div class="platform-content" :style="{ height: containerHeight }">
      <el-input placeholder="请输入app名称" @input="handleSearch" v-model="appName" clearable>
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-carousel
        @change="carouselChange"
        arrow="always"
        trigger="click"
        :autoplay="false">
        <el-carousel-item
          v-for="item in carouselItems"
          :key="item.attr">
          <el-scrollbar style="height: 100%; width: 100%;">
          <el-container class="app-containter">
            <div
              class="app-type-wrapper"
              v-for="(platform, index) in item.classifyPlats"
              :key="index">
              <label>{{platform.appClassificationName}}</label>
              <div class="apps-wrapper">
                <div class="app-wrapper"
                  v-for="(app, index) in platform.list"
                  :key="index"
                  @click="handleJump(app)">
                  <div class="icon-wrapper">
                    <svg-icon class="app-icon" type="css" :iconClass="app.appIcon"></svg-icon>
                  </div>
                  <span class="app-name">{{app.appName}}</span>
                </div>
              </div>
            </div>
          </el-container>
          </el-scrollbar>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- Basic -->
    <div
      class="footer apps-wrapper"
      v-if="displayBasicPlatforms.length !== 0"
      :style="{ height: basicHeight }">
      <div class="expand">
        <i :class="`el-icon-arrow-${isExpand ? 'down' : 'up'}`" @click="isExpand = !isExpand"></i>
      </div>
      <div
        class="app-wrapper"
        v-for="(app, index) in displayBasicPlatforms"
        :key="index"
        @click="handleJump(app)">
        <div class="icon-wrapper">
          <svg-icon class="app-icon" type="css" :iconClass="app.appIcon"></svg-icon>
        </div>
        <span class="app-name">{{app.appName}}</span>
      </div>
    </div>
  </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: 'sscPlatform',
  mixins: [openSystem],
  data() {
    return {
      cdn: `${window.location.protocol}//${window.location.host}/image/`,
      logoUrl: '/image/logo-platform.png',
      basicLineHeight: 160,
      curIndex: 0,
      isExpand: false,
      appName: '',
      carouselItems: [],
      attributes: ['FINANCIAL_FRONT', 'FINANCIAL_MIDDLE', 'FINANCIAL_BACK', 'FINANCIAL_BASIC'],
      platforms: [],
      basicPlatforms: [],
      displayBasicPlatforms: [],
      curPlatforms: [],
      userInfo: {
        cnName: '',
      },
    };
  },
  computed: {
    ...mapState(['sysMenu']),
    backgroundStyle() {
      return `url(${this.cdn}sscstore_background.png) center center no-repeat`;
    },
    containerHeight() {
      let height = 60; // nav height
      if (this.displayBasicPlatforms.length !== 0) {
        height += this.basicLineHeight;
      }
      return `calc(100% - ${height}px)`;
    },
    basicHeight() {
      if (this.isExpand) {
        return `${Math.ceil(this.basicPlatforms.length / 5) * this.basicLineHeight}px`;
      }
      return `${this.basicLineHeight}px`;
    },
  },
  watch: {
    isExpand(val) {
      if (val) {
        this.displayBasicPlatforms = this.basicPlatforms;
      } else {
        this.displayBasicPlatforms = (this.basicPlatforms || []).slice(0, 5);
      }
    },
  },
  created() {
    this.getUserInfo();
    this.getPlatforms();
  },
  methods: {
    ...mapMutations([
      'setLogout',
    ]),
    getUserInfo() {
      this.$http.get('auth/user').then(
        ({ data }) => {
          this.userInfo = data.data;
        },
      ).catch();
    },
    async logout() {
      await this.$http.post('auth/logout').then(
        () => {
          this.$message({
            message: '退出登录成功',
            type: 'success',
          });
          this.setLogout();
        },
        () => {},
      ).catch();
      this.$router.push('/');
    },
    getPlatforms() {
      this.$http.post('common/menu/apps', {}).then(
        ({ data }) => {
          const platforms = data.data || [];
          this.platforms = this.attributes.map(attr => {
            const sameAttrPlats = platforms.filter(p => p.appAttribute === attr);
            const classies = [...new Set(sameAttrPlats.map(v => v.appClassificationName))];
            return {
              attr,
              classifyPlats: classies.map((type) => ({
                appClassificationName: type,
                list: sameAttrPlats.filter(p => p.appClassificationName === type)
              }))
            };
          });
          this.filterCarouselItem();
          this.getBasicPlatforms();
          this.carouselChange(0);
        },
      ).catch();
    },
    filterCarouselItem() {
      this.carouselItems =this.platforms.filter(p => p.classifyPlats.length > 0 && p.attr !== 'FINANCIAL_BASIC');
    },
    getBasicPlatforms() {
      const platforms = this.platforms.find(v => v.attr === 'FINANCIAL_BASIC') || {};
      if (platforms.classifyPlats) {
        this.basicPlatforms = platforms.classifyPlats.map(plats => plats.list).flat();;
        this.displayBasicPlatforms = this.basicPlatforms.slice(0, 5);
      }
    },
    carouselChange(index) {
      this.curIndex = index;
      if (this.appName) {
        this.handleSearch();
      }
    },
    handleSearch() {
      if (!this.appName) {
        this.filterCarouselItem();
      } else {
        const cur = this.carouselItems[this.curIndex];
        const curCarouselItem = { 
          attr: cur.attr,
          classifyPlats: cur.classifyPlats.map((v) => ({
            appClassificationName: v.appClassificationName,
            list: v.list.filter(platform => platform.appName.includes(this.appName))
          })).filter(p => p.list.length > 0)
        };
        this.$set(this.carouselItems, this.curIndex, curCarouselItem);
      }
    },
    handleJump(app) {
      const params = {
        menuId: app.menuId,
      };
      this.$http.post('common/menu/findNavByMenuId', qs.stringify(params)).then(
      ({ data }) => {
        if ((data.data || []).length > 0) {
          this.openSystem(data.data[0], true);
        }
      }).catch();
    },
  },
};
</script>
