<template>
  <div :style="{ width: width + 'px', height: element.height + 'px' }">
    <template v-if="element.alias == 'decoration1'">
      <dv-decoration-1
        :color="element.options.config.color"
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration2'">
      <dv-decoration-2
        :dur="element.options.config.dur"
        :reverse="element.options.config.reverse"
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration3'">
      <dv-decoration-3
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration4'">
      <dv-decoration-4
        :reverse="element.options.config.reverse"
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration5'">
      <dv-decoration-5
        :dur="element.options.config.dur"
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration6'">
      <dv-decoration-6
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration7'">
      <dv-decoration-7
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      >
        <span :style="getFontStyle(element)">
          {{ getTextContent(element) }}
        </span>
      </dv-decoration-7>
    </template>
    <template v-if="element.alias == 'decoration8'">
      <dv-decoration-8
        :reverse="element.options.config.reverse"
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration9'">
      <dv-decoration-9
        :dur="element.options.config.dur"
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      >
        <span :style="getFontStyle(element)">
          {{ getTextContent(element) }}
        </span>
      </dv-decoration-9>
    </template>
    <template v-if="element.alias == 'decoration10'">
      <dv-decoration-10
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
    <template v-if="element.alias == 'decoration11'">
      <dv-decoration-11
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      >
        <span :style="getFontStyle(element)">
          {{ getTextContent(element) }}
        </span>
      </dv-decoration-11>
    </template>
    <template v-if="element.alias == 'decoration12'">
      <dv-decoration-12
        :scan-dur="element.options.config.scanDur"
        :halo-dur="element.options.config.haloDur"
        :style="'width:' + width + 'px;height:' + height + 'px;'"
      />
    </template>
  </div>
</template>
<script>
  import VueDraggableResizable from 'vue-draggable-resizable'
  import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
  export default {
    name: 'DvBorderBox',
    components: {
      VueDraggableResizable,
    },
    props: {
      width: {
        type: Number,
        default: 0,
      },
      height: {
        type: Number,
        default: 0,
      },
      element: {
        type: Object,
        default: {},
      },
    },
    data() {
      return {}
    },
    mounted() {},
    methods: {
      getFontStyle(obj) {
        if (obj.options.config.isDiyStyle && obj.options.config.diyStyle) {
          return JSON.parse(obj.options.config.diyStyle)
        } else {
          return {
            fontSize: obj.options.config.text.fontSize,
            color: obj.options.config.text.color,
            fontWeight: obj.options.config.text.fontWeight,
          }
        }
      },
      getTextContent(ele) {
        const content = ele.options.config.text.content
        const formatter = ele.options.config.text.formatter
        if (content != '' && content != null && formatter) {
          return this.execReplace(formatter, content)
        }
        return content
      },
      execReplace(formatterText, replacement) {
        return formatterText.replace(new RegExp('\\{c\\}', 'g'), replacement)
      },
    },
  }
</script>
<style></style>
