<template>
  <div
    class="dv-border-box-10"
    :style="{
      position: 'absolute',
      width: this.width + 'px',
      height: this.height + 'px',
      boxShadow: 'rgb(123, 123, 123) 0px 0px 25px 3px inset',
    }"
  >
    <svg :width="width" :height="height" class="dv-border-svg-container">
      <polygon :fill="backgroundColor" :points="polyPoints"></polygon>
    </svg>
    <svg
      v-for="(item, index) in border"
      :key="index"
      width="150px"
      height="150px"
      :class="item + ' dv-border-svg-container'"
    >
      <polygon points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" :fill="corColor"></polygon>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'DvBorderBox10',
  props: {
    color: {
      type: Array,
      default: function () {
        return []
      }
    },
    backgroundColor: {
      type: String,
      default: "transparent"
    },
    corColor: {
      type: String,
      default: '#1E90FF'
    }
  },
  data: function () {
    return {
      ref: "border-box-10",
      border: ["left-top", "right-top", "left-bottom", "right-bottom"],
      defaultColor: ["#1d48c4", "#d3e1f8"],
      mergedColor: [],
      width: 0,
      height: 0,
      polyPoints: ''
    }
  },
  watch: {
    color: function () {
      var t = this.mergeColor;
      t()
    }
  },
  methods: {
    mergeColor: function () {
      //   var t = this.color
      //     , e = this.defaultColor;
      //   this.mergedColor = Object(v["deepMerge"])(Object(y["deepClone"])(e, !0), t || [])
    },
    calPoints () {
      const t = this
      this.polyPoints = "4, 0 " + (t.width - 4) + ", 0 " + t.width + ", 4 " + t.width + ", " + (t.height - 4)
        + " " + (t.width - 4) + ", " + t.height + "  4, "
        + t.height + " 0, " + (t.height - 4) + " 0, 4    "
    },
    setA (rect) {
      this.width = rect.w
      this.height = rect.h
      this.calPoints()
    }
  },
  mounted: function () {
  },
  watch: {

  }
}
</script>

<style lang="less" scoped>
.dv-border-box-10 {
  border-radius: 6px;
  position: relative;
}

.dv-border-box-10 .dv-border-svg-container {
  position: absolute;
  display: block;
}
.dv-border-box-10 .right-top {
  right: 0;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.dv-border-box-10 .left-bottom {
  bottom: 0;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.dv-border-box-10 .right-bottom {
  right: 0;
  bottom: 0;
  -webkit-transform: rotateX(180deg) rotateY(180deg);
  transform: rotateX(180deg) rotateY(180deg);
}
</style>
