<template>
  <div class="dv-border-box-4" dur="3" :style="{ width: width + 'px', height: height + 'px', postion: 'absolute' }">
    <svg :width="width" :height="height" class="dv-border-svg-container false" :style="{ width, height }">
      <polygon fill="transparent" :points="points[0]"></polygon>
      <polyline :points="points[1]" class="dv-bb4-line-1" stroke="#1E90FF"></polyline>
      <polyline :points="points[2]" class="dv-bb4-line-2" stroke="#00CED1"></polyline>

      <polyline :points="points[3]" class="dv-bb4-line-3" stroke="#1E90FF"></polyline>
      <polyline points="28, 24 13, 41 13, 64" class="dv-bb4-line-4" stroke="#1E90FF"></polyline>
      <polyline points="5, 45 5, 140" class="dv-bb4-line-5" stroke="#1E90FF"></polyline>
      <polyline points="14, 75 14, 180" class="dv-bb4-line-6" stroke="#00CED1"></polyline>
      <polyline points="55, 11 147, 11 167, 26 250, 26" class="dv-bb4-line-7" stroke="#00CED1"></polyline>
      <polyline points="158, 5 173, 16" class="dv-bb4-line-8" stroke="#00CED1"></polyline>
      <polyline :points="points[4]" class="dv-bb4-line-9" stroke="#1E90FF"></polyline>
      <polyline :points="points[5]" class="dv-bb4-line-10" stroke="#00CED1"></polyline>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'DvBorderBox4',
  props: {
    corColor: {
      type: String,
      default: '#1E90FF'
    },
    rect: {
      type: Object,
      default: () => {
        return { w: 0, h: 0 }
      }
    }
  },
  data: function () {
    return {
      width: 0,
      height: 0,
      points: ['', '', '', '', '', '']
    }
  },
  watch: {
  },
  methods: {
    setA (rect) {
      this.width = rect.w
      this.height = rect.h
      const t = this

      this.points[0] = " " + (t.width - 15) + ", 22 170, 22 150, 7 40, 7 28, 21 32, 24   16, 42 16, "
        + (t.height - 32) + " 41, " + (t.height - 7) + " " + (t.width - 15) + ", " + (t.height - 7)
      this.points[1] = "145, " + (t.height - 5) + " 40, " + (t.height - 5) + " 10, " + (t.height - 35) + "  10, 40 40, 5 150, 5 170, 20 " + (t.width - 15) + ", 20"
      this.points[2] = "245, " + (t.height - 1) + " 36, " + (t.height - 1) + " 14, " + (t.height - 23) + "  14, " + (t.height - 100)
      this.points[3] = "7, " + (t.height - 40) + " 7, " + (t.height - 75)
      this.points[4] = "200, 17 " + (t.width - 10) + ", 17"
      this.points[5] = "385, 17 " + (t.width - 10) + ", 17"
    }
  },
  mounted: function () {
  }
}
</script>

<style lang="less" scoped>
.dv-border-box-4 {
  width: 100%;
  height: 100%;
}
.dv-border-box-4 .dv-border-svg-container {
  position: absolute;
  top: 0;
  left: 0;
}
.dv-border-box-4 .dv-border-svg-container > polyline {
  fill: none;
}
.dv-border-box-4 .dv-bb4-line-1,
.dv-border-box-4 .dv-bb4-line-2 {
  stroke-width: 1;
}
.dv-border-box-4 .dv-bb4-line-3,
.dv-border-box-4 .dv-bb4-line-4 {
  stroke-width: 3 px;
  stroke-linecap: round;
}
.dv-border-box-4 .dv-bb4-line-5,
.dv-border-box-4 .dv-bb4-line-6,
.dv-border-box-4 .dv-bb4-line-7 {
  stroke-width: 1;
}
.dv-border-box-4 .dv-bb4-line-8,
.dv-border-box-4 .dv-bb4-line-9 {
  stroke-width: 3 px;
  stroke-linecap: round;
}
.dv-border-box-4 .dv-bb4-line-9 {
  stroke-dasharray: 100 250;
}
.dv-border-box-4 .dv-bb4-line-10 {
  stroke-width: 1;
  stroke-dasharray: 80 270;
}
</style>
