<template>
  <div
    class="dv-decoration-11"
    dur="3"
    :style="{ right: '-30px', top: '-17px', position: 'absolute', width: width + 'px', height: height + 'px' }"
  >
    <svg :width="width" :height="height">
      <polygon fill="rgba(0,206,209,0.1)" points="20 10, 25 4, 55 4 60 10" stroke="#00CED1"></polygon>
      <polygon v-if="!bottomHide" fill="rgba(0,206,209,0.1)" :points="points[0]" stroke="#00CED1"></polygon>
      <polygon fill="rgba(0,206,209,0.1)" :points="points[1]" stroke="#00CED1"></polygon>
      <polygon v-if="!bottomHide" fill="rgba(0,206,209,0.1)" :points="points[2]" stroke="#00CED1"></polygon>
      <polygon fill="rgba(30,144,255,0.2)" :points="points[3]" stroke="#1E90FF"></polygon>
      <polyline fill="transparent" stroke="rgba(30,144,255,0.7)" :points="points[4]"></polyline>
      <polyline fill="transparent" stroke="rgba(30,144,255,0.7)" :points="points[5]"></polyline>
    </svg>
  </div>
</template>

<script>
import color from '@jiaminghi/color'
import _ from 'lodash'

export default {
  name: 'DvDecoration11',
  props: {
    color: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data: function () {
    return {
      bottomHide: true,
      ref: "decoration-11",
      defaultColor: ["#1a98fc", "#2cf7fe"],
      mergedColor: [],
      width: 0,
      height: 0,
      points: ['', '', '', '', '', '']
    }
  },
  watch: {
    color: function () {
      var t = this.mergeColor;
      t()
    }
  },
  methods: {
    mergeColor: function () {
      this.mergedColor = _.merge(_.clone(this.defaultColor), this.color)
    },
    fade: color.fade,
    setA (rect) {
      this.width = rect[0]
      this.height = rect[1]
      this.calPoints()
    },
    calPoints () {
      const t = this
      this.points[0] = "20 " + (t.height - 10) + ", 25 " + (t.height - 4) + ", 55 " + (t.height - 4) + " 60 " + (t.height - 10)
      this.points[1] = t.width - 20 + " 10, " + (t.width - 25) + " 4, " + (t.width - 55) + " 4 " + (t.width - 60) + " 10"
      this.points[2] = t.width - 20 + " " + (t.height - 10) + ", " + (t.width - 25) + " " + (t.height - 4) + ", " + (t.width - 55) + " " + (t.height - 4) + " " + (t.width - 60) + " " + (t.height - 10)
      this.points[3] = "  20 10, 5 " + t.height / 2 + " 20 " + (t.height - 10) + " " + (t.width - 20) + " " + (t.height - 10) + " " + (t.width - 5) + " " + t.height / 2 + " " + (t.width - 20) + " 10  "
      this.points[4] = "25 18, 15 " + t.height / 2 + " 25 " + (t.height - 18)
      this.points[5] = t.width - 25 + " 18, " + (t.width - 15) + " " + t.height / 2 + " " + (t.width - 25) + " " + (t.height - 18)
    }
  },
  mounted: function () {
    var t = this.mergeColor;
    t()
  }
}
</script>

<style lang="less" scoped>
.dv-decoration-11 {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
</style>
