<template>
  <div :class="[type!=='see'?'canvas':'']" @click="cleanSelected" style="position: relative">
    <audioElement :isOverView="isOverView" :type="type" v-if="$store.state.editor.editorTheme.backgroundAudio"
      :src="$store.state.editor.editorTheme.backgroundAudio"
      :style="{'z-index':9999,width:50+'px',height:50+'px',top:0+'px',left:700 + 'px'}"></audioElement>
    <!-- 内容区域 -->
    <template v-for="element in elements">

      <div @click.stop="selectedElement(element)" v-if="element.type==='bg'" class="bg-layer">
        <div :style="`left: -499px; top: 0px; width: 100%;height:${$parent.canvasHeight}px; opacity: 1; `">
          <img :src="element.imgSrc" alt="" style="width: 100%;height: 100%;object-fit: cover" ref="backgroundImage">
        </div>
      </div>
      <!--<div @click.stop="selectedElement(element)" @dblclick.stop="setGroup(element)">-->
      <div @click.stop="selectedElement(element)">
        <!-- 单图元素 -->
        <PicElement :type="type" v-if="element.type==='pic'"
          :class="['animated ' + element.animatedName,element.loop?'infinite':'']" :element="element"
          :style="{transform:'rotate('+element.transform+'deg)',
                    'z-index':element.zindex,opacity:element.opacity/100,
                    width:element.width+'px',height:element.height+'px',
                    top:element.top+'px',left:element.left + 'px',
                    'animation-duration':element.duration + 's',
                    '-webkit-animation-duration':element.duration + 's',
                    'animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's',
                    'box-shadow':element.shadowColor +' ' + (element.shadowX==null?0:element.shadowX)+'px ' + (element.shadowY==null?0:element.shadowY)+'px ' + (element.shadowVague==null?0:element.shadowVague)+'px '}"
          :showOperate="editorElement == element">
          <img style="width:100%;height:100%;" :src="element.imgSrc">
        </PicElement>
        <!-- 按钮 -->
        <ButtonElement :type="type" v-if="element.type==='button'"
          :class="['animated ' + element.animatedName,element.loop?'infinite':'']" :element="element"
          :style="{transform:'rotate('+element.transform+'deg)',
                    'z-index':element.zindex,opacity:element.opacity/100,
                    width:element.width+'px',height:element.height+'px',
                    top:element.top+'px',left:element.left + 'px',
                    'animation-duration':element.duration + 's',
                    '-webkit-animation-duration':element.duration + 's',
                    'animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's',
                    'box-shadow':element.shadowColor +' ' + (element.shadowX==null?0:element.shadowX)+'px ' + (element.shadowY==null?0:element.shadowY)+'px ' + (element.shadowVague==null?0:element.shadowVague)+'px '}"
          :showOperate="editorElement == element">
          <img style="width:100%;height:100%;" :src="element.imgSrc">
        </ButtonElement>
        <!-- 字体元素 -->
        <FontElement :isOverView="isOverView" class="element" v-if="element.type === 'text'" :element="element"
          :style="elementPosition(element)"></FontElement>
        <!-- 形状元素 -->
        <ShapesElement v-if="element.type==='icon'" :iconKey="element.iconKey" :element="element"
          :style="{fill:'#fff',transform:'rotate('+element.transform+'deg)','z-index':element.zindex,opacity:element.opacity/100,width:element.width+'px',height:element.height+'px',top:element.top+'px',left:element.left + 'px','animation-duration':element.duration + 's','-webkit-animation-duration':element.duration + 's','animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's'}"
          :class="['animated ' + element.animatedName]" :showOperate="editorElement == element"></ShapesElement>

        <!-- 多图左右滑动元素 -->
        <MorePicElement :type="type" v-if="element.type==='morePic'"
          :class="['animated ' + element.animatedName,element.loop?'infinite':'']" :element="element"
          :style="{transform:'rotate('+element.transform+'deg)','z-index':element.zindex,opacity:element.opacity/100,width:element.width+'px',height:element.height+'px',top:element.top+'px',left:element.left + 'px','animation-duration':element.duration + 's','-webkit-animation-duration':element.duration + 's','animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's',
                        'box-shadow':element.shadowColor +' ' + (element.shadowX==null?0:element.shadowX)+'px ' + (element.shadowY==null?0:element.shadowY)+'px ' + (element.shadowVague==null?0:element.shadowVague)+'px'}"
          :showOperate="editorElement == element">

          <mt-swipe :auto="4000" class="swiper-img data-img3 data-img" style="height: 100%;width: 100%">
            <mt-swipe-item v-for="pic in element.morePic">
              <img :src="pic.filePath" style='height: 100%;width: 100%' />
            </mt-swipe-item>
          </mt-swipe>
          <!--<img style="width:100%;height:100%;" :src="element.imgSrc">-->
        </MorePicElement>

        <FrameElement class="element" v-if="element.type === 'frame'" :element="element" :children="element.children"
          :style="elementPosition(element)">
          <div style="width:394px;height:394px;"></div>
        </FrameElement>

      </div>
    </template>
    <!-- 底部按钮 -->
    <footer-tem v-if="!hideFoot" :btnColor="btnColor" :bgc="bgc"></footer-tem>
    <div class="editPanel" @mousedown="changeHeight"
      style="cursor: s-resize;width: 100%;border: 1px solid #ccc;position: absolute;bottom: 0;left: 0;"></div>
  </div>
</template>

<script>
import PicElement from "./Element/PicElement";
import ButtonElement from "./Element/ButtonElement";
import FontElement from "./Element/FontElement";
import ShapesElement from "./Element/ShapesElement";
import MorePicElement from "./Element/morePicElement";
import FrameElement from "./Element/FrameElement";
import audioElement from "./Element/audio";
import "animate.css";
import appConst from "../util/appConst";
import footerTem from "../components/footTemplate";

// import SnowCanvas from '../util/canvas/SnowCanvas'
export default {
  data() {
    return {
      http: appConst.BACKEND_DOMAIN
    };
  },
  computed: {
    elementPosition() {
      return ele => {
        return {
          zIndex: ele.type == "frame" ? 1 : ele["zindex"],
          top: ele["top"] + "px",
          left: ele["left"] + "px"
        };
      };
    },
    btnColor() {
      return this.$store.state.editor.editorTheme.btnColor || "#5f8a61";
    },
    bgc() {
      return this.$store.state.editor.editorTheme.bgc || "#B1C096";
    }
  },
  watch: {},
  props: {
    elements: {
      type: Array
    },
    editorElement: {
      type: Object
    },
    type: "",
    isOverView: {
      default: false,
      type: Boolean
    },
    hideFoot: ""
  },
  methods: {
    changeHeight(e) {
      var self = this;
      var clientY_start = e.clientY;
      var flag = null;
      document.onmousemove = function(e) {
        if (e.clientY != flag) {
          var clientY_end = (flag = e.clientY);
          self.$parent.canvasHeight =
            self.$parent.canvasHeight + (clientY_end - clientY_start);
          clientY_start = e.clientY;
        }
      };
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    selectedElement(element) {
      if (window.fontFlag) {
        window.fontFlag = false;
        return;
      }
      if (!this.$store.state.editor.ctrlKeyDownFlag) {
        this.$store.state.editor.complexEditorElement = [];
        this.$store.dispatch("setEditorElement", null);
        this.$store.dispatch("setEditorElement", element);
      } else {
        this.$store.dispatch("setEditorElement", null);
      }
      let i = this.$store.state.editor.complexEditorElement.indexOf(element);
      if (i > -1 && this.$store.state.editor.complexEditorElement.length > 1) {
        this.$store.state.editor.complexEditorElement.splice(i, 1);
        return;
      } else if (
        this.$store.state.editor.complexEditorElement.length == 1 &&
        i > -1
      ) {
        return false;
      }
      this.$store.state.editor.complexEditorElement.push(element);
    },
    setGroup(element) {
      var that = this;
      if (element.type == "frame" && element.children.length > 0) {
        element.children.forEach(function(item) {
          item.left = item.left + element.left;
          item.top = item.top + element.top;
          that.$store.dispatch("addElement", item);
        });
        element.children.splice(0, element.children.length);
        return;
      } else if (element.type == "frame") {
        let item_ = element;
        for (var k = 0; k < that.elements.length; k++) {
          var item = that.elements[k],
            index = k;
          let left = item.left;
          let top = item.top;
          let width = item.width;
          let height =
            item.type == "text"
              ? window
                  .getComputedStyle(document.getElementById(item.nodeId))
                  .height.replace("px", "") / 1
              : item.height;
          console.log(height);
          let zindex = item.zindex;
          if (
            left + width > item_.left &&
            left < item_.left + item_.width &&
            top + height - 2 > item_.top &&
            top < item_.top + item_.height - 2 &&
            item.type != "frame"
          ) {
            // if (zindex >= item_.zindex && (left + width) > item_.left && left < (item_.left + item_.width) && (top + height) > item_.top && top < (item_.top + item_.height) && item.type != 'frame') {
            that.elements.splice(index, 1);
            k--;
            item.left = item.left - item_.left;
            item.top = item.top - item_.top;
            item_.children.push(item);
          }
        }
      } else {
        let left = element.left;
        let top = element.top;
        let width = element.width;
        let height =
          element.type == "text"
            ? window
                .getComputedStyle(document.getElementById(element.nodeId))
                .height.replace("px", "") / 1
            : element.height;
        let zindex = element.zindex;
        that.elements.forEach(item => {
          // if(item.type=='frame'&&item.zindex<zindex){
          if (item.type == "frame") {
            let groupL = item.left + item.width;
            let groupT = item.top + item.height;
            let item_ = item;
            // if(left>item.left&&left<groupL&&top>item.top&&top<groupT){
            if (
              left + width > item.left &&
              left < item.left + item.width &&
              top + height - 2 > item.top &&
              top < item.top + item.height + 2
            ) {
              for (var i = 0; i < that.elements.length; i++) {
                var item = that.elements[i];
                var index = i;
                let left = item.left;
                let top = item.top;
                let width = item.width;
                let height =
                  item.type == "text"
                    ? window
                        .getComputedStyle(document.getElementById(item.nodeId))
                        .height.replace("px", "") / 1
                    : item.height;
                let zindex = item.zindex;
                if (
                  left + width > item_.left &&
                  left < item_.left + item_.width &&
                  top + height - 2 > item_.top &&
                  top < item_.top + item_.height - 2 &&
                  item.type != "frame"
                ) {
                  // if(zindex>=item_.zindex&&(left+width)>item_.left&&left<(item_.left+item_.width)&&(top+height)>item_.top&&top<(item_.top+item_.height)&&item.type!='frame'){
                  that.elements.splice(index, 1);
                  i--;
                  item.left = item.left - item_.left;
                  item.top = item.top - item_.top;
                  item_.children.push(item);
                }
              }
              return;
            }
          }
        });
      }
    },
    cleanSelected() {
      this.$store.state.editor.complexEditorElement = [];
      this.$store.dispatch("setEditorElement", null);
    }
  },
  created() {
    this.$store.state.editor.complexEditorElement = [];
    (document.onkeydown = e => {
      if (e.keyCode == 16) {
        this.$store.state.editor.ctrlKeyDownFlag = true;
      }
    }),
      (document.onkeyup = e => {
        if (e.keyCode == 16) {
          this.$store.state.editor.ctrlKeyDownFlag = false;
        }
      });
  },
  components: {
    PicElement,
    ButtonElement,
    FontElement,
    ShapesElement,
    MorePicElement,
    FrameElement,
    audioElement,
    footerTem
  }
};
</script>

<style lang="less" scoped>
div {
  -webkit-animation-fill-mode: none;
}
.canvas {
  background-color: #fff;
  /*margin: 0 auto;*/
  position: relative;
}
.bg-layer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.element {
  position: absolute;
}
</style>
