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

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

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

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

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

  .Myall-components .Mycomponent-list {
    margin-right: -2px;
    margin-top: -2px;
    flex-wrap: wrap;
  }

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

  .Mycomponent-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 !important;
  }

  .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;
  }

  .bgMsg_Div div {
    height: 50px;
    width: 50px;
    margin-bottom: 10px;
    cursor: pointer;
    background-color: #f5f7f9;
  }

  .bgMsg_Div .active {
    background-color: #e6f4ff;
    border: 2px dashed #5cb3fd;
  }

</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="Myall-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" @click="bgVisible = true">设置</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="Mycomponent-list">
            <div class="Mycomponent-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" :style="
                'background-color:' +
                bgMsg.data.backgroundColor +
                ';background-image:url(' +
                getIconLink(bgMsg.data.backgroundPicUrl) +
                ');background-size:' +
                bgMsg.data.backgroundWidth +
                '% ' +
                bgMsg.data.backgroundHeight +
                '%;background-repeat:' +
                repeat +
                ';background-position:' +
                position
              ">
              <!-- 为空的样式开始 -->
              <div v-if="dataList.length == 0" 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>
                <Posts v-if="item.Id == 'blindDatePPPlus'" :goodData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></Posts>
                <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>
                <topic v-if="item.Id == 'topic'" :topicData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></topic>
                <shopinfo v-if="item.Id == 'shop-info'" :shopinfoData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></shopinfo>
                <sidao v-if="item.Id == 'drive-guide'" :sidaoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></sidao>
                <education v-if="item.Id == 'education'" :eduData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></education>
                <educationArticle v-if="item.Id == 'educationArticle'" :zxData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></educationArticle>
                <educationCustom v-if="item.Id == 'educationCustom'" :cusData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></educationCustom>
                <reservestore v-if="item.Id == 'reservestore'" :reserData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></reservestore>
                <storeGoods v-if="item.Id == 'storeGoods'" :storeData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></storeGoods>
                <educationteacher v-if="item.Id == 'educationteacher'" :lsData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></educationteacher>
                <navPage v-if="item.Id == 'nav-page'" :navData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></navPage>
                <miaiuser v-if="item.Id == 'miaiuser'" :pData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
                  :index="index" :dataLeng="dataList.length"></miaiuser>
                <miaiactivitytype v-if="item.Id == 'miaiactivitytype'" :mData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></miaiactivitytype>
                <miaiactivityCustom v-if="item.Id == 'miaiactivityCustom'" :mcData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></miaiactivityCustom>
                <tradeCustom v-if="item.Id == 'tradePavilionCustom'" :cusData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></tradeCustom>
                <tradeActivity v-if="item.Id == 'tradeActivity'" :tradeActivityData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></tradeActivity>
                <tradeIndex v-if="item.Id == 'tradeIndex'" :tradeIndexData="item" @getSord="getSord"
                  @comDelPlugin="comDelPlugin" :index="index" :dataLeng="dataList.length"></tradeIndex>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tpEdit_btmMenu">
      <el-button type="primary" size="small" @click="SaveData()">保存</el-button>
    </div>
    <!-- 背景设置 -->
    <el-dialog title="背景设置" :visible.sync="bgVisible" width="950px">
      <el-form label-width="100px">
        <el-form-item label="背景颜色">
          <div flex="dir:left cross:center">
            <el-color-picker size="small" v-model="bgMsg.data.backgroundColor"></el-color-picker>
            <el-input size="small" style="width: 80px; margin-right: 25px" v-model="bgMsg.data.backgroundColor">
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="背景图片">
          <el-switch v-model="bgMsg.data.showImg" @change="showBackground"></el-switch>
          <slot name="about"></slot>
        </el-form-item>
        <el-form-item v-if="bgMsg.data.showImg" label="上传背景">
          <div class="zk_pic_box" @click="choicImg = true" flex="main:center cross:center" :style="{
              backgroundImage:
                'url(' + getIconLink(bgMsg.data.backgroundPicUrl) + ')',
            }">
            <i v-if="bgMsg.data.backgroundPicUrl == ''" class="el-icon-picture-outline"></i>
            <el-button type="danger" v-if="bgMsg.data.backgroundPicUrl != ''" class="image-delete" size="mini"
              icon="el-icon-close" @click.stop="bgMsg.data.backgroundPicUrl = ''" circle></el-button>
          </div>
        </el-form-item>
        <el-form-item v-if="bgMsg.data.showImg" label="图片位置">
          <div class="bgMsg_Div" flex="main:justify wrap:wrap" style="width: 170px; height: 180px">
            <div @click="choose(1, 'top left')" :class="bgMsg.data.position == 1 ? 'active' : ''"></div>
            <div @click="choose(2, 'top center')" :class="bgMsg.data.position == 2 ? 'active' : ''"></div>
            <div @click="choose(3, 'top right')" :class="bgMsg.data.position == 3 ? 'active' : ''"></div>
            <div @click="choose(4, 'center left')" :class="bgMsg.data.position == 4 ? 'active' : ''"></div>
            <div @click="choose(5, 'center center')" :class="bgMsg.data.position == 5 ? 'active' : ''"></div>
            <div @click="choose(6, 'center right')" :class="bgMsg.data.position == 6 ? 'active' : ''"></div>
            <div @click="choose(7, 'bottom left')" :class="bgMsg.data.position == 7 ? 'active' : ''"></div>
            <div @click="choose(8, 'bottom center')" :class="bgMsg.data.position == 8 ? 'active' : ''"></div>
            <div @click="choose(9, 'bottom right')" :class="bgMsg.data.position == 9 ? 'active' : ''"></div>
          </div>
        </el-form-item>
        <el-form-item v-if="bgMsg.data.showImg" label="填充方式">
          <el-radio-group v-model="bgMsg.data.mode" @change="changeMode">
            <el-radio :label="1">充满</el-radio>
            <el-radio :label="2">左右平铺</el-radio>
            <el-radio :label="3">上下平铺</el-radio>
            <el-radio :label="4">平铺满</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="bgMsg.data.showImg && bgMsg.data.mode != 1" label="背景图宽">
          <el-slider v-model="bgMsg.data.backgroundWidth" :show-input-controls="false" style="float: left; width: 95%"
            :max="100" show-input></el-slider>
          <div style="float: right">%</div>
        </el-form-item>
        <el-form-item v-if="bgMsg.data.showImg && bgMsg.data.mode != 1" label="背景图高">
          <el-slider v-model="bgMsg.data.backgroundHeight" :show-input-controls="false" style="float: left; width: 95%"
            :max="100" show-input></el-slider>
          <div style="float: right">%</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bgVisible = false">取 消</el-button>
        <el-button type="primary" @click="SetBgInfo()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </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";
  import topic from "../sallCenter/plugin/topic.vue";
  import shopinfo from "../sallCenter/plugin/shopinfo.vue";
  import sidao from "../sallCenter/plugin/sidao.vue";
  import education from "../sallCenter/plugin/education";
  import educationArticle from "../sallCenter/plugin/educationArticle";
  import educationteacher from "../sallCenter/plugin/educationteacher";
  import educationCustom from "../sallCenter/plugin/educationCustom";
  import reservestore from "../sallCenter/plugin/reservestore";
  import storeGoods from "../sallCenter/plugin/storeGoods";
  import navPage from "../sallCenter/plugin/nav-page";
  import miaiuser from "../sallCenter/plugin/miaiuser";
  import miaiactivitytype from "../sallCenter/plugin/miaiactivitytype";
  import miaiactivityCustom from "../sallCenter/plugin/miaiactivityCustom";
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import Posts from "./plugin/posts.vue"; //贴子插件
  import tradeCustom from "./plugin/tradeCustom.vue" //自定义首店
  import tradeActivity from "./plugin/tradeActivity.vue" //首店活动
  import tradeIndex from "./plugin/tradeIndex.vue" //首店首页
  export default {
    data() {
      return {
        addMsg: {
          Id: 0, //编号
          TemplateName: "", //模板名称
          TemplateData: "",
          ComponentDataList: [],
        },
        bgMsg: {
          Id: "background",
          data: {
            showImg: false,
            backgroundColor: "#f5f7f9",
            backgroundPicUrl: "",
            position: 5,
            mode: 1,
            backgroundHeight: 100,
            backgroundWidth: 100,
          },
        },
        position: "center center",
        repeat: "no-repeat",
        choicImg: false,
        //左侧组件列表
        bgVisible: false,
        allComponents: [],
        dataList: [],
      };
    },
    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,
      topic,
      shopinfo,
      ChooseImg,
      sidao,
      education,
      educationArticle,
      educationCustom,
      reservestore,
      storeGoods,
      educationteacher,
      navPage,
      miaiuser,
      miaiactivitytype,
      miaiactivityCustom,
      Posts, //帖子
      tradeCustom,
      tradeActivity,
      tradeIndex, //首店首页数据组件
    },
    methods: {
      //选择图片
      SelectId(msg) {
        this.bgMsg.data.backgroundPicUrl = this.getIconLink(msg.url);
        this.choicImg = false;
      },
      choose(num, position) {
        this.bgMsg.data.position = num;
        this.position = position;
      },
      //点击设置背景
      SetBgInfo() {
        var isExists = false;
        var existsIndex = 0;
        this.dataList.forEach((item, index) => {
          if (item.Id == "background") {
            isExists = true;
            existsIndex = index;
          }
        });
        if (isExists) {
          this.dataList[existsIndex] = JSON.parse(JSON.stringify(this.bgMsg));
        } else {
          this.dataList.push(this.bgMsg);
        }
        this.bgVisible = false;
      },
      showBackground(e) {
        if (!e) {
          this.bgMsg.data.backgroundPicUrl += "临时放置";
        } else {
          this.bgMsg.data.backgroundPicUrl =
            this.bgMsg.data.backgroundPicUrl.replace("临时放置", "");
        }
        if (this.bgMsg.data.mode == 2) {
          this.repeat = "repeat-x";
        } else if (this.bgMsg.data.mode == 3) {
          this.repeat = "repeat-y";
        } else if (this.bgMsg.data.mode == 4) {
          this.repeat = "repeat";
        } else if (this.bgMsg.data.mode == 1) {
          this.repeat = "no-repeat";
          this.bgMsg.data.backgroundHeight = 100;
          this.bgMsg.data.backgroundWidth = 100;
        }
      },
      changeMode(e) {
        if (e == 2) {
          this.repeat = "repeat-x";
        } else if (e == 3) {
          this.repeat = "repeat-y";
        } else if (e == 4) {
          this.repeat = "repeat";
        } else if (e == 1) {
          this.repeat = "no-repeat";
          this.bgMsg.data.backgroundHeight = 100;
          this.bgMsg.data.backgroundWidth = 100;
        }
      },
      //获取左侧菜单
      GetPlugInList() {
        this.apipost("/api/Tenant/GetPlugInList", {
          QPlugTypeStr: "1,2,3"
        }, (res) => {
          if (res.data.resultCode == 1) {
            this.allComponents = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        });
      },
      //点击基础组件
      addPlugin(Id) {
        switch (Id.toString()) {
          //搜索
          case "search":
            let searchObj = {
              Id: "search",
              isCked: false,
              data: {
                color: "#FFFFFF", //搜索框颜色
                background: "#f2f2f2", //背景颜色
                radius: 4, //圆角
                placeholder: "搜索", //提示文字
                textColor: "#555555", //文字颜色
                textPosition: "left", //文字位置
                top: 0, //上边距
                right: 0, //右边距
                bottom: 0, //下边距
                left: 0, //左边距
                searchPosition: 0, //搜索框位置(0-默认，1-顶部)
              },
            };
            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: [], //轮播图
                radius: 0, //圆角
                topAndBottom: 0, //上下边距
                leftAndRight: 0, //左右边距
                background: "", //背景色
                isShowTitle: 0, //是否显示链接表头
              },
            };
            this.dataList.push(banObj);
            break;
            //公告
          case "notice":
            let noticeObj = {
              Id: "notice",
              isCked: false,
              data: {
                name: "公告", //公告名称
                content: "", //公告内容
                icon: this.domainManager().ImageUrl + "/Static/icon-notice.png", //公告图标
                textColor: "#ffffff", //文字颜色
                background: "#f67f79", //背景颜色
                headerUrl: this.domainManager().ImageUrl + "/Static/icon-notice-title.png", //头部图片
                btnColor: "#ff4544", //按钮颜色
                btnWidth: 500, //按钮宽度
                btnHeight: 80, //按钮高度
                btnRadius: 40, //按钮圆角
                btnText: "我知道了", //按钮文本内容
                btnTextColor: "#ffffff", //按钮文本颜色
              },
            };
            this.dataList.push(noticeObj);
            break;
            // 专题
          case "topic":
            let topicObj = {
              Id: "topic",
              isCked: false,
              data: {
                style: "normal", //专题样式
                count: 1, //显示行数
                logo_1: this.domainManager().ImageUrl + "/Static/icon-topic-1.png", //logo(1行)
                logo_2: this.domainManager().ImageUrl + "/Static/icon-topic-2.png", //logo(2行)
                icon: this.domainManager().ImageUrl + "/Static/icon-topic-r.png", //专题标签
                list: [],
                cat_show: false, //是否显示分类
                topic_list: [],
              },
            };
            this.dataList.push(topicObj);
            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: [], //热区划分
                top: 0, // 上边距
                right: 0, //右边距
                bottom: 0, //下边距
                left: 0, //左边距
                background: "", //背景颜色
              },
            };
            this.dataList.push(rubObj);
            break;
            //视频
          case "video":
            let videoObj = {
              Id: "video",
              isCked: false,
              data: {
                pic_url: "", //图片地址
                url: "", //视频地址
                top: 0, //上边距
                right: 0, //右边距
                bottom: 0, //下边距
                left: 0, //左边距
                isfullscreen: false, //是否全屏
                backgroundimage: "", //背景图片
                radius: 0, //视频圆角
              },
            };
            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, //背景宽
                showScore: true, //显示打星星
                scoreColor: "", //星星颜色
              },
            };
            this.dataList.push(goodsObj);
            break;
            //门店
          case "store":
            let storeObj = {
              Id: "store",
              isCked: false,
              data: {
                navPicUrl: this.domainManager().ImageUrl + "/Static/nav-icon.png", //导航图标
                scorePicUrl: this.domainManager().ImageUrl + "/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: this.domainManager().ImageUrl +
                  "/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: this.domainManager().ImageUrl +
                      "/Static/user-order-dfk.png",
                    text: "待付款",
                  },
                  {
                    url: "",
                    openType: "navigate",
                    picUrl: this.domainManager().ImageUrl +
                      "/Static/user-order-dfh.png",
                    text: "待发货",
                  },
                  {
                    url: "",
                    openType: "navigate",
                    picUrl: this.domainManager().ImageUrl +
                      "/Static/user-order-dsh.png",
                    text: "待收货",
                  },
                  {
                    url: "",
                    openType: "navigate",
                    picUrl: this.domainManager().ImageUrl +
                      "/Static/user-order-ywc.png",
                    text: "待评价",
                  },
                  {
                    url: "",
                    openType: "navigate",
                    picUrl: this.domainManager().ImageUrl + "/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: this.domainManager().ImageUrl + "/Static/icon-coupon-no.png", //不可领取
                unclaimedBg: this.domainManager().ImageUrl + "/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: this.domainManager().ImageUrl + "/Static/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: this.domainManager().ImageUrl + "/Static/buy_bg.png", //未购买用户默认背景图
                renew_bg: this.domainManager().ImageUrl + "/Static/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: false, //使用商城配置
                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;
            //门店用户信息
          case "shop-info":
            let shopInfoObj = {
              Id: "shop-info",
              isCked: false,
              data: {
                headImg: "", //头像
                headName: "赞羊小店", //用户信息
                headInfo: "赞美生活,样样满意", //用户介绍
                backgroundPicUrl: "", //背景图片
                backgroundColor: "#ffffff", //背景颜色
                bottonImg: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1598255454000_522.png", //按钮图片
                fontColor: "", //字体颜色
                fontName: "", //字体
                fontSize: 12, //字体大小
                isBold: "true", //是否加粗
              },
            };
            this.dataList.push(shopInfoObj);
            break;
            //司导组件
          case "drive-guide":
            let driveObj = {
              Id: "drive-guide",
              isCked: false,
              data: {
                SearchBackground: "", //搜索背景
                SearchTips: "", //搜索框文字
                Tips: "每辆车都会配备一名专业导游，方便游客出行", //	按钮上面的文字提示
                TipsIco: this.domainManager().ImageUrl + "/Static/dir_icon.png", //	按钮上面的文字图标提示
                ButtonTextColor: "#fff", //按钮文本颜色
                ButtonText: "去订车", //	按钮文本
                ButtonColor: "#FF4048", //按钮颜色
                IsShowDate: 1, //	是否显示时间筛选0-否，1-是
                IsShowCity: 1, // 是否显示城市筛选0-否，1-是
                IsShowAddress: 1, //是否显示地址筛选0-否，1-是
                IsShowCarpooling: 1, //是否显示拼车筛选0-否，1-是
                IsShowGuideCarGoodsType: 1, //	是否显示出行类型筛选0-否，1-是
                IsShowCarClass: 1, //是否显示车辆类型筛选0-否，1-是
                IsShowTravelGuestNum: 1, //是否显示出行人数筛选0-否，1-是
                ButtonFilletPX: 0, // 按钮圆角像素
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
              },
            };
            this.dataList.push(driveObj);
            break;
            //最近学习组件
          case "education":
            let eduObj = {
              Id: "education",
              isCked: false,
              data: {
                Cover: "", //封面图
                Name: "", //课程名称
                showProgress: 0, //显示进度
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                BtnPosition: 0, //按钮位置
              },
            };
            this.dataList.push(eduObj);
            break;
            //资讯
          case "educationArticle":
            let zxObj = {
              Id: "educationArticle",
              isCked: false,
              data: {
                goodsLength: 10, //商品数量
                addGoodsType: 0, //商品添加方式【0-自定义,1-最新】
                listStyle: -1, //列表样式[-1-列表模式,0-左右滑动,1-一行一个]
                backgroundColor: "#fff", //背景颜色
                SearchFilletPX: 0, //圆角
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                list: [], //商品列表
              },
            };
            this.dataList.push(zxObj);
            break;
            //教育自定义
          case "educationCustom":
            let customObj = {
              Id: "educationCustom",
              isCked: false,
              data: {
                goodsLength: 10, //商品数量
                listStyle: -1, //列表样式[-1-列表模式,0-左右滑动,1-一行一个,2-一行两个3-一行三个]
                backgroundColor: "#fff", //背景颜色
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                SearchFilletPX: 0, //组件圆角
                list: [], //自定义列表
              },
            };
            this.dataList.push(customObj);
            break;
            //首店自定义组件
          case "tradePavilionCustom":
            let tradeObj = {
              Id: "tradePavilionCustom",
              isCked: false,
              data: {
                goodsLength: 10, //商品数量
                goodType: 1, // 类型(1-载体，2-品牌)
                addGoodsType: 1, //添加方式【0-自动添加,1-手动添加】
                listStyle: -1, //列表样式[-1-列表模式,0-左右滑动,1-一行一个,2-一行两个3-一行三个]
                backgroundColor: "#fff", //背景颜色
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                SearchFilletPX: 0, //组件圆角
                list: [], //自定义列表
              },
            };
            this.dataList.push(tradeObj);
            break;
          case "reservestore":
            let reserObj = {
              Id: "reservestore",
              isCked: false,
              data: {
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                IsShowStoreImg: true, //是否显示商店图片
                SearchFilletPX: 0, //圆角像素
              },
            };
            this.dataList.push(reserObj);
            break;
          case "storeGoods":
            let storeGoodObj = {
              Id: "storeGoods",
              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, //背景宽
                showScore: true, //显示打星星
                scoreColor: "", //星星颜色
              },
            };
            this.dataList.push(storeGoodObj);
            break;
            //老师
          case "educationteacher":
            let lsObj = {
              Id: "educationteacher",
              isCked: false,
              data: {
                addGoodsType: 0, //商品添加方式【0-自定义,1-最新】
                listStyle: 0, //列表样式[-1-列表模式,0-左右滑动,1-一行一个]
                backgroundColor: "#fff", //背景颜色
                SearchFilletPX: 0, //圆角
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                TeacherList: [], //商品列表
              },
            };
            this.dataList.push(lsObj);
            break;
            //导航栏目
          case "nav-page":
            let navPageObj = {
              Id: "nav-page",
              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, //背景图高
                navType: 1, //导航类型 1导航模式 2Tab模式
              },
            };
            this.dataList.push(navPageObj);
            break;
            //人物插件
          case "miaiuser":
            let miaiuserData = {
              Id: "miaiuser",
              isCked: false,
              data: {
                goodsLength: 0, // 人数数量
                listStyle: 1, // 列表样式[-1-列表模式,0-左右滑动,1-一行一个,2-一行两个3-一行三个]
                addUserType: 0, // 用户添加方式（0-自定义，1-按照匹配度【规则未确定】，2-按照热度【被浏览数据，被关注数据】，3-按照最新）
                sexType: 0, //0-不限，1-男神，2-女神
                BrowseRate: 0, // 浏览权重
                FollowRate: 0, // 关注权重
                backgroundColor: "", //背景颜色
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                SearchFilletPX: 0, //搜索匡圆角
                list: [], //自定义列表
              },
            };
            this.dataList.push(miaiuserData);
            break;
            //相亲活动
          case "miaiactivitytype":
            let miaiactivityData = {
              Id: "miaiactivitytype",
              isCked: false,
              data: {
                listStyle: 1,
                backgroundColor: "",
                PaddingTop: 0,
                PaddingBottom: 0,
                PaddingLeft: 0,
                PaddingRight: 0,
                SearchFilletPX: 0,
                list: [],
              },
            };
            this.dataList.push(miaiactivityData);
            break;
            //相亲自定义
          case "miaiactivityCustom":
            let miaiacObj = {
              Id: "miaiactivityCustom",
              isCked: false,
              data: {
                goodsLength: 10, //商品数量
                listStyle: -1, //列表样式[-1-列表模式,0-左右滑动,1-一行一个,2-一行两个3-一行三个]
                backgroundColor: "#fff", //背景颜色
                PaddingTop: 0, //上边距
                PaddingBottom: 0, //下边距
                PaddingLeft: 0, //左边距
                PaddingRight: 0, //右边距
                SearchFilletPX: 0, //组件圆角
                list: [], //自定义列表
              },
            };
            this.dataList.push(miaiacObj);
            break;
            //贴子
          case "blindDatePPPlus":
            let PPPlusObj = {
              Id: "blindDatePPPlus",
              isCked: false,
              data: {
                catPosition: "top",
                activityLength: 10, //帖子数量
                addActivityType: 0,
                catStyle: 1,
                listStyle: 5, //列表样式[5-瀑布流,-1-卡片模式]
                backgroundColor: "#fff", //背景颜色
                list: [], //自定义列表
                catList: [], //分类列表
              },
            };
            this.dataList.push(PPPlusObj);
            break;
            //首店活动
          case "tradeActivity":
            let tradeActivityObj = {
              Id: "tradeActivity",
              isCked: false,
              data: []
            };
            this.dataList.push(tradeActivityObj);
            break;
            //首店首页
          case "tradeIndex":
            let tradeIndexObj = {
              Id: "tradeIndex",
              isCked: false,
              data: []
            };
            this.dataList.push(tradeIndexObj);
            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;
        });
        if (item.Id == "rubik") {
          if (item.data.list && item.data.list.length > 0) {
            item.data.list.forEach((subItem) => {
              if (subItem.link && subItem.link.length == 0) {
                subItem.link.push({
                  PageUrl: "",
                  IsParameter: 0,
                  ParameterValue: "",
                  PageName: "",
                });
              }
            });
          }
        }
        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();
            location.reload();
            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;
              this.addMsg.Id = jsonData.Id;
              this.addMsg.TemplateName = jsonData.TemplateName;
              this.addMsg.ComponentDataList = jsonData.ComponentDataList;
              if (jsonData.ComponentDataList) {
                this.dataList = jsonData.ComponentDataList;
              }
              if (jsonData.ComponentDataList) {
                jsonData.ComponentDataList.forEach((x) => {
                  if (x.Id == "background") {
                    this.bgMsg = x;
                  }
                });
              }
            } 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>
