<template>
  <div :style="{ width: width + 'px', height: height + 'px' }">
    <dv-border-box-1
      v-if="element.alias == 'dv-border-box-1'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-1>
    <dv-border-box-2
      v-if="element.alias == 'dv-border-box-2'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-2>
    <dv-border-box-3
      v-if="element.alias == 'dv-border-box-3'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-3>
    <dv-border-box-4
      v-if="element.alias == 'dv-border-box-4'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
      :reverse="element.options.config.reverse"
    ></dv-border-box-4>
    <dv-border-box-5
      v-if="element.alias == 'dv-border-box-5'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
      :reverse="element.options.config.reverse"
    ></dv-border-box-5>
    <dv-border-box-6
      v-if="element.alias == 'dv-border-box-6'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-6>
    <dv-border-box-7
      v-if="element.alias == 'dv-border-box-7'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-7>
    <dv-border-box-8
      v-if="element.alias == 'dv-border-box-8'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
      :reverse="element.options.config.reverse"
      :dur="element.options.config.dur"
    ></dv-border-box-8>
    <dv-border-box-9
      v-if="element.alias == 'dv-border-box-9'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-9>
    <dv-border-box-10
      v-if="element.alias == 'dv-border-box-10'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-10>
    <dv-border-box-11
      v-if="element.alias == 'dv-border-box-11'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
      :title="element.options.config.title"
      :title-width="element.options.config.titleWidth"
    ></dv-border-box-11>
    <dv-border-box-12
      v-if="element.alias == 'dv-border-box-12'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-12>
    <dv-border-box-13
      v-if="element.alias == 'dv-border-box-13'"
      :color="getColor(element)"
      :background-color="getBackgroundColor(element)"
    ></dv-border-box-13>
  </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: {
      getColor(ele) {
        if (ele.options.config.color.apply) {
          return [
            ele.options.config.color.first,
            ele.options.config.color.second,
          ]
        } else {
          return null
        }
      },
      getBackgroundColor(ele) {
        if (ele.options.config.color.background) {
          return ele.options.config.color.background
        } else {
          return 'none'
        }
      },
    },
  }
</script>
<style></style>
