<template>
  <div  class="dv-border-box-2"  v-resize="resizeHandler">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon
        :fill="backgroundColor"
        :points="`
          7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
        `"
      />

      <polyline
        :stroke="color1"
        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
      />
      <polyline
        :stroke="color2"
        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
      />
      <circle :fill="color1" cx="11" cy="11" r="1" />
      <circle :fill="color1" :cx="width - 11" cy="11" r="1" />
      <circle :fill="color1" :cx="width - 11" :cy="height - 11" r="1" />
      <circle :fill="color1" cx="11" :cy="height - 11" r="1" />
    </svg>
  </div>
</template>
<script>
export default{
  props:{
    color1:{
      type:String,
      default:'#4fd2dd',
    },
    color2:{
      type:String,
      default:'#11A983',
    },
    backgroundColor:{
      type:String,
      default:'transparent'
    }
  },
  data(){
    return {
      width:'150',
      height:'150',     
    }
  },
  methods:{
    resizeHandler(entry){
      const rect=entry.contentRect;
      this.width=rect.width;
      this.height=rect.height;
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.resizeHandler({contentRect:this.$el.getBoundingClientRect()});
    });
  }
}
</script>

<style lang="scss" scoped>
.dv-border-box-2 {
  // position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;

  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    & > polyline {
      fill: none;
      stroke-width: 1;
    }
  }

  .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
