<template>
<!-- 基础图形 目前包括:矩形,圆 -->
  <div class="shape" :id="`shape-${elementInfo.id}`"
    :style="isLayerEdit?{
      top: elementInfo.top + 'px',
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
      height: elementInfo.height + 'px',
    }:{
      top: elementInfo.percentageTop*100 + '%',
      left: elementInfo.percentageLeft*100 + '%',
      pointerEvents:'none'
    }"
    @mousedown.stop="(e)=>{handleMoveStart(e,'move')}"
    @contextmenu.stop="showContentMenu"
  >
    <div class="shape-content">
      <svg 
        overflow="visible" 
        :width="elementInfo.width"
        :height="elementInfo.height"
      >
        <g 
          :transform="`scale(${elementInfo.width / elementInfo.viewBox[0]}, ${elementInfo.height / elementInfo.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`"
        >
          <path 
            class="shape-path"
            vector-effect="non-scaling-stroke" 
            stroke-linecap="butt" 
            stroke-miterlimit="8"
            stroke-linejoin="" 
            :d="elementInfo.path" 
            :fill="elementInfo.fill"
            :stroke="elementInfo.outline.color"
            :stroke-width="elementInfo.outline.width" 
            :stroke-dasharray="elementInfo.outline.style === 'dashed' ? '10 6' : '0 0'" 
          ></path>
        </g>
      </svg>
    </div>
    <div class="borderline" v-if="isActive">
      <div class="left-1 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'LEFT_TOP')}"></div>
      <div class="left-2 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'LEFT')}"></div>
      <div class="left-3 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'LEFT_BOTTOM')}"></div>
      <div class="line-middle-1 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'TOP')}"></div>
      <div class="line-middle-2 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'BOTTOM')}"></div>
      <div class="right-1 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'RIGHT_TOP')}"></div>
      <div class="right-2 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'RIGHT')}"></div>
      <div class="right-3 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'RIGHT_BOTTOM')}"></div>
    </div>
    <!-- 自定义右键菜单 -->
    <ContextMenu :menu="contextmenus" :menuId="elementInfo.id"
      @deleteShape="handleDeleteLayer"
      @copyShape="handleCopyShape"
    />
  </div>
</template>

<script>
import {BaseRectShape} from '../../../utils/config';
import shapeMixin from './shapeMixin';
export default {
  mixins:[shapeMixin],
  props:{
    elementInfo:{//元素信息,结构参考BaseRectShape
      type:Object,
      default:()=>{
        return BaseRectShape
      }
    }
  },
  data() {
    return {
    };
  },
  methods: {},
};
</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>
