<template>
  <aside class='element' @dragstart="dragstart" @mousedown="mousedown" :id="isOverView?'':element.nodeId"  @mouseover="mouseover" @mouseleave="mouseleave">
    <Operate class="operate" v-show="(element === editingElement) || show
    || $store.state.editor.complexEditorElement.indexOf(element)>-1" :element="element"
             :abc="$store.state.editor.complexEditorElement.indexOf(element)>-1"
              :bbb="(element === editingElement)"
              :ccc="show"/>
    <section class="content">
      <!-- 默认属性动画 -->
      <div :class="'animated ' + this.element['animatedName']" :style="styleAnime"
           v-if="element['animatedFont']">
        <myfont :duration="element.duration" :delay="element.delay" :loop="element.loop" :fonts="element.text.replace(/\n/g,'^').split('')" :class="element['animatedFont']"  :fontstyle="element['animatedFont']" :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true" :style="styleBasic">{{ element.text }}</myfont>
      </div>
      <div :class="'animated ' + this.element['animatedName']" :style="styleAnime" v-else-if="this.element['animatedType']==0">
        <div :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true" :style="styleBasic" :class="this.element['animatedFont'] ">{{ element.text }}</div>
      </div>
      <!--&lt;!&ndash; 扩展粒子滚动动画 &ndash;&gt;-->
      <!--<div :class="element['playing'] && 'animated ' + this.element['animatedName']" :style="styleAnime" v-else-if="this.element['animatedType']==1">-->
        <!--<div :elabEditable="element['elabEditable']||true" :style="styleBasic">-->
          <!--<svg xmlns="http://www.w3.org/2000/svg" class="hxParticleScrollSVG">-->
            <!--<symbol :id="`s-text`+element.nodeId">-->
              <!--<text text-anchor="middle" x="50%" y="50%" dy=".35em">{{ element.text }}</text>-->
            <!--</symbol>-->
            <!--<use class="particleScroll" :style="styleAnime" :xlink:href="`#s-text`+element.nodeId"></use>-->
            <!--<use class="particleScroll" :style="styleAnime" :xlink:href="`#s-text`+element.nodeId"></use>-->
            <!--<use class="particleScroll" :style="styleAnime" :xlink:href="`#s-text`+element.nodeId"></use>-->
            <!--<use class="particleScroll" :style="styleAnime" :xlink:href="`#s-text`+element.nodeId"></use>-->
            <!--<use class="particleScroll" :style="styleAnime" :xlink:href="`#s-text`+element.nodeId"></use>-->
          <!--</svg>-->
        <!--</div>-->
      <!--</div>-->
      <!--&lt;!&ndash; 扩展抖动动画 &ndash;&gt;-->
      <!--<div :class="element['playing'] && 'animated ' + this.element['animatedName']" :style="styleAnime" v-else-if="this.element['animatedType']==2">-->
        <!--<div :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true" :style="styleBasic">{{ element.text }}</div>-->
      <!--</div>-->
      <div  :class="'animated ' + this.element['animatedName']" :style="styleAnime" v-else>
        <div :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true" :style="styleBasic" :class="this.element['animatedFont'] ">{{ element.text }}</div>
      </div>
    </section>
  </aside>
</template>
<style lang="css">
  @import "./../../style/animatext/animate.min.css";
</style>
<script>
  import Operate from './../OperateNew'
  import myfont from '../font/font'
  import  'jquery'
  import './../../util/animatext/animatext.min.js'
  export default {
    props: ['element','stopEvent','isOverView'],
    data () {
      return {
        show:false,
        otime:null,
        loopNum:-300,
        textValue : '',
        globalOTime : null
      }
    },
    computed: {
      editingElement () {
        return this.$store.getters['editingElement']
      },
      styleAnime () {
        var playing = this.element['playing']
        //粒子滚动效果
        if (this.element['animatedType'] == 1) {
          ////粒子滚动效果，如果设置了延迟播放大小，则进行判断，默认是不延迟,默认的虚线宽度是70
          if (this.element['delay'] ==0) {
            if (playing) {
              return {
                animationName: this.element['animatedName'],
                animationDuration: this.element['duration']+'s',
                animationTimingFunction: 'linear',
                animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
              }
            }
            //stroke动画不动的情况，stroke填充线条
            return {
              // animationName: this.element['animatedName'],
              strokeDasharray: '300 400',
              animationDuration: this.element['duration']+'s',
              animationTimingFunction: 'linear',
              animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
            }
          }
          return {
            animationName: this.element['animatedName'],
            animationDuration: this.element['duration']+'s',
            animationTimingFunction: 'linear',
            animationDelay: this.element['delay'] + 's',
            animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
          }
        } else if (this.element['animatedType'] == 2) { //类似抖音抖动动画
          var sharksScroll = {
            animationDirection: 'reverse',
            animationFillMode: 'none',
            animationPlayState: 'running',
            animationTimingFunction: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
            animationDelay: this.element['delay'] + 's',
            animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
            animationDuration: this.element['duration']+'s',
            animationDelay: this.element['delay'] + 's',
          };
          if (playing) {
            sharksScroll = {
              animationDirection: 'reverse',
              animationFillMode: 'none',
              animationPlayState: 'running',
              animationName: this.element['animatedName'],
              animationTimingFunction: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
              animationDelay: this.element['delay'] + 's',
              animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
              animationDuration: this.element['duration']+'s',
              animationDelay: this.element['delay'] + 's',
            }
          }
          return sharksScroll;
        }
        return {
          animationIterationCount: this.element['loop'] ? 'infinite' : 'initial',
          animationDuration: this.element['duration'] + 's',
          animationDelay: this.element['delay'] + 's'
        }
      },
      styleBasic () {
        return {
          width: this.element['width'] + 'px',
          lineHeight: this.element['lineHeight'],
          color: this.element['color'],
          backgroundColor: this.element['allTransparent'] || this.element['backgroundColor'],
          textAlign: this.element['textAlign'],
          fontSize: this.element['fontSize'] + 'px',
          fontWeight: this.element['fontWeight'],
          'font-family': this.element['fontFamily'],
          opacity: this.element['opacity'] / 100,
          transform: 'rotate(' + this.element['transform'] + 'deg' + ')',
          'vertical-align': this.element['verticalAlign'],
          display: this.element['display'],
          'text-indent': this.element['textIndent'] + 'em',
          'letter-spacing': this.element['letterSpacing'] + 'em',
          'writing-mode' : this.element['verticalFont'],
          'white-space' : this.element['verticalFont'] ? 'pre' : 'pre-wrap'
        }
      }
    },
    watch:{
      element:{
        handler(newVal,oldVal){
          // if(newVal.animatedFont!=oldVal.animatedFont){
          //   this.fontSpecialEffect()
          // }
        },
        deep:true
      },
    },
    mounted(){
      // this.fontSpecialEffect()
    },
    methods: {
      mousedown (downEvent) {
        let flag=false
        this.$store.state.user.operationFlag=false;
        if(this.element.locked){
          return false;
        }
        if(this.stopEvent){
          return false
        }
        let ele = this.element
        let startY = downEvent.clientY
        let startX = downEvent.clientX
        let startTop = ele['top']
        let startLeft = ele['left']
        if(this.$store.state.editor.complexEditorElement.indexOf(ele)>-1&&this.$store.state.editor.complexEditorElement.length>1){
          var startTopArr=this.$store.state.editor.complexEditorElement.map(v=>v.top)
          var startLeftArr=this.$store.state.editor.complexEditorElement.map(v=>v.left)
        }
        let move = moveEvent => {
          let currX = moveEvent.clientX
          let currY = moveEvent.clientY
          if((currY - startY)!=0||(currX - startX)!=0){
            flag=true
          }
          if(this.$store.state.editor.complexEditorElement.indexOf(ele)>-1&&this.$store.state.editor.complexEditorElement.length>1){
            this.$store.state.editor.complexEditorElement.forEach((ele,index)=>{
              ele['top'] = currY - startY + startTopArr[index]
              ele['left'] = ele.type=='frame'?0:currX - startX + startLeftArr[index]
            });
            return;
          }
          ele['top'] = currY - startY + startTop
          ele['left'] = currX - startX + startLeft
        }
        let up = () => {
          this.$store.state.user.operationFlag=true;
          document.removeEventListener('mousemove', move)
          document.removeEventListener('mouseup', up)
          if(flag){
            window.fontFlag = true
          }else{
            window.fontFlag = false
          }
        }
        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', up)
      },
      mouseover (e) {
        if(this.$store.state.editor.editorPage.elements.indexOf(this.element)==-1){
          return
        }
        this.show = true
      },
      mouseleave(e){
        this.show = false
      },
      dragstart (event) {
        event.preventDefault()
      },
      /**高光移动动画方法**/
      // tomove(){
      //   var that = this
      //   // clearInterval(this.otime);
      //   this.otime=setInterval(()=>{
      //     this.loopNum+=10;
      //     if(this.loopNum==1100) {
      //       this.loopNum=-300;
      //       clearInterval(this.otime);
      //     }
      //     document.querySelector("[highlightdelimitid='"+that.element.nodeId+"']").style.backgroundPosition=that.loopNum+"px 0px";
      //   },20)
      // },
      /**选择特效方法**/
      // fontSpecialEffect(){
      //   if (this.element.animatedFont) {
      //     this.textValue = this.element.text
      //     var that = this
      //     var obj = $("[highlightdelimitid='"+that.element.nodeId+"']")
      //     if (this.element.animatedFont == 'highLightDelimit') {
      //       this.tomove()
      //     } else if (this.element.animatedFont == 'wordByWord') {
      //       obj.animatext({
      //         speed: 150,
      //         mode: "words",
      //         effect: 'swing',
      //         infinite: false,
      //         onBegin:function() {
      //           obj.html(that.textValue)
      //         },
      //         onSuccess:function() {
      //           obj.html(that.textValue)
      //         }
      //       });
      //     } else if (this.element.animatedFont == 'reverse') {
      //       obj.animatext({
      //         speed: 150,
      //         effect: 'bounceIn',
      //         reverse: true,
      //         infinite: false,
      //         onBegin:function() {
      //           obj.html(that.textValue)
      //         },
      //         onSuccess:function() {
      //           obj.html(that.textValue)
      //         }
      //       });
      //     }
      //   }
      // }
    },
    created(){
    },
    components: { Operate,myfont }
  }
</script>

<style lang='less' scoped>
  .element {
    position: absolute;
    cursor: move;
  }

  .operate {
    z-index: 2;
  }

  .content {
    /*white-space: pre-wrap;*/
    word-wrap: break-word;
    position: relative;
    z-index: 3;
  }
  .particleScroll {
    width: 100%;
    fill: none;
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-dasharray: 70 330;
    stroke-dashoffset: 0;
    /*-webkit-animation: particleScroll 6s infinite linear;*/
    /*animation: particleScroll 6s infinite linear;*/
  }
  .particleScroll:nth-child(5n + 1) {
    stroke: #3AA1BF;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .particleScroll:nth-child(5n + 2) {
    stroke: #E9F1DF;
    -webkit-animation-delay: -2.4s;
    animation-delay: -2.4s;
  }
  .particleScroll:nth-child(5n + 3) {
    stroke: #3AA1BF;
    -webkit-animation-delay: -3.6s;
    animation-delay: -3.6s;
  }
  .particleScroll:nth-child(5n + 4) {
    stroke: #E9F1DF;
    -webkit-animation-delay: -4.8s;
    animation-delay: -4.8s;
  }
  .particleScroll:nth-child(5n + 5) {
    stroke: #3AA1BF;
    -webkit-animation-delay: -6s;
    animation-delay: -6s;
  }

  @-webkit-keyframes particleScroll {
    100% {
      stroke-dashoffset: -400;
    }
  }
  @keyframes particleScroll {
    100% {
      stroke-dashoffset: -400;
    }
  }

  .hxParticleScrollSVG {
    font: 1.24em/1 Open Sans, Impact;
    position: relative;
    width: 100%;
    height: 100%;
  }


  /***********抖音抖动特效***************/
  @keyframes shakesScroll{
    0%{
      transform: translate(0px, 0px) rotate(0deg);
      opacity: 0.6;
      text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
    }
    25%{
      transform: translate(30px, 60px) rotate(-0.5deg);
      opacity: 0.5;
      text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    }
    50%{
      transform: translate(-40px, -60px) rotate(1.5deg);
      opacity: 0.4;
      text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
    }
    75% {
      transform: translate(30px, 60px) rotate(1.5deg);
      opacity: 0.4;
      text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
    }
    100% {
      transform: translate(-40px, -60px) rotate(-1.5deg);
      opacity: 0.8;
      text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
    }
  }


  .blueFlash{
    color: rgb(1, 205, 232);
    -webkit-animation: blueFlash .9s infinite both;
  }
  .pinkFlash{
    color: rgb(255, 37, 233);
    -webkit-animation: pinkFlash .9s infinite both;
  }

  @-webkit-keyframes pinkFlash{
    0%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
    62.5%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 2, 2);
    }
    75%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 3, 3);
    }
    87.5%{
      opacity:1;
      transform: matrix(1, 0, 0, 1, 4, 4);
    }
    100%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }
  @-webkit-keyframes blueFlash{
    0%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
    12.5%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 2, 2);
    }
    25%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 3, 3);
    }
    37.5%{
      opacity:1;
      transform: matrix(1, 0, 0, 1, 4, 4);
    }
    50%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, -1, -1);
    }
    62.5%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, -2, -2);
    }
    75%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, -3, -3);
    }
    87.5%{
      opacity:1;
      transform: matrix(1, 0, 0, 1, -4, -4);
    }
    100%{
      opacity:0;
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }
  /**高光划过的css**/
  .highLightDelimit{
    color:rgba(0,0,0,0.3) !important;
    background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,1) 240px,rgba(255,255,255,0) 300px) -300px 0 no-repeat;
    -webkit-background-clip:text;
  }
</style>
