<template>
  <div class="shape shape-line"
    :style="isLayerEdit?{
      top: elementInfo.top + 'px',
      left: elementInfo.left + 'px',
    }:{
      top:elementInfo.percentageTop*100+'%',
      left:elementInfo.percentageLeft*100+'%',
      pointerEvents:'none'
    }"
    @mousedown.stop="(e)=>{handleMoveStart(e,'move')}"
    @contextmenu.stop="showContentMenu"
  >
    <div class="shape-content" :style="{width:svgWidth+'px',height:svgHeight+'px'}">
      <svg 
        overflow="visible" 
        :width="svgWidth"
        :height="svgHeight"
      >
        <defs>
          <LineMarker
            v-if="elementInfo.points[0]"
            :id="elementInfo.id"
            position="start"
            :type="elementInfo.points[0]"
            :color="elementInfo.color"
            :baseSize="elementInfo.strokeWidth"
          />
          <LineMarker
            v-if="elementInfo.points[1]"
            :id="elementInfo.id"
            position="end"
            :type="elementInfo.points[1]"
            :color="elementInfo.color"
            :baseSize="elementInfo.strokeWidth"
          />
        </defs>
        <path   
          :d="`M ${elementInfo.start[0]}, ${elementInfo.start[1]} L ${elementInfo.end[0]}, ${elementInfo.end[1]}`" 
          fill="none"
          :stroke="elementInfo.color"
          :stroke-width="elementInfo.strokeWidth" 
          :stroke-dasharray="elementInfo.style === 'dashed' ? '10 6' : '0 0'"
          :marker-start="elementInfo.points[0] ? `url(#${elementInfo.id}-${elementInfo.points[0]}-start)` : ''"
          :marker-end="elementInfo.points[1] ? `url(#${elementInfo.id}-${elementInfo.points[1]}-end)` : ''" 
        ></path>
      </svg>
    </div>
    <div class="borderline line" v-if="isActive">
      <div class="start resize-handle"
        @mousedown.stop="(e)=>{handleScaleStart(e,'START')}"
        :style="{left:elementInfo.start[0]+'px',top:elementInfo.start[1]+'px'}"
      ></div>
      <div class="end resize-handle"
        @mousedown.stop="(e)=>{handleScaleStart(e,'END')}"
        :style="{left:elementInfo.end[0]+'px',top:elementInfo.end[1]+'px'}"
      ></div>
    </div>
    <!-- 自定义右键菜单 -->
    <ContextMenu :menu="contextmenus" :menuId="elementInfo.id"
      @deleteShape="handleDeleteLayer"
      @copyShape="handleCopyShape"
    />
  </div>
</template>

<script>
import {BaseLineShape} from '../../../utils/config';
import{caclShapePercentage} from "../../../utils/untils";
import shapeMixin from './shapeMixin';
import LineMarker from "./LineMarker.vue";
export default {
  mixins:[shapeMixin],
  components:{LineMarker},
  props:{
    elementInfo:{//元素信息,结构参考BaseLineShape
      type:Object,
      default:()=>{
        return BaseLineShape
      }
    },
    isActive:false,//是否被选中
  },
  data() {
    return {
    };
  },
  computed:{
    svgWidth(){
      const width = Math.abs(this.elementInfo.start[0] - this.elementInfo.end[0])
      return width < 25 ? 25 : width
    },
    svgHeight(){
      const height = Math.abs(this.elementInfo.start[1] - this.elementInfo.end[1])
      return height < 25 ? 25 : height
    }
  },
  methods: {
    changeStyle(moveInfo,scaleInfo){
      if(this.eventType==='resize'){
        /* this.elementInfo = {...this.elementInfo,...scaleInfo} */
        const {left,top,width,height,start,end} = scaleInfo
        this.elementInfo.left = left
        this.elementInfo.top = top
        this.elementInfo.width = width
        this.elementInfo.height = height
        this.elementInfo.start = start
        this.elementInfo.end = end
      }else if(this.eventType==='move'){
        const {left,top} = moveInfo
        this.elementInfo.left = left
        this.elementInfo.top = top
      }
      //更新percentage单位
      const width = $('.total-wrap').width(),height = $('.total-wrap').height()
      const percentageShape = caclShapePercentage({layerWidth:width,layerHeight:height},this.elementInfo)
      this.elementInfo.percentageLeft = percentageShape.percentageLeft
      this.elementInfo.percentageTop = percentageShape.percentageTop
      this.elementInfo.percentageWidth = percentageShape.percentageWidth
      this.elementInfo.percentageHeight = percentageShape.percentageHeight
    },
  },
};
</script>

<style scoped lang="scss">
.shape{
  z-index: 4;
  position:absolute;
  transform-origin: 0 0;
  .shape-content{
    transform-origin: 0 0;
    svg{
      overflow:visible;
      transform-origin: 0 0;
    }
  }
}
</style>
