<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;" @click="CommonJump('templateManage',{})">模板管理</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" v-model="addMsg.TemplateName" maxlength="50"></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>
                <mystore v-if="item.Id=='store'" :storeData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></mystore>
                <copyright v-if="item.Id=='copyright'" :copyData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></copyright>
                <checkIn v-if="item.Id=='check-in'" :checkData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></checkIn>
                <userInfo v-if="item.Id=='user-info'" :userData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></userInfo>
                <userOrder v-if="item.Id=='user-order'" :orderData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></userOrder>
                <mymap v-if="item.Id=='map'" :mapData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></mymap>
                <mpLink v-if="item.Id=='mp-link'" :mpData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></mpLink>
                <coupon v-if="item.Id=='coupon'" :couponData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></coupon>
                <timer v-if="item.Id=='timer'" :timerData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></timer>
                <pintuan v-if="item.Id=='pintuan'" :pintuanData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></pintuan>
                <booking v-if="item.Id=='booking'" :bookData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></booking>
                <bargain v-if="item.Id=='bargain'" :barData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></bargain>
                <integralMall v-if="item.Id=='integral-mall'" :mallData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></integralMall>
                <lottery v-if="item.Id=='lottery'" :lottData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></lottery>
                <advance v-if="item.Id=='advance'" :advanceData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></advance>
                <vipCard v-if="item.Id=='vip-card'" :vipData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></vipCard>
                <live v-if="item.Id=='live'" :liveData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></live>
                <empty v-if="item.Id=='empty'" :emptyData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></empty>
                <advert v-if="item.Id=='ad'" :advData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></advert>
                <modal v-if="item.Id=='modal'" :modalData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></modal>
                <quickNav v-if="item.Id=='quick-nav'" :quickData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></quickNav>
                <imageText v-if="item.Id=='image-text'" :imageData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></imageText>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpEdit_btmMenu">
      <el-button type="primary" size="small" @click="SaveData()">保存</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"
  import mystore from "../sallCenter/plugin/store.vue"
  import copyright from "../sallCenter/plugin/copyright.vue"
  import checkIn from "../sallCenter/plugin/check-in.vue"
  import mymap from "../sallCenter/plugin/map.vue"
  import userInfo from "../sallCenter/plugin/user-info.vue"
  import userOrder from "../sallCenter/plugin/user-order.vue"
  import mpLink from "../sallCenter/plugin/mp-link.vue"
  import coupon from "../sallCenter/plugin/coupon.vue"
  import timer from "../sallCenter/plugin/timer.vue"
  import pintuan from "../sallCenter/plugin/pintuan.vue"
  import booking from "../sallCenter/plugin/booking.vue"
  import bargain from "../sallCenter/plugin/bargain.vue"
  import integralMall from "../sallCenter/plugin/integral-mall.vue"
  import lottery from "../sallCenter/plugin/lottery.vue"
  import advance from "../sallCenter/plugin/advance.vue"
  import vipCard from "../sallCenter/plugin/vip-card.vue"
  import live from "../sallCenter/plugin/live.vue"
  import empty from "../sallCenter/plugin/empty.vue"
  import advert from "../sallCenter/plugin/advert.vue"
  import modal from "../sallCenter/plugin/modal.vue"
  import quickNav from "../sallCenter/plugin/quick-nav.vue"
  import imageText from "../sallCenter/plugin/image-text.vue"
  export default {
    data() {
      return {
        addMsg: {
          Id: 0, //编号
          TemplateName: '', //模板名称
          TemplateData: '',
          ComponentDataList: [],
        },
        //左侧组件列表
        allComponents: [],
        dataList: [],
        //是否为空
        isEmpty: true,
      };
    },
    created() {

    },
    components: {
      search,
      navigationIcon,
      banner,
      rubik,
      goods,
      notice,
      mylink,
      myvideo,
      mystore,
      copyright,
      checkIn,
      userInfo,
      userOrder,
      mymap,
      mpLink,
      coupon,
      timer,
      pintuan,
      booking,
      bargain,
      integralMall,
      lottery,
      advance,
      vipCard,
      live,
      empty,
      advert,
      modal,
      quickNav,
      imageText
    },
    methods: {
      //获取左侧菜单
      GetPlugInList() {
        this.apipost("/api/Tenant/GetPlugInList", {}, res => {
          if (res.data.resultCode == 1) {
            this.allComponents = res.data.data;
          } 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;
            //门店
          case 'store':
            let storeObj = {
              Id: 'store',
              isCked: false,
              data: {
                navPicUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/nav-icon.png', //导航图标
                scorePicUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/score-icon.png', //评分图标
                showName: true, //显示门店名称
                showScore: true, //显示评分
                showTel: true, //显示电话
                list: [], //门店列表
              }
            }
            this.dataList.push(storeObj);
            break;
            //版权
          case 'copyright':
            let copyObj = {
              Id: 'copyright',
              isCked: false,
              data: {
                picUrl: '', //版权图标
                text: '', //版权文字
                link: '',  //版权链接
                backgroundColor: '#fff',  //背景颜色
              }
            }
            this.dataList.push(copyObj);
            break;
            //签到
          case 'check-in':
            let checkObj = {
              Id: 'check-in',
              isCked: false,
              data: {
                backgroundPicUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/check-in-default-bg.png', //背景图
                showText: true, //显示文字
                textPosition: 'left', //文字位置
                textColor: '#ffffff', //文本颜色
                hotspot: null, //点击热区
              }
            }
            this.dataList.push(checkObj);
            break;
            //用户信息
          case 'user-info':
            let userObj = {
              Id: 'user-info',
              isCked: false,
              data: {
                style: 1,  //样式
                backgroundPicUrl: '',  //背景图片
                backgroundColor: '#ffffff',  //背景颜色
              }
            }
            this.dataList.push(userObj);
            break;
            //订单入口
          case 'user-order':
            let orderObj = {
              Id: 'user-order',
              isCked: false,
              data: {
                navs: [{
                    url: '',
                    openType: 'navigate',
                    picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dfk.png',
                    text: '待付款',
                  },
                  {
                    url: '',
                    openType: 'navigate',
                    picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dfh.png',
                    text: '待发货',
                  },
                  {
                    url: '',
                    openType: 'navigate',
                    picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-dsh.png',
                    text: '待收货',
                  },
                  {
                    url: '',
                    openType: 'navigate',
                    picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-ywc.png',
                    text: '待评价',
                  },
                  {
                    url: '',
                    openType: 'navigate',
                    picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/user-order-sh.png',
                    text: '售后',
                  },
                ],
                backgroundColor: '#ffffff',
              }
            }
            this.dataList.push(orderObj);
            break;

            //地图
          case 'map':
            let mapObj = {
              Id: 'map',
              isCked: false,
              data: {
                location: '',
                height: 400,
                paddingY: 40,
                paddingX: 40,
                marginTop: 0,
                marginTopColor: '#ffffff',
                backgroundColor: '#ffffff',
                backgroundPicUrl: ''
              }
            }
            this.dataList.push(mapObj);
            break;
            //微信公众号
          case 'mp-link':
            let gzhObj = {
              Id: 'mp-link',
              isCked: false,
              data: {
                position: 'auto'
              }
            }
            this.dataList.push(gzhObj);
            break;
            //自定义表单-未做
            //图文详情
          case 'image-text':
            let tuwenObj = {
              Id: 'image-text',
              isCked: false,
              data: {
                content: '',
              }
            }
            this.dataList.push(tuwenObj);
            break;
            //优惠券
          case 'coupon':
            let couponObj = {
              Id: 'coupon',
              isCked: false,
              data: {
                textColor: '#ffffff', //字体颜色
                receiveBg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-no.png', //不可领取
                unclaimedBg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-coupon-index.png', //可领取
                showImg: false,
                backgroundColor: '#fff', //背景颜色
                backgroundPicUrl: '',
                position: 5,
                mode: 1,
                backgroundHeight: 100,
                backgroundWidth: 100,
              }
            }
            this.dataList.push(couponObj);
            break;
            //倒计时
          case 'timer':
            let timerObj = {
              Id: 'timer',
              isCked: false,
              data: {
                picUrl: '', //图片
                link: { //链接
                  url: '',
                  openType: '',
                },
                startDateTime: '', //开始时间
                endDateTime: '', //结束时间
              }
            }
            this.dataList.push(timerObj);
            break;
            //拼团
          case 'pintuan':
            let pintuanObj = {
              Id: 'pintuan',
              isCked: false,
              data: {
                buttonColor: '#ff4544',
                list: [],
                listStyle: 1,
                textStyle: 1,
                fill: 1,
                goodsCoverProportion: '1-1',
                goodsStyle: 1,
                showGoodsName: true,
                showBuyBtn: true,
                buyBtnStyle: 1,
                buyBtnText: '去拼团',
                showGoodsTag: false,
                customizeGoodsTag: false,
                goodsTagPicUrl: '',
                showImg: false,
                backgroundColor: '#fff',
                backgroundPicUrl: '',
                position: 5,
                mode: 1,
                backgroundHeight: 100,
                backgroundWidth: 100,
              }
            }
            this.dataList.push(pintuanObj);
            break;
            //预约
          case 'booking':
            let bookObj = {
              Id: 'booking',
              isCked: false,
              data: {
                buttonColor: '#ff4544',
                list: [],
                listStyle: 1,
                fill: 1,
                goodsCoverProportion: '1-1',
                goodsStyle: 1,
                textStyle: 1,
                showGoodsName: true,
                showBuyBtn: true,
                buyBtnStyle: 1,
                buyBtnText: '预约',
                showGoodsTag: false,
                customizeGoodsTag: false,
                goodsTagPicUrl: '',
                showImg: false,
                backgroundColor: '#fff',
                backgroundPicUrl: '',
                position: 5,
                mode: 1,
                backgroundHeight: 100,
                backgroundWidth: 100,
              }
            }
            this.dataList.push(bookObj);
            break;
            //砍价
          case 'bargain':
            let barObj = {
              Id: 'bargain',
              isCked: false,
              data: {
                buttonColor: '#ff4544',
                list: [],
                listStyle: 1,
                fill: 1,
                goodsCoverProportion: '1-1',
                goodsStyle: 1,
                textStyle: 1,
                showGoodsName: true,
                showBuyBtn: true,
                buyBtnStyle: 1,
                buyBtnText: '去参与',
                showGoodsTag: false,
                customizeGoodsTag: false,
                goodsTagPicUrl: '',
                showImg: false,
                backgroundColor: '#fff',
                backgroundPicUrl: '',
                position: 5,
                mode: 1,
                backgroundHeight: 100,
                backgroundWidth: 100,
              }
            }
            this.dataList.push(barObj);
            break;
            //积分商城
          case 'integral-mall':
            let mallObj = {
              Id: 'integral-mall',
              isCked: false,
              data: {
                showCoupon: true,
                showGoods: true,
                couponColor: '#ffffff',
                couponPicUrl: 'http://wx.weibaoge.cn/plugins/diy/assets/images/coupon-background.png',
                buttonColor: '#ff4544',
                list: [],
                listStyle: 1,
                fill: 1,
                goodsCoverProportion: '1-1',
                goodsStyle: 1,
                textStyle: 1,
                showGoodsName: true,
                showBuyBtn: true,
                buyBtnStyle: 1,
                buyBtnText: '立即兑换',
                showGoodsTag: false,
                customizeGoodsTag: false,
                goodsTagPicUrl: '',
                showImg: false,
                backgroundColor: '#fff',
                backgroundPicUrl: '',
                position: 5,
                mode: 1,
                backgroundHeight: 100,
                backgroundWidth: 100,
              }
            }
            this.dataList.push(mallObj);
            break;
            //抽奖
          case 'lottery':
            let lottObj = {
              Id: 'lottery',
              isCked: false,
              data: {
                buttonColor: '#ff4544',
                list: [],
                listStyle: 1,
                fill: 1,
                goodsCoverProportion: '1-1',
                goodsStyle: 1,
                textStyle: 1,
                showGoodsName: true,
                showBuyBtn: true,
                buyBtnStyle: 1,
                buyBtnText: '去参与',
                showGoodsTag: false,
                customizeGoodsTag: false,
                goodsTagPicUrl: '',
                showImg: false,
                backgroundColor: '#fff',
                backgroundPicUrl: '',
                position: 5,
                mode: 1,
                backgroundHeight: 100,
                backgroundWidth: 100,
              }
            }
            this.dataList.push(lottObj);
            break;
            //预售
          case 'advance':
            let advanceObj = {
              Id: 'advance',
              isCked: false,
              data: {
                buttonColor: '#ff4544', //购买按钮颜色
                list: [], //商品列表
                listStyle: 1,  //列表样式
                fill: 1,  //商品封面图填充
                goodsCoverProportion: '1-1', //商品封面图宽高比例
                goodsStyle: 1, //商品样式
                textStyle: 1,  //文本样式
                showGoodsName: true,  //显示商品名称
                showBuyBtn: true,  //显示购买按钮
                buyBtnStyle: 1,  //购买按钮样式
                buyBtnText: '抢购',  //购买按钮文字
                showGoodsTag: false,  //显示商品角标
                customizeGoodsTag: false,  //自定义商品角标样式
                goodsTagPicUrl: '', //自定义商品角标
                backgroundColor: '#fff', //背景颜色
                backgroundPicUrl: '', //背景图
                backgroundHeight: 100, //背景高度百分比
                backgroundWidth: 100,  //背景宽度百分比
              }
            }
            this.dataList.push(advanceObj);
            break;
            //超级会员卡
          case 'vip-card':
            let vipObj = {
              Id: 'vip-card',
              isCked: false,
              data: {
                background: '#FFFFFF', //背景色
                usePluginConfig: true, //使用插件配置
                top_bottom_padding: 0,  //上下间距
                buy_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',  //未购买用户默认背景图
                renew_bg: 'http://wx.weibaoge.cn/web/statics/img/app/vip_card/buy_bg.png',  //未购买用户背景图
                buy_big_color: '', //未购买用户-大标题字体颜色
                buy_small_color: '', //未购买用户-小标题背景颜色
                buy_btn_color: '',  //未购买用户-按钮文字颜色
                buy_btn_bg_color: '',  //未购买用户-按钮颜色
                buy_big: '',  //未购买用户-大标题文字
                buy_small: '', //未购买用户-小标题文字
                buy_btn_text: '', //未购买用户-按钮文字
                renew_text_color: '', //已购买用户-文字颜色
                renew_btn_bg_color: '',//已购买用户-按钮背景色
                renew_text: '', //已购买用户-标题文字
              }
            }
            this.dataList.push(vipObj);
            break;
            //直播
          case 'live':
            let liveObj = {
              Id: 'live',
              isCked: false,
              data: {
                background: '#f7f7f7', //背景颜色
                is_show_goods: true, //显示商品
                style_type: 1, //卡片样式
                number: 5, //直播间数量
              }
            }
            this.dataList.push(liveObj);
            break;
            //空白块
          case 'empty':
            let emptyObj = {
              Id: 'empty',
              isCked: false,
              data: {
                background: '#ffffff', //背景颜色
                height: 10,  //高度
              }
            }
            this.dataList.push(emptyObj);
            break;
            //流量主广告
          case 'ad':
            let adObj = {
              Id: 'ad',
              isCked: false,
              data: {
                id: '', //广告位ID
                type: '', //广告位类型
                pic_url: '', //广告封面图
                video_url: '', //视频播放链接
                award_type: '0', //广告奖励
                award_coupons: [  //优惠券
                  /*{
                      send_num: 3,
                          name: '优惠券',
                      coupon_id: 710,
                  } */
                ],
                award_num: '', //积分数量
                award_limit_type: '0', //奖励发放限制
                award_limit: 0, //限制次数
              }
            }
            this.dataList.push(adObj);
            break;
            //弹窗广告
          case 'modal':
            let modalObj = {
              Id: 'modal',
              isCked: false,
              data: {
                opened: false, //是否开启
                list: [{ //广告图片数组
                  picUrl: '',
                  link: {
                    url: '',
                    openType: '',
                  },
                }, ],
                times: 0 //弹窗次数
              }
            }
            this.dataList.push(modalObj);
            break;
            //快捷导航
          case 'quick-nav':
            let quickObj = {
              Id: 'quick-nav',
              isCked: false,
              data: {
                navSwitch: 0, //快捷导航开关
                useMallConfig: true, //使用商城配置
                navStyle: 1, //导航样式
                closedPicUrl: '', //收起图标
                openedPicUrl: '', //展开图标
                home: {
                  opened: false,  //是否返回首页
                  picUrl: '', //图标
                },
                customerService: {
                  opened: false,  //小程序客服
                  picUrl: '', //小程序图片
                },
                tel: {
                  opened: false,  //一键拨号开启
                  picUrl: '',  //一键拨号图标
                  number: '',  ////一键拨号电话号码
                },
                web: {
                  opened: false,  //网页链接开启
                  picUrl: '',   
                  url: '',
                },
                mApp: {   //跳转小程序开启
                  opened: false,
                  picUrl: '',
                  appId: '',
                  page: '',
                },
                mapNav: {   //地图导航
                  opened: false,
                  picUrl: '',
                  address: '',
                  location: '',
                },
                customize: {  //自定义按钮
                  opened: false,
                  picUrl: '',
                  open_type: '',
                  params: '',
                  link_url: '',
                  key: '',
                }
              }
            }
            this.dataList.push(quickObj);
            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;
      },
      //点击保存
      SaveData() {
        this.addMsg.ComponentDataList = this.dataList;
        this.apipost("/api/Template/SetMiniTemplate", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.addMsg.Id = res.data.data;
            this.CommonJump('templateEdit', {
              Id: res.data.data
            });
            this.GetData();
            this.Success(res.data.message);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //获取数据
      GetData() {
        this.apipost("/api/Template/GetMiniTemplate", {
          Id: this.addMsg.Id
        }, res => {
          if (res.data.resultCode == 1) {
            var jsonData = res.data.data;
            console.log("jsonData", jsonData);
            this.addMsg.Id = jsonData.Id;
            this.addMsg.TemplateName = jsonData.TemplateName;
            this.addMsg.ComponentDataList = jsonData.ComponentDataList;
            if (jsonData.ComponentDataList) {
              this.dataList = jsonData.ComponentDataList;
            }
          } else {
            this.Info(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.GetPlugInList();
      if (this.$route.query.Id) {
        this.addMsg.Id = this.$route.query.Id;
      }
      if (this.addMsg.Id > 0) {
        this.GetData();
      }
    }
  };

</script>
