<template>
  <div class="editor">
    <!-- 头部 -->
    <HeaderEdit :goback="dialogSave" @saveThemeSuccess="showPreView=true" />
    <!-- 内容区域 -->
    <section class="section">
      <!-- 左侧图层 -->
      <Overview class="overview" />
      <!-- 编辑区域 -->
      <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">
          <el-tooltip effect="dark" content="创建文本" placement="left">
            <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>
          </el-tooltip>
          <el-tooltip effect="dark" content="装饰元素" placement="left">
            <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>
          </el-tooltip>
          <el-tooltip effect="dark" content="新建轮播" placement="left">
            <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>
          </el-tooltip>
          <!--<el-tooltip  effect="dark" content="播放动画" placement="left">-->
          <!--<button class="func el-icon-caret-right" @click="playAnimate"></button>-->
          <!--</el-tooltip>-->
          <!-- 默认画板页面编辑 -->
          <!-- <el-tooltip effect="dark" content="交互按钮" placement="left">
            <div style="width:44px;height: 44px;display: flex;justify-content: center" @click="togglePanel(0)"
              :class="{ active: panelState === 0 }">
              <img style="width:34px;height: 34px;" src="http://yun-image.elab-plus.com/images/dyb/new-jiaohuanniu.png"
                alt="">
            </div>
          </el-tooltip> -->

          <el-tooltip effect="dark" content="交互按钮" placement="left">
            <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>
          </el-tooltip>
          <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">
              <el-button class="btn" type="success" @click="panelTabState = 1">更换背景</el-button>
              <el-button class="btn" type="danger" @click="cleanBG">移除背景</el-button>

              <div class="item">
                <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="item">
                <label>画布背景色</label>
                <div class="content">
                  <!--<el-input class="input"-->
                  <!--type="color"-->
                  <!--v-model="bodyBackgroundColor"></el-input>-->
                  <el-color-picker v-model="bodyBackgroundColor" @change="bodyBackgroundColorChange"></el-color-picker>
                </div>
              </div>
              <div class="item">
                <label>IM背景色</label>
                <div class="content">
                  <!--<el-input class="input"-->
                  <!--type="color"-->
                  <!--v-model="bodyBackgroundColor"></el-input>-->
                  <el-color-picker @change="IMChange" v-model="bgc" show-alpha></el-color-picker>
                </div>
              </div>
              <div class="item">
                <label>IM按钮颜色</label>
                <div class="content">
                  <!--<el-input class="input"-->
                  <!--type="color"-->
                  <!--v-model="bodyBackgroundColor"></el-input>-->
                  <el-color-picker @change="IMChange" v-model="btnColor" show-alpha></el-color-picker>
                </div>
              </div>
              <div class="clearfix">
                <label>画布宽度</label>
                <div class="content">
                  <el-input-number v-model="canvasWidth" :disabled="true">
                  </el-input-number>
                </div>
              </div>
              <div class="clearfix">
                <label>画布高度</label>
                <div class="content">
                  <el-input-number v-model="canvasHeight">
                  </el-input-number>
                </div>
              </div>

              <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3">
                <label>屏飘动效</label>
                <div class="content" :xxx="`animatedNameGlobal`">
                  <div
                    style="background: #EBEDEF;display: inline-flex; width:33.3%;overflow: hidden;text-align: center; cursor: pointer"
                    v-for="(item,index) in animateGlobalList">
                    <div v-model="animatedNameGlobal" @click="checkGlobalAnimation(item)" :title="item.name" :style="{'font-size': '12px',color: animatedNameGlobal==item.id? 'white':'#999999','letter-spacing': 0, width:'100%',
                    'word-break':'keep-all',padding: '20px','background': animatedNameGlobal===item.id? 'green':'',
               'font-weight': animatedNameGlobal===item.id? 'bold':'norm'
               }">{{item.name}}</div>
                  </div>
                </div>
              </div>

              <div class="clearfix" v-if="panelTabState !== 1 && panelTabState !== 3">
                <label>背景动效</label>
                <div class="content" :xxx="`animatedNameBackgroundGlobal`">
                  <div
                    style="background: #EBEDEF;display: inline-flex; width:33.3%;overflow: hidden;text-align: center; cursor: pointer"
                    v-for="(item,index) in animateBackgroundGlobalList">
                    <div v-model="animatedNameBackgroundGlobal" @click="checkBackgroundGlobalAnimation(item)"
                      :title="item.name" :style="{'font-size': '12px',color: animatedNameBackgroundGlobal==item.id? 'white':'#999999','letter-spacing': 0, width:'100%',
                    'word-break':'keep-all',padding: '20px','background': animatedNameBackgroundGlobal===item.id? 'green':'',
               'font-weight': animatedNameBackgroundGlobal===item.id? 'bold':'norm'
               }">{{item.name}}</div>
                  </div>
                </div>
              </div>

              <div class="item">
                <label>背景音乐</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";
  const $ = require("jquery");

  export default {
    data() {
      return {
        itemId: 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.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;
              }
            });
          }
        });
        return this.$store
          .dispatch(
            "saveTheme",
            tools.vue2json(this.$store.state.editor.editorTheme)
          )
          .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
    },
    mounted() {
      // new SnowCanvas(curWinWidth, curWinHeight);
      // new Snow().process()
      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>
  .editor {
    background-color: rgb(237, 239, 247);
    position: relative;
    height: 100%;
    overflow: hidden;
    user-select: none;
  }

  .section {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    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: 45%;
    transform: translate(-55%, -95%);
    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 2px 30px 5px 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>