surveyMaker/src/views/h5editor/index.vue

<template>
  <div class="editor">
    <!-- 头部 -->
    <HeaderMain></HeaderMain>
    <HeaderEdit :title="title" :goback="dialogSave" :save="save" @saveThemeSuccess="showPreView=true" />
    <!-- 内容区域 -->
    <section class="section">
      <!-- 左侧图层 -->
      <Overview class="overview" :testcaseId="testcaseId" />
      <!-- 编辑区域 -->
      <div class="container" id="h5editor">
        <elab-canvas v-show="animatedNameGlobal!=''" :width="750" :height="1334"
          :cstyle="`height:1334px;width:750px;position: absolute;z-index:99999; pointer-events:none`"
          :background="'transparent'" :type="animatedNameGlobal"></elab-canvas>
        <elab-background-canvas v-if="animatedNameBackgroundGlobal!=''" :width="canvasWidth" :height="(canvasHeight)"
          :cstyle="`position: absolute;z-index:1; pointer-events:none`" :background="'transparent'"
          :type="animatedNameBackgroundGlobal"></elab-background-canvas>

        <Page :isOverView="false" ref="page" id="canvasPage" :hideFoot="hideFoot" class="canvas"
          :elements="editorPage.elements" :editorElement="element" :animatedNameGlobal="animatedNameGlobal"
          :selectedElement="selectedElement"
          :style="{ width: 750 + 'px', height: 1334 + 'px',backgroundColor: bodyBackgroundColor }" />
        <div v-if="this.gridTempField" :style="{'background-image':'linear-gradient(90deg,rgba(204,204,204,0.3) 10%,transparent 0), linear-gradient(rgba(204,204,204,0.3) 10%,transparent 0)',
              'background-size':'15px 15px', 'z-index':100000,width: '750px', height: '1334px'}"
          style="position: absolute;left: 0;top: 0;z-index: 9999;pointer-events: none"></div>
      </div>
      <!-- 属性设置 -->
      <div class="control-panel">
        <div class="funcs">
          <div class="tagPage">
            <div style="width:44px;height: 44px; margin-top: 20px;display: flex;justify-content: center"
              @click="togglePanel(1)" :class="{ active: panelState === 1 }">
              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-text.png" alt="">
            </div>
            <div class="page-tag-btn-tip">创建文本</div>
          </div>
          <div class="tagPage">
            <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(2)"
              :class="{ active: panelState === 2 }">
              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-zhuangshi.png"
                alt="">
            </div>
            <div class="page-tag-btn-tip">装饰元素</div>
          </div>
          <div class="tagPage">
            <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(3)"
              :class="{ active: panelState === 3 }">
              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-lunbo.png"
                alt="">
            </div>
            <div class="page-tag-btn-tip">新建轮播</div>
          </div>

          <div class="tagPage">
            <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(4)"
              :class="{ active: panelState === 4 }">
              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
                alt="">
            </div>
            <div class="page-tag-btn-tip">交互按钮</div>
          </div>

          <el-tooltip v-show="false" effect="dark" content="保存" placement="left">
            <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="save">
              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
                alt="">
            </div>
          </el-tooltip>
        </div>
        <div class="wrapper custom-scrollbar">
          <!-- 设置背景 0 -->
          <div class="panel panel-bg">
            <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3">

              <div
                style="display: flex;flex-direction: row;justify-content: space-between; padding:23px;border-bottom: #E2E4EE solid 1px;">
                <div style="width:45%;
                    height:28px;
                    text-align: center;
                    background:rgba(78,93,255,1);
                    border-radius:14px;font-size:14px;
                    font-family:MicrosoftYaHei;
                    color:rgba(255,255,255,1);
                    line-height:28px;" @click="cleanBG">移除背景</div>

                <div style="width:45%;height:28px;text-align: center;background:rgba(78,93,255,1);border-radius:14px;font-size:14px;
                          font-family:MicrosoftYaHei;color:rgba(255,255,255,1);line-height:28px;"
                  @click="panelTabState = 1">
                  更换背景</div>
              </div>

              <div
                style="display: flex;flex-direction: row;align-items: center;padding-left: 23px;border-bottom: #E2E4EE solid 1px;padding-top: 11px;padding-bottom: 11px;">
                <label style="font-size:12px;
                font-family:MicrosoftYaHei;
                color:rgba(51,51,51,1);
                margin-right: 10px;
                ">画布背景色</label>
                <el-color-picker v-model="bodyBackgroundColor" @change="bodyBackgroundColorChange" size="mini">
                </el-color-picker>
              </div>

              <div
                style="display: flex;flex-direction: row ;padding-left: 23px;padding-top: 12px;padding-bottom: 12px;border-bottom: #E2E4EE solid 1px;">
                <div style="display: flex;flex-direction: column;">
                  <label style="font-size:12px;
                      font-family:MicrosoftYaHei;
                      color:rgba(51,51,51,1); margin-bottom: 6px;">画布宽度</label>
                  <el-input-number v-model="canvasWidth" :disabled="true" size="small" style="width:110px;">
                  </el-input-number>
                </div>
                <div style="display: flex;flex-direction: column; margin-left:45px">
                  <label style="font-size:12px;
                      font-family:MicrosoftYaHei;
                      color:rgba(51,51,51,1); margin-bottom: 6px;">画布高度</label>
                  <el-input-number v-model="canvasHeight" size="small" style="width:110px;">
                  </el-input-number>
                </div>
              </div>

              <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3" style="border-bottom: #E2E4EE solid 1px; padding-top:010px;padding-bottom:2px;
                 padding-left:23px;
              ">
                <label style="font-size:12px;
                font-family:MicrosoftYaHei; display:block;
                color:rgba(51,51,51,1);margin-bottom:10px;">屏飘动效</label>
                <div class="content" :xxx="`animatedNameGlobal`">
                  <div
                    style="display: inline-flex;overflow: hidden;text-align: center; cursor: pointer; margin-right:12px;"
                    v-for="(item,index) in animateGlobalList">
                    <div v-model="animatedNameGlobal" @click="checkGlobalAnimation(item)" :title="item.name" :style="{'background':'rgba(238,242,250,1)',
                    'border-radius':'12px', 'margin-bottom':'10px',
                    'border':'1px solid rgba(205,209,221,1)','font-size': '12px',
                    color: animatedNameGlobal==item.id? 'white':'#999999','letter-spacing': 0,
                    'word-break':'keep-all',padding: '4px 13px','background': animatedNameGlobal===item.id? '#4E5DFF':'rgba(238,242,250,1)',
                    'border': animatedNameGlobal===item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)',
               }">{{item.name}}</div>
                  </div>
                </div>
              </div>

              <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3" style="border-bottom: #E2E4EE solid 1px; padding-top:010px;padding-bottom:2px;
              padding-left:23px;">
                <label style="font-size:12px;
                font-family:MicrosoftYaHei; display:block;
                color:rgba(51,51,51,1);margin-bottom:10px;">背景动效</label>
                <div class="content" :xxx="`animatedNameBackgroundGlobal`">
                  <div style="display: inline-flex;overflow: hidden;text-align: center; cursor: pointer"
                    v-for="(item,index) in animateBackgroundGlobalList">
                    <div v-model="animatedNameBackgroundGlobal" @click="checkBackgroundGlobalAnimation(item)"
                      :title="item.name"
                      :style="{'background':'rgba(238,242,250,1)', 'margin-right':'12px',
                      'border-radius':'12px', 'margin-bottom':'10px',
                      'border':'1px solid rgba(205,209,221,1)','font-size': '12px',
                      color: animatedNameBackgroundGlobal==item.id? 'white':'#999999','letter-spacing': 0,
                    'word-break':'keep-all',padding: '4px 13px','background': animatedNameBackgroundGlobal===item.id? '#4E5DFF':'rgba(238,242,250,1)',
                    'border': animatedNameBackgroundGlobal===item.id? '1px solid #4E5DFF':'1px solid rgba(205,209,221,1)'}">{{item.name}}
                    </div>
                  </div>
                </div>
              </div>

              <div class="item" style="padding:10px 23px;">
                <label style="font-size:12px;
                font-family:MicrosoftYaHei;
                color:rgba(51,51,51,1);">背景音乐</label>
                <div class="content">
                  <AudioPanel class="ele"></AudioPanel>
                </div>
              </div>

            </div>

            <!--<div class="clearfix">
              <label>设置作品信息</label>
              <div class="content">
                <el-input
                  placeholder="请输入标题"
                  v-model="title"
                  clearable>
                </el-input>
              </div>
              <div class="content">
                <el-input
                placeholder="请输入描述"
                v-model="description"
                clearable>
              </el-input>
              </div>
            </div>-->

            <div class="clearfix" v-if="panelTabState === 1">
              <ImgPanel :selectedImg="addBG" />
            </div>

            <div class="clearfix" v-if="panelTabState === 3">
              <div style="margin-top: 5px; height:100%;vertical-align: middle;padding-right:10px">
                <div style="display: inline-flex; overflow: hidden;">
                  <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;width:100%">
                    组合对齐布局
                  </div>
                </div>
                <div style="margin-top: 10px">
                  <div style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer; text-align: center">
                    <div @click="toLeft" title="左对齐"
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}">
                      <img src="http://yun-image.elab-plus.com/images/tfb/icon_left2.png" width="20" height="20" />
                    </div>

                  </div>
                  <div title="水平居中对齐"
                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer;text-align: center"
                    @click="toCenter">
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}">
                      <img src="http://yun-image.elab-plus.com/images/tfb/horizontal_center.png" width="20"
                        height="20" />
                    </div>

                  </div>
                  <div title="右对齐" style="display: inline-flex;cursor: pointer;width: 14%; text-align: center"
                    @click="toRight">
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}">
                      <img src="http://yun-image.elab-plus.com/images/tfb/icon_right2.png" width="20" height="20" />
                    </div>
                  </div>

                  <div style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer; text-align: center">
                    <div @click="toTop" title="上对齐"
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}">
                      <img src="http://yun-image.elab-plus.com/images/tfb/icon_top.png" width="20" height="20" />
                    </div>

                  </div>
                  <div title="垂直居中对齐"
                    style="display: inline-flex; overflow: hidden;width: 14%; cursor: pointer;text-align: center"
                    @click="toVertialCenter">
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}">
                      <img src="http://yun-image.elab-plus.com/images/tfb/vertical_center.png" width="20" height="20" />
                    </div>

                  </div>
                  <div title="下对齐" style="display: inline-flex;cursor: pointer;width: 14%; text-align: center"
                    @click="toBottom">
                    <div
                      :style="{'font-size': '12px','letter-spacing': 0, 'word-break':'keep-all','text-align':'center','width':'100%'}">
                      <img src="http://yun-image.elab-plus.com/images/tfb/icon_down.png" width="20" height="20" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <!-- 添加文字 1 -->
          <div class="panel panel-text" v-show="panelState === 1">
            <div class="btn" @click="addTextElement('title')" style="font-size: 32px; font-weight: bold;">插入标题</div>
            <div class="btn" @click="addTextElement('plain')">插入文本</div>
            <div class="btn" @click="addTextElement('frame')">插入方框</div>
          </div>
          <!-- 添加元素 2 -->
          <div class="panel panel-element clearfix" v-show="panelState === 2">
            <ImgPanel :selectedImg="addPicElement" :themeId="itemId" :isButton="false" />
          </div>
          <!-- 添加多图上元素 3 -->
          <div class="panel panel-element clearfix" v-if="panelState === 3">
            <ImgPanel :selectedImg="addMorePicElement" :ismultiple="true" />
          </div>
          <!-- 添加按钮 4 -->
          <div class="panel panel-element clearfix" v-if="panelState === 4">
            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true" />
          </div>
          <!-- 图层编辑面板 -->
          <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10" />
        </div>
      </div>
    </section>
    <PreView :itemId="itemId" @hideView="showPreView=false" v-if="showPreView" />
  </div>
</template>

<script>
import tools from "../../util/tools";
import Overview from "./overview";
import Page from "../../components/Page";
import PicPicker from "../../components/PicturePicker";
import PreView from "../../components/PreView";
import HeaderEdit from "../../components/HeaderEdit";
import EditPanel from "../../components/EditPanel";
import SvgPanel from "../../components/SvgPanel";
import ImgPanel from "../../components/ImgPanel";
import appConst from "../../util/appConst";
import html2canvas from "html2canvas";
import { uploadBase64 } from "../../util/http";
import elabCanvas from "../../util/canvas/elabCanvas.vue";
import elabBackgroundCanvas from "../../util/canvas/elabBackgroundCanvas";
import AudioPanel from "../../components/AudioPanel";
import HeaderMain from "../../components/HeaderMain";
const $ = require("jquery");

export default {
  data() {
    return {
      itemId: null,
      testcaseId: null,
      panelState: 0,
      canvasWidth: 750,
      canvasHeight: 504,
      bodyBackgroundColor: "rgba(255,255,255,0)",
      bgc: "#B1C096",
      btnColor: "#5f8a61",
      title: "标题",
      description: "描述",
      dialogSaveBeforeBack: false,
      picBase64: "",
      http: appConst.BACKEND_DOMAIN,
      releaseUrl: "",
      showPreView: false,
      isLoadingPreview: false,
      panelTabState: 0,
      animatedNameGlobal: "",
      animateGlobalList: [
        { id: "Snow", name: "下雪", type: 0 },
        { id: "Bubble", name: "冒泡", type: 0 },
        { id: "Flower", name: "樱花", type: 0 },
        { id: "Rain", name: "下雨", type: 0 },
        { id: "Bubble2", name: "飞沙", type: 0 },
        { id: "Particles", name: "粒子", type: "0" },
        { id: "Circle", name: "圆圈", type: "0" },
        { id: "FlowField", name: "流场", type: "0" },
        { id: "cloud", name: "云飘", type: "0" },
        { id: "nephelo", name: "雾霾", type: "0" }
      ],
      animateBackgroundGlobalList: [
        { id: "Smoke", name: "烟雾", type: 1 },
        { id: "Wave", name: "波浪", type: 2 },
        // {id: 'WaterRipple', name: '水波', type: 3},
        { id: "Bubble2", name: "飞沙", type: 0 },
        { id: "Particles", name: "粒子", type: "0" },
        { id: "Circle", name: "圆圈", type: "0" },
        { id: "FlowField", name: "流场", type: "0" },
        { id: "ColorRandom", name: "渐变色", type: "0" }
      ],
      animatedNameBackgroundGlobal: "",
      animatedBackgroundCustom: false,
      globalAnimatedBackgroundTag: false
    };
  },
  watch: {
    element() {
      let ele = this.$store.state.editor.editorElement;
      let type = ele ? ele.type : "null";
      this.panelTabState = 0;

      var length = this.$store.state.editor.complexEditorElement.length;
      if (length > 1) {
        type = "group";
        this.panelTabState = 3;
      }

      switch (type) {
        case "text":
          this.panelState = 11;
          break;
        case "icon":
        case "pic":
          this.panelState = 12;
          break;
        case "audio":
          this.panelState = 12;
          break;
        case "morePic":
          this.panelState = 13;
          break;
        case "frame":
          this.panelState = 14;
          break;
        case "button":
          this.panelState = 15;
          break;
        case "group":
          this.panelState = 0;
        default:
          this.panelState = 0;
      }
    },
    "$store.state.editor.complexEditorElement": function() {
      var complexEditorElement = this.$store.state.editor.complexEditorElement;
      if (complexEditorElement.length == 0 && this.panelTabState == 3) {
        this.panelTabState = 0;
      }
    }
  },
  computed: {
    themeId() {
      return this.$store.state.editor.editorTheme._id;
    },
    editorPage() {
      this.bgc = this.$store.state.editor.editorTheme.bgc || "#B1C096";
      this.btnColor =
        this.$store.state.editor.editorTheme.btnColor || "#5f8a61";
      this.bodyBackgroundColor =
        this.$store.state.editor.editorTheme.bodyBackgroundColor ||
        "rgba(255,255,255,0)";
      this.canvasWidth =
        this.$store.state.editor.editorTheme.canvasWidth || 750;
      this.canvasHeight = this.$store.state.editor.editorTheme.canvasHeight;
      this.description = this.$store.state.editor.editorTheme.description;
      this.animatedNameGlobal =
        this.$store.state.editor.editorTheme.animatedNameGlobal || "";
      this.animatedNameBackgroundGlobal =
        this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal || "";
      this.title = this.$store.state.editor.editorTheme.title;
      this.gridTempField = this.$store.state.editor.gridTempField;
      return this.$store.state.editor.editorPage;
    },
    element() {
      let ele = this.$store.state.editor.editorElement;
      return ele || {};
    },
    hideFoot() {
      let pages = this.$store.state.editor.editorTheme.pages || [];
      let index = pages.indexOf(this.editorPage);
      return index == pages.length - 1 ? false : true;
    },
    complexEditorElement() {
      return this.$store.state.editor.complexEditorElement;
    }
  },
  methods: {
    dialogSave() {
      // return Promise.resolve().then(() => this.save()).then(() => this.$router.replace('themeList'))

      if (!window.hasSaveFlag) {
        this.$confirm(
          "请确保已经将修改的内容保存，否则页面将丢失。是否确认退出编辑？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            window.hasSaveFlag = true;
            return Promise.resolve().then(() =>
              this.$router.replace("myHistoryTest")
            );
          })
          .catch(() => {});
      } else {
        return Promise.resolve().then(() =>
          this.$router.replace("myHistoryTest")
        );
      }
    },
    getPicList(_id) {
      this.$store.dispatch("getPicListByThemeId", _id);
    },
    addPicElement(ele) {
      // if (ele) {
      let obj = {};
      obj.type = "pic";
      obj.top = document.getElementById("h5editor").scrollTop;
      obj.left = 0;
      obj.width = ele.width;
      obj.height = ele.height;
      obj.imgSrc = ele.filePath;
      obj.loop = ele.loop;
      this.$store.dispatch("addElement", obj);
      // } else {
      //   this.$store.dispatch('addElement', this.element)
      // }
      this.element.type = "pic";
    },
    addMorePicElement(ele) {
      // if (ele) {
      let obj = {};
      obj.type = "morePic";
      obj.top = document.getElementById("h5editor").scrollTop;
      obj.left = 0;
      obj.width = ele.morePic[0].width;
      obj.height = ele.morePic[0].height;
      obj.imgSrc = ele.filePath;
      obj.morePic = ele.morePic;
      obj.loop = ele.loop;
      this.$store.dispatch("addElement", obj);
      this.element.type = "morePic";
    },
    //添加按钮
    addButtonElement(ele) {
      // if (ele) {
      let obj = {};
      obj.type = "button";
      obj.top = document.getElementById("h5editor").scrollTop;
      obj["text"] = "请输入文本";
      obj["lineHeight"] = 1.5;

      obj.left = 0;
      obj.width = ele.width;
      obj.height = ele.height;
      obj.imgSrc = ele.filePath;
      obj.loop = ele.loop;
      this.$store.dispatch("addElement", obj);
      // } else {
      //   this.$store.dispatch('addElement', this.element)
      // }
      this.element.type = "button";
    },

    addBG(file) {
      this.$store.dispatch("addBGElement", {
        type: "bg",
        imgSrc: file.filePath
      });
    },
    cleanBG() {
      this.$store.dispatch("cleanBG");
    },
    cleanEle() {
      this.$store.dispatch("cleanEle", this.element);
    },
    addTextElement(type) {
      let param = {};
      param.top = document.getElementById("h5editor").scrollTop;
      param["type"] = "text";
      param["text"] = "请输入文本";
      param["width"] = 300;
      param["lineHeight"] = 1.5;
      param["backgroundColor"] = "";
      param["verticalAlign"] = "top";
      param["display"] = "block";
      param["textIndent"] = "0.0";
      param["letterSpacing"] = "0.0";
      param["allTransparent"] = "";
      param["nodeId"] = "Id" + Math.random();
      switch (type) {
        case "plain":
          break;
        case "title":
          param["fontSize"] = 32;
          param["fontWeight"] = "bold";
          param["textAlign"] = "center";
          break;
        case "frame":
          param["type"] = "frame";
          param["text"] = "";
          param["width"] = this.canvasWidth;
          param["border"] = "1px solid #000";
          param["height"] = 500;
          break;
        default:
      }
      this.$store.dispatch("addElement", param);
    },
    playAnimate() {
      this.$store.dispatch("playAnimate");
    },
    async save() {
      var loading = this.$loading({
        lock: true,
        text: "模板保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      if (!hasSaveFlag) {
        $(".animated").css("animation-name", "null");
        $(".animated>div").css("animation-name", "null");
        $(".animated span").css({
          animationDelay: "0s",
          animationDuration: "0s"
        });
        await html2canvas(document.querySelector("#canvasPage"), {
          useCORS: true,
          scale: 0.5,
          height: 1334,
          logging: false //日志开关，便于查看html2canvas的内部执行流程
        }).then(async canvas => {
          var result = await uploadBase64({ base64Str: canvas.toDataURL() });
          if (result.data.success) {
            this.$store.state.editor.editorTheme.cover =
              result.data.single.filePath;
          } else {
            this.$message.error("封面图片上传失败！");
          }
        });
      }
      this.$store.state.editor.editorTheme.bgc = this.bgc;
      this.$store.state.editor.editorTheme.btnColor = this.btnColor;
      this.$store.state.editor.editorTheme.bodyBackgroundColor =
        this.bodyBackgroundColor || "rgba(255,255,255,0)";
      this.$store.state.editor.editorTheme.canvasWidth =
        this.canvasWidth || 750;
      this.$store.state.editor.editorTheme.canvasHeight = this.canvasHeight;
      this.$store.state.editor.editorTheme.title = this.title;
      this.$store.state.editor.editorTheme.description = this.description;
      this.$store.state.editor.editorTheme.animatedNameGlobal =
        this.animatedNameGlobal || "";
      this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal =
        this.animatedNameBackgroundGlobal || "";
      this.editorPage.elements.forEach(function(element) {
        if (element.type == "text") {
          var height = window
            .getComputedStyle(document.getElementById(element.nodeId))
            .height.replace("px", "");
          element.height = height;
        } else if (element.type == "frame") {
          element.children.forEach(function(_element) {
            if (_element.type == "text") {
              var height = window
                .getComputedStyle(document.getElementById(_element.nodeId))
                .height.replace("px", "");
              _element.height = height;
            }
          });
        }
      });
      let param = {
        id: this.itemId,
        jsonString: JSON.stringify(this.$store.state.editor.editorTheme),
        updator: "admin"
      };
      console.log("参数", param);
      return this.$store
        .dispatch("saveTheme", param)
        .then(() => {
          loading.close();
          å;
          this.$message({
            message: "保存成功",
            type: "success"
          });
        })
        .catch(() => {
          loading.close();
        });
    },
    deploy() {
      this.isLoadingPreview = true;
      this.$store
        .dispatch(
          "saveTheme",
          tools.vue2json(this.$store.state.editor.editorTheme)
        )
        .then(() => {
          setTimeout(() => {
            this.showPreView = true;
            this.isLoadingPreview = false;
          }, 1000);
        });
    },
    selectedElement(element) {
      this.$store.dispatch("setEditorElement", element);
    },
    deleteListener(event) {
      if (
        event.keyCode === 8 &&
        event.target.nodeName !== "INPUT" &&
        event.target.nodeName !== "TEXTAREA"
      ) {
        this.deleteElement();
      }
    },
    deleteElement() {
      this.$store.dispatch("deleteSelectedElement");
    },
    togglePanel(code) {
      this.panelState = code;
      if (code === 0) {
        this.panelTabState = 0;
        this.$store.dispatch("setEditorElement", null);
      }
    },
    checkGlobalAnimation(item) {
      if (this.animatedNameGlobal != item.id) {
        this.animatedNameGlobal = item.id;
        this.$store.state.editor.editorTheme.animatedNameGlobal = this.animatedNameGlobal;
      } else {
        this.animatedNameGlobal = "";
        this.$store.state.editor.editorTheme.animatedNameGlobal = "";
      }
    },
    checkBackgroundGlobalAnimation(item) {
      if (this.animatedNameBackgroundGlobal != item.id) {
        this.animatedNameBackgroundGlobal = item.id;
        this.animatedBackgroundCustom = item.type == 0 ? false : true;
        this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal = this.animatedNameBackgroundGlobal;
      } else {
        this.animatedNameBackgroundGlobal = "";
        this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal = "";
      }
    },
    bodyBackgroundColorChange() {
      this.$store.state.editor.editorTheme.bodyBackgroundColor =
        this.bodyBackgroundColor || "rgba(255,255,255,0)";
    },
    IMChange() {
      this.$store.state.editor.editorTheme.bgc = this.bgc;
      this.$store.state.editor.editorTheme.btnColor = this.btnColor;
    },
    toLeft() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.left;
      });
      let min = Math.min.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.left = min;
      });
    },
    toCenter() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.left;
      });
      let total = 0;
      for (let i = 0; i < arr.length; i++) {
        total += arr[i];
      }
      let p = total / arr.length;
      complexEditorElement.forEach(ele => {
        ele.left = p;
      });
    },
    toRight() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.width + item.left;
      });
      let max = Math.max.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.left = max - ele.width;
      });
    },
    toTop() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.top;
      });
      let min = Math.min.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.top = min;
      });
    },
    toVertialCenter() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.top;
      });
      let total = 0;
      for (let i = 0; i < arr.length; i++) {
        total += arr[i];
      }
      let p = total / arr.length;
      complexEditorElement.forEach(ele => {
        ele.top = p;
      });
    },
    toBottom() {
      let complexEditorElement = this.complexEditorElement;
      let arr = complexEditorElement.map(item => {
        return item.height + item.top;
      });
      let max = Math.max.apply(null, arr);
      complexEditorElement.forEach(ele => {
        ele.top = max - ele.height;
      });
    }
  },
  components: {
    Overview,
    Page,
    PicPicker,
    appConst,
    PreView,
    HeaderEdit,
    EditPanel,
    SvgPanel,
    ImgPanel,
    AudioPanel,
    elabCanvas,
    elabBackgroundCanvas,
    HeaderMain
  },
  created() {
    // new SnowCanvas(curWinWidth, curWinHeight);
    // new Snow().process()
    this.testcaseId = this.$route.query.testcaseId;
    this.itemId = this.$route.query.itemId;
    if (this.itemId) {
      if (!this.pages) {
        this.$store.dispatch("getPageByThemeId", this.itemId);
      }

      // this.getPicList(this.itemId);
    } else {
      this.$store.dispatch("createTheme");
      this.$store.dispatch("addPage");
      this.$store.dispatch("cleanPicList");
    }
    document.addEventListener("keyup", this.deleteListener);
    window.onbeforeunload = () => false;
  },
  destroyed() {
    document.removeEventListener("keyup", this.deleteListener);
    window.onbeforeunload = null;
  }
};
</script>

<style lang="less" scoped>
.tagPage {
  position: relative;
}

.tagPage:hover div {
  display: block;
}

.page-tag-btn-tip {
  width: 80px;
  height: 26px;
  position: absolute;
  left: -85px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  color: #fff;
  background: url(../../assets/images/page_tag_btn_tip.png) center no-repeat;
  background-size: cover;
}

.editor {
  background-color: rgb(237, 239, 247);
  position: relative;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

.section {
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  bottom: 0;
  overflow: hidden;
}

.overview {
  position: absolute;
  left: 0;
  width: 225px;
  height: 100%;
  z-index: 10;
}

.canvas {
  /*position: absolute !important;*/
  /*top: 50%;*/
  /*left: 50%;*/
  /*transform: translate(-75%, -50%);*/
  border: 2px solid #373f42;
  box-shadow: 0px 2px 30px 5px rgba(0, 0, 0, 0.2);
  box-sizing: content-box;
  margin-bottom: 200px;
}

.container {
  /*width: 800px;
    height: 860px;
    padding: 20px;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-75%, -50%);
    overflow-y: scroll;
    overflow-x: hidden;*/

  position: absolute !important;
  height: 100%;
  width: 770px;

  left: 56%;
  transform: translate(-55%, -94%);
  overflow: scroll;
  overflow-x: hidden;
}

.control-panel {
  position: absolute;
  width: 324px;
  height: 100%;
  right: 0;
  top: 0;
  border-left: 1px solid #d6d6d6;
  background-color: white;

  z-index: 10;

  .funcs {
    position: absolute;
    left: -44px;
    top: 0;
    height: 100%;
    width: 44px;
    background-color: white;
    border-right: 2px solid #e2e4ee;
    box-shadow: 0px 1px 15px 1px rgba(0, 0, 0, 0.2);

    .func {
      color: white;
      background: transparent;
      cursor: pointer;
      margin-top: 20px;
      display: block;
      width: 50px;
      height: 50px;

      &:hover {
        color: #000;
      }

      &.active {
        border-right: 1px solid #ececec;
        background-color: #ececec;
        color: #000;
      }
    }
  }

  .wrapper {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .panel {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: white;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .panel-bg {
    .btn {
      float: left;
      width: 48%;
      margin-left: 1%;
      margin-right: 1%;
    }

    .bgs {
      float: left;
      width: 80px;
      height: 80px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      margin: 5px 5px;

      &:hover {
        border: 2px solid #18ccc0;
        cursor: pointer;
      }
    }
  }

  .panel-text {
    .btn {
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 2px solid transparent;

      &:hover {
        cursor: pointer;
        border-color: #4e5dff;
      }
    }
  }
}

/* 2018/07/23 所有前台自定义字体，需要放七牛云服务器上，暂时放这个样式文件里面 */
@font-face {
  font-family: "PenCrane";
  src: url("http://yun-image.elab-plus.com/PenCrane.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 手书体;
  src: url("http://yun-image.elab-plus.com/new/手书体.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 汉仪粗仿宋简;
  src: url("http://yun-image.elab-plus.com/汉仪粗仿宋简.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W3;
  src: url("http://yun-image.elab-plus.com/华康黑体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W7;
  src: url("http://yun-image.elab-plus.com/华康黑体W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W9;
  src: url("http://yun-image.elab-plus.com/华康黑体W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康黑体W12;
  src: url("http://yun-image.elab-plus.com/华康黑体W12.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康楷体W5;
  src: url("http://yun-image.elab-plus.com/华康楷体W5.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康勘亭流W9;
  src: url("http://yun-image.elab-plus.com/华康勘亭流W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康瘦金体W3;
  src: url("http://yun-image.elab-plus.com/华康瘦金体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康宋体W3;
  src: url("http://yun-image.elab-plus.com/华康宋体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康宋体W7;
  src: url("http://yun-image.elab-plus.com/华康宋体W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康宋体W12;
  src: url("http://yun-image.elab-plus.com/华康宋体W12.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康魏碑W7;
  src: url("http://yun-image.elab-plus.com/华康魏碑W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康新综艺W7;
  src: url("http://yun-image.elab-plus.com/华康新综艺W7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康雅宋体W9;
  src: url("http://yun-image.elab-plus.com/华康雅宋体W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康圆体W3;
  src: url("http://yun-image.elab-plus.com/华康圆体W3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康圆体W5;
  src: url("http://yun-image.elab-plus.com/华康圆体W5.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 华康圆体W9;
  src: url("http://yun-image.elab-plus.com/华康圆体W9.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 庞门正道标题体增强版;
  src: url("http://yun-image.elab-plus.com/庞门正道标题体增强版.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 站酷高端黑修订版;
  src: url("http://yun-image.elab-plus.com/站酷高端黑修订版.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 站酷酷黑;
  src: url("http://yun-image.elab-plus.com/站酷酷黑.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
</style>