<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>
              </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"; //贴子插件
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, //帖子
  },
  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 "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", //背景颜色
              // PaddingTop: 0, //上边距
              // PaddingBottom: 0, //下边距
              // PaddingLeft: 0, //左边距
              // PaddingRight: 0, //右边距
              // SearchFilletPX: 0, //组件圆角
              list: [], //自定义列表
              catList: [], //分类列表
            },
          };
          this.dataList.push(PPPlusObj);
          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>
