<style>
  .pluginCenter {
    padding: 20px 0;
  }

  .plugin_ListTitle {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 24px;
  }

  .plugin-list {
    flex-wrap: wrap;
    margin-left: -20px;
  }

  .plugin-item {
    border: 1px solid #ebebeb;
    background: #fff;
    padding: 20px;
    width: 252px;
    margin: 0 0 20px 20px;
    transition: 250ms;
    position: relative;
    height: 97px;
  }

  .plugin-item .display-name {
    margin-bottom: 10px;
    transition: 250ms;
  }

  .plugin-item:hover {
    border-color: #bfddff;
    cursor: pointer;
  }

  .plugin-item:hover .display-name {
    color: #409EFF;
  }

  .plugin-icon-bg {
    background: rgb(250, 163, 34);
    border-radius: 10px;
    font-size: 0;
    display: inline-block;
  }

  .plugin-icon {
    width: 50px;
    height: 50px;
  }

  .plugin-name {
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .plugin-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999999;
    font-size: 12px;
  }

</style>
<template>
  <div class="pluginCenter">
    <div flex="cross:center">
      <h3 class="plugin_ListTitle">已安装</h3>
    </div>
    <div class="plugin-list" flex="dir:left">
      <template v-for="(item,index) in DefaultList">
        <div :key="index" flex="dir:left box:first" :class="item.IconClass" @click="goDiyCenter(item.PlugUrl)">
          <div style="padding-right: 12px;"><img :src="item.Icon" style="width: 50px; height: 50px; display: block;">
          </div>
          <div>
            <div class="display-name">{{item.PlugName}}</div>
            <div flex="box:last">
              <div class="name">{{item.PlugSubName}}</div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div style="display:none">
      <div flex="cross:center" style="margin-top:20px;">
        <h3 class="plugin_ListTitle">营销工具</h3>
      </div>
      <div flex="dir:left" class="plugin-list el-row">
        <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4"
          @click="goDiyCenter('pintuanMain')">
          <div flex="dir:left box:first" class="plugin-item">
            <div style="padding-right: 12px;">
              <div class="plugin-icon-bg">
                <img src="../../assets/img/sallCenter/pintuan.png" style="width: 50px; height: 50px; display: block;">
              </div>
            </div>
            <div>
              <div class="plugin-name">拼团</div>
              <div flex="box:last">
                <div class="plugin-desc">邀请朋友一起拼团购买</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentUser: {},
        isChecked: 1,
        Height: 0,
        isShow: 1,
        DefaultList: [], //默认列表
      };
    },
    created() {
      this.currentUser = this.getLocalStorage();
    },
    methods: {
      //跳转微信小程序
      goDiyCenter(path) {
        let routeData = this.$router.resolve({
          name: path,
          query: {
            FIndex: 1
          }
        });
        window.open(routeData.href, "_blank");
      },
      //获取插件列表
      getPlugList() {
        this.apipost("/api/MContent/GetMarketingPlugList", {}, res => {
          if (res.data.resultCode == 1) {
            var tempData = res.data.data;
            if (tempData && tempData.length > 0) {
              tempData.forEach(item => {
                if (item.PlugType == 1) {
                  this.DefaultList = item.SubList
                }
              });
            }
          } else {
            this.Info(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.getPlugList();
      this.Height = document.documentElement.clientHeight - 60;
      //监听浏览器窗口变化　
      window.onresize = () => {
        this.Height = document.documentElement.clientHeight - 60
      }
    }
  };

</script>