<template>
  <!--
      	作者：luoyiming
      	时间：2019-12-25
      	描述：插件中心-首页
      -->
  <div class="plus-container" v-loading="loading">
    <div v-for="(item, index) in listData" :key="index">
      <div class="common-form">{{ item.name }}</div>
      <div class="plus-list">
        <div class="item" v-for="(child, num) in item.children" :key="num" v-auth="child.path">
          <div class="item-box">
            <router-link :to="child.path">
                <span class="icon iconfont" :class="hasIcon(child.icon)"></span>
              <div class="ml10">
                <h3>{{ child.name }}</h3>
                <p>{{ child.remark }}</p>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PlusApi from '@/api/plus.js';

export default {
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*数据*/
      listData:[],
      /*插件列表数据*/
      list: []
    };
  },
  created() {
    this.getData();
  },

  methods: {

    /*获取数据*/
    getData() {
      let self = this;
      PlusApi.plusList({}, true)
        .then(res => {
          self.loading = false;
          self.listData=res.data.list;
          //self.buildTree(data.data.list, false);
        })
        .catch(error => {});
    },

    /*构建树结构*/
    buildTree(list, flag) {
      if (!flag) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (item.parent_id == 0) {
            item.children = [];
            this.list.push(item);
            list.splice(i, 1);
            i--;
          }
        }
      } else {
        for (let i = 0, leng = list.length; i < leng; i++) {
          let item = list[i];
          for (let j = 0, j_leng = this.list.length; j < j_leng; j++) {
            let j_item = this.list[j];
            if (item.parent_id == j_item.plus_id) {
              j_item.children.push(item);
              list.splice(i, 1);
              i--;
              break;
            }
          }
        }
      }

      if (!flag) {
        this.buildTree(list, true);
      }
      return;
    },

    /*生成二级菜单 并把子集的以下全编程二级*/
    /* buildTree(list) {
      for (let i = 0, leng = list.length; i < leng; i++) {
        let item = list[i];
        if (item.parent_id == 0) {
          item.children = [];
          this.list.push(item);
          list.splice(i,1);
          i--;
        } else {
          for (let j = 0, j_leng = this.list.length; j < j_leng; j++) {
            let j_item = this.list[j];
            if (item.parent_id == j_item.plus_id) {
              j_item.children.push(item);
              list.splice(i,1);
              i--;
              break;
            }
            else{
              for(let p=0,p_leng=j_item.children.length;p<p_leng;p++){
                let child=j_item.children[p];
                if(item.parent_id==child.plus_id){
                  j_item.children.push(item);
                  list.splice(i,1);
                  i--;
                  break;
                }
              }
            }
          }
        }
      }
      if(list.length>0){
        this.buildTree(list);
      }
      return;
    }, */

    //判断是否有图标
    hasIcon(e) {
      if (e != null && e.length > 0) {
        return e;
      } else {
        return 'icon-chajian1';
      }
    }
  }
};
</script>

<style>
  .plus-container{ min-height: 400px;}
.plus-container .common-form{ margin-bottom: 0;}
.plus-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.plus-list .item {
  width: 25%;
}
.plus-list .item .item-box {
  padding: 10px;
}
.plus-list .item a {
  display: flex;
  height: 60px;
  padding-left: 10px;
  justify-content: flex-start;
  align-items: center;
}
.plus-list .item a h3 {
  font-weight: normal;
  color: #333333;
}
.plus-list .item a:hover h3 {
  color: #3a8ee6;
}
.plus-list .item a p {
  font-size: 12px;
  color: #999999;
}
.plus-list .item .item-box .iconfont {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  line-height: 40px;
  background: #3a8ee6;
}
.plus-list .item a .icon.iconfont {
  color: #ffffff;
  font-size: 22px
}
</style>
