<!--
  Div 图层
-->
<template>
    <dv-border-Box-1 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     v-if="styleColor.divClass === 'dv-border-Box-1'"></dv-border-Box-1>
    <dv-border-Box-2 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     v-else-if="styleColor.divClass === 'dv-border-Box-2'"></dv-border-Box-2>
    <dv-border-Box-3 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     v-else-if="styleColor.divClass === 'dv-border-Box-3'"></dv-border-Box-3>
    <dv-border-Box-4 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     :reverse="transStyle.reverse"
                     v-else-if="styleColor.divClass === 'dv-border-Box-4'"></dv-border-Box-4>
    <dv-border-Box-5 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     v-else-if="styleColor.divClass === 'dv-border-Box-5'"></dv-border-Box-5>
    <dv-border-Box-6 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     v-else-if="styleColor.divClass === 'dv-border-Box-6'"></dv-border-Box-6>
    <dv-border-Box-7 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     v-else-if="styleColor.divClass === 'dv-border-Box-7'"></dv-border-Box-7>
    <dv-border-Box-8 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     :dur="transStyle.dur"  :reverse="transStyle.reverse"
                     :title="transStyle.title"  :titleWidth="transStyle.titleWidth"
                     v-else-if="styleColor.divClass === 'dv-border-Box-8'"   ></dv-border-Box-8>
    <dv-border-Box-9 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                     v-else-if="styleColor.divClass === 'dv-border-Box-9'"></dv-border-Box-9>
    <dv-border-Box-10 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                      v-else-if="styleColor.divClass === 'dv-border-Box-10'"></dv-border-Box-10>
    <dv-border-Box-11 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                      :title="transStyle.title"  :titleWidth="transStyle.titleWidth"
                      v-else-if="styleColor.divClass === 'dv-border-Box-11'"></dv-border-Box-11>
    <dv-border-Box-12 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                      v-else-if="styleColor.divClass === 'dv-border-Box-12'"></dv-border-Box-12>
    <dv-border-Box-13 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                      v-else="styleColor.divClass === 'dv-border-Box-13'"></dv-border-Box-13>
</template>
<script>
import borderBox1 from "@jiaminghi/data-view/lib/components/borderBox1";
import borderBox2 from "@jiaminghi/data-view/lib/components/borderBox2";
import borderBox3 from "@jiaminghi/data-view/lib/components/borderBox3";
import borderBox4 from "@jiaminghi/data-view/lib/components/borderBox4";
import borderBox5 from "@jiaminghi/data-view/lib/components/borderBox5";
import borderBox6 from "@jiaminghi/data-view/lib/components/borderBox6";
import borderBox7 from "@jiaminghi/data-view/lib/components/borderBox7";
import borderBox8 from "@jiaminghi/data-view/lib/components/borderBox8";
import borderBox9 from "@jiaminghi/data-view/lib/components/borderBox9";
import borderBox10 from "@jiaminghi/data-view/lib/components/borderBox10";
import borderBox11 from "@jiaminghi/data-view/lib/components/borderBox11";
import borderBox12 from "@jiaminghi/data-view/lib/components/borderBox12";
import borderBox13 from "@jiaminghi/data-view/lib/components/borderBox13";
Vue.use(borderBox1)
Vue.use(borderBox2)
Vue.use(borderBox3)
Vue.use(borderBox4)
Vue.use(borderBox5)
Vue.use(borderBox6)
Vue.use(borderBox7)
Vue.use(borderBox8)
Vue.use(borderBox9)
Vue.use(borderBox10)
Vue.use(borderBox11)
Vue.use(borderBox12)
Vue.use(borderBox13)
export default {
  name: "WidgetBorderBox",
  components: {
  },
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      options: {},
      optionsData: {},
    };
  },
  computed: {
    transStyle() {
      let transStyleObj = this.objToOne(this.options);
      let color = [];
      if(!this.isBlankObject(transStyleObj)){
        const  colorOne = transStyleObj.colorOne;
        if(!this.isBlankObject(colorOne)){
          color.push(colorOne);
        }
        const colorTwo = transStyleObj.colorTwo;
        if(!this.isBlankObject(colorTwo)){
          color.push(colorTwo);
        }
        transStyleObj.color = color;
      }
      return transStyleObj;
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        // color: this.transStyle.colorOne,
        // text: this.transStyle.text,
        divClass:
          this.transStyle.divType == undefined
            ? "dv-border-Box-1"
            : this.transStyle.divType,
        // background: this.transStyle.backgroundColor,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.setOptionsData();
      },
      deep: true,
    },
  },
  mounted() {
    this.options = this.value;
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.div {
  width: 100%;
  height: 100%;
  border: 2em;
  border-color: aqua;
  overflow: hidden;
}

.div_Style {
  width: 100%;
  height: 100%;
}
</style>
