<style>
  .tpEdit_header {
    padding: 18px;
    background: #fff;
    color: #606266;
    margin-bottom: 10px;
  }

  .tpEdit_Content {
    margin-bottom: 10px;
    min-width: 1280px;
    height: 725px;
  }

  .all-components {
    max-height: 725px;
    overflow-y: auto;
    background: #fff;
    padding: 20px;
  }

  .all-components .component-group {
    border: 1px solid #eeeeee;
    width: 300px;
    margin-bottom: 20px;
  }

  .all-components .component-group-name {
    height: 35px;
    line-height: 35px;
    background: #f7f7f7;
    padding: 0 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .all-components .component-list {
    margin-right: -2px;
    margin-top: -2px;
    flex-wrap: wrap;
  }

  .all-components .component-list .component-item {
    width: 100px;
    height: 100px;
    border: 0 solid #eeeeee;
    border-width: 0 1px 1px 0;
    text-align: center;
    padding: 15px 0 0;
    cursor: pointer;
  }

  .component-item:nth-child(3n) {
    border-right: 0 !important;
  }

  .template_right {
    padding-left: 2px;
    position: relative;
    overflow-y: auto;
  }

  .template_Mobile {
    overflow-y: auto;
    padding: 0px 25px;
    width: 435px;
    height: 705px;
    margin-left: 6px;
  }

  .mobile-framework {
    width: 375px;
  }

  .mobile-framework-header {
    height: 60px;
    line-height: 60px;
    background: #333;
    color: #fff;
    text-align: center;
    background: url('../../assets/img/sallCenter/head.png') no-repeat;
  }

  .mobile-framework-body {
    background-color: rgb(245, 247, 249);
    min-height: 645px;
    border: 1px solid #e2e2e2;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .diy-component-preview {
    cursor: pointer;
    position: relative;
    zoom: 0.5;
    -moz-transform: scale(0.5);
    -moz-transform-origin: top left;
    font-size: 28px;
  }

  .diy-component-edit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 465px;
    right: 0;
    background: #fff;
    padding: 20px;
    overflow: auto;
    min-width: 650px;
    padding-right: 20%;
  }

  .diy-component-options {
    position: relative;
  }

  .active .diy-component-preview {
    border: 2px dashed #409EFF;
    left: -2px;
    right: -2px;
    width: calc(100% + 4px);
  }

  .diy-search {
    padding: 24px;
    cursor: pointer;
    background: rgb(242, 242, 242);
  }

  .diy-component-options .el-button {
    height: 25px;
    line-height: 25px;
    width: 25px;
    padding: 0;
    text-align: center;
    border: none;
    border-radius: 0;
    position: absolute;
    margin-left: 0;
  }

  .diy-search>div {
    height: 60px;
    line-height: 60px;
    padding: 0 24px;
    font-size: 28px;
  }

  .diy-component-edit .el-color-picker {
    vertical-align: middle;
  }

  .tpEdit_btmMenu {
    height: 54px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

</style>
<template>
  <div class="templateEdit">
    <div class="tpEdit_header">
      <span style="color:rgb(64, 158, 255);cursor:pointer;">模板管理</span><span
        style="margin:0 9px;color:#C0C4CC">/</span><span>新增</span>
    </div>
    <div flex="box:first" class="tpEdit_Content">
      <div class="all-components">
        <el-form label-width="80px">
          <el-form-item label="模板名称">
            <el-input type="text" size="small"></el-input>
          </el-form-item>
          <el-form-item label="背景设置">
            <el-button size="small">设置</el-button>
          </el-form-item>
        </el-form>
        <div class="component-group" v-for="(item,index) in allComponents" :key="index">
          <div class="component-group-name">{{item.GroupName}}</div>
          <div flex class="component-list">
            <div class="component-item" v-for="(subItem,subIndex) in item.SubList" @click="addPlugin(subItem.Id)"
              :key="subIndex">
              <img :src="subItem.Icon" alt="" />
              <div>{{subItem.Name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="template_right">
        <div class="template_Mobile">
          <div class="mobile-framework" style="height:705px;">
            <div class="mobile-framework-header"></div>
            <div class="mobile-framework-body">
              <!-- 为空的样式开始 -->
              <div v-if="isEmpty" flex="main:center cross:center"
                style="height: 200px; color: rgb(173, 177, 184); text-align: center;">
                <div>
                  <i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px;"></i>
                  <div>空空如也</div>
                  <div>请从左侧组件库添加组件</div>
                </div>
              </div>
              <!-- 为空的样式结束 -->
              <div v-for="(item,index) in dataList" :key="index" @click="getItem(item)">
                <search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></search>
                <navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></navigationIcon>
                <banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></banner>
                <rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></rubik>
                <goods v-if="item.Id=='goods'" :goodData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></goods>
                <notice v-if="item.Id=='notice'" :noticeData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></notice>
                <mylink v-if="item.Id=='link'" :linkData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></mylink>
                <myvideo v-if="item.Id=='video'" :videoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></myvideo>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpEdit_btmMenu">
      <el-button type="primary" size="small" @click="getAllData()">保存</el-button>
    </div>
  </div>
</template>
<script>
  import search from "../sallCenter/plugin/search.vue"
  import navigationIcon from "../sallCenter/plugin/navigationIcon.vue"
  import banner from "../sallCenter/plugin/banner.vue"
  import rubik from "../sallCenter/plugin/rubik.vue"
  import goods from "../sallCenter/plugin/goods.vue"
  import notice from "../sallCenter/plugin/notice.vue"
  import mylink from "../sallCenter/plugin/link.vue"
  import myvideo from "../sallCenter/plugin/video.vue"
  export default {
    data() {
      return {
        allComponents: [],
        dataList: [],
        //是否为空
        isEmpty: true,
      };
    },
    created() {

    },
    components: {
      search,
      navigationIcon,
      banner,
      rubik,
      goods,
      notice,
      mylink,
      myvideo
    },
    methods: {
      //获取左侧菜单
      GetPlugInList() {
        this.apipost("/api/Tenant/GetPlugInList", {}, res => {
          if (res.data.resultCode == 1) {
            this.allComponents = res.data.data;
            console.log(this.allComponents);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //点击基础组件
      addPlugin(Id) {
        this.isEmpty = false;
        switch (Id.toString()) {
          //搜索
          case 'search':
            let searchObj = {
              Id: 'search',
              isCked: false,
              data: {
                color: '#FFFFFF', //搜索框颜色
                background: '#f2f2f2', //背景颜色
                radius: 4, //圆角
                placeholder: '搜索', //提示文字
                textColor: '#555555', //文字颜色
                textPosition: "left" //文字位置
              }
            }
            this.dataList.push(searchObj);
            break;
            //导航图标
          case 'nav':
            let navObj = {
              Id: 'nav',
              isCked: false,
              data: {
                color: '#353535',
                rows: 1, //每页行数
                columns: 3, //每行个数
                scroll: true, //左右滑动
                navs: [], //导航图标
                showImg: false, //背景图片
                backgroundColor: '#ffffff', //背景颜色
                backgroundPicUrl: '', //背景链接
                position: 5, //图片位置
                mode: 1, //填充方式
                backgroundHeight: 100, //背景图宽
                backgroundWidth: 100, //背景图高
              }
            }
            this.dataList.push(navObj);
            break;
            //轮播广告
          case 'banner':
            let banObj = {
              Id: "banner",
              isCked: false,
              data: {
                style: 1, //样式
                fill: 1, //填充方式0-留白 1填充
                height: 450, //默认高度
                banners: [], //轮播图
              }
            }
            this.dataList.push(banObj);
            break;
            //公告
          case 'notice':
            let noticeObj = {
              Id: 'notice',
              isCked: false,
              data: {
                name: '公告',
                content: '',
                icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-notice.png',
                textColor: '#ffffff',
                background: '#f67f79',
                headerUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-notice-title.png',
                btnColor: '#ff4544',
                btnWidth: 500,
                btnHeight: 80,
                btnRadius: 40,
                btnText: '我知道了',
                btnTextColor: '#ffffff'
              }
            }
            this.dataList.push(noticeObj);
            break;
            // 专题未做
            //标题
          case 'link':
            let linkObj = {
              Id: 'link',
              isCked: false,
              data: {
                title: '', //标题
                style: '1', //标题样式
                fontSize: '36', //字体大小
                position: 'left', //标题位置
                styleColor: '#353535', //样式颜色
                link: {}, //链接
                picSwitch: false, //图标开关
                arrowsSwitch: false, //箭头开关
                picUrl: '', //图标地址
                color: '#353535', //文字颜色
                background: '#ffffff' //背景颜色
              }
            }
            this.dataList.push(linkObj);
            break;
            //图片广告
          case 'rubik':
            let rubObj = {
              Id: 'rubik',
              isCked: false,
              data: {
                style: -1, //样式-选取几张图
                space: 0, //图片件间隔
                height: 0, //选中的第几张图 对应的style_list里的height
                w: 1, //选中的第几张图 对应的style_list里的w
                h: 1, //选中的第几张图 对应的style_list里的h
                list: [], //选中的第几张图的小区域对应的数据
                hotspot: [] //热区划分
              }
            }
            this.dataList.push(rubObj);
            break;
            //视频
          case 'video':
            let videoObj = {
              Id: 'video',
              isCked: false,
              data: {
                pic_url: '',  //图片地址
                url: ''  //视频地址
              }
            }
            this.dataList.push(videoObj);
            break;
            //商品
          case 'goods':
            let goodsObj = {
              Id: 'goods',
              isCked: false,
              data: {
                showCat: false, //显示分类
                catPosition: 'top', //分类栏位置
                catStyle: 1, //分类样式
                catList: [], //分类列表
                list: [], //商品列表
                addGoodsType: 0, //商品添加方式
                goodsLength: 10, //商品数量
                listStyle: 1, //列表样式
                goodsCoverProportion: '1-1', //商品封面图宽高比例
                fill: 1, //商品封面图填充
                goodsStyle: 1, //商品样式
                textStyle: 1, //文本样式
                showGoodsName: true, //显示商品名称
                showGoodsPrice: true, //显示商品价格
                showBuyBtn: true, //显示购买按钮
                buyBtn: 'cart', //购买按钮样式
                buyBtnStyle: 1, //购买按钮文字样式
                buyBtnText: '购买', //购买按钮文字
                buttonColor: '#ff4544', //购买按钮颜色
                showGoodsTag: false, //显示商品角标
                customizeGoodsTag: false, //商品角标自定义
                goodsTagPicUrl: '', //商品角标链接
                showImg: false, //
                backgroundColor: '#fff', //背景颜色
                backgroundPicUrl: '', //背景链接
                position: 5,
                mode: 1,
                backgroundHeight: 100, //背景高
                backgroundWidth: 100, //背景宽    
              }
            }
            this.dataList.push(goodsObj);
            break;
        }
      },
      //给子组件调用 重新排序上移下移
      getSord(index, IsUp) {
        var currentItem = this.dataList[index];
        if (IsUp == 0) {
          if (index > 0) {
            var upItem = this.dataList[index - 1];
            this.$set(this.dataList, index - 1, currentItem);
            this.$set(this.dataList, index, upItem);
          }
        } else {
          if (index != this.dataList.length - 1) {
            var downItem = this.dataList[index + 1];
            this.$set(this.dataList, index + 1, currentItem);
            this.$set(this.dataList, index, downItem);
          }
        }
      },
      //删除组件事件
      comDelPlugin(index) {
        this.dataList.splice(index, 1);
      },
      //点击选中
      getItem(item) {
        this.dataList.forEach(x => {
          x.isCked = false;
        })
        item.isCked = true;
      },
      //点击保存
      getAllData() {
        console.log(this.dataList, 'dataListtt');
      }
    },
    mounted() {
      this.GetPlugInList();
    }
  };

</script>
