<!--
  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"
                      :titleFont="transStyle.titleFont"
                      :titleColor="transStyle.titleColor"
                      :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-if="styleColor.divClass === 'dv-border-Box-13'"></dv-border-Box-13>
   <div :style="styleColor"
        v-else="styleColor.divClass === 'dv-border-Box-14'">
       <i :style="topL"></i>
       <i :style="topR"></i>
       <i :style="bottomL"></i>
       <i :style="bottomR"></i>
       <div :class="[this.transStyle.title14before? 'title14' : '']" :style="title14">{{ transStyle.title }}</div>

   </div>
</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";
import Vue from "vue";
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() {
      let ret = {
        position: this.ispreview ? "absolute" : "static",
        divClass:
          this.transStyle.divType == undefined
            ? "dv-border-Box-1"
            : this.transStyle.divType,
        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",
      };
      if(this.transStyle.divType === 'dv-border-Box-14'){
        ret = this.databox(ret);
        if(this.isBlank(ret.backgroundColor)){
          ret.backgroundColor=this.transStyle.backgroundColor;
        }
      }
      return ret;
    },
    title14() {
      const databoxString = this.transStyle.title14||'font-size:1.4rem; color:#fff; position: absolute; padding-left: 1.2rem;padding-top: 0.4rem;margin-bottom: 10px;';
      const ret={};
      return this.getStyleObj(databoxString,ret);
    },
    topL() {
      const databoxString = this.transStyle.topL||'width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:-2px;left:-2px';
      const ret={};
      return this.getStyleObj(databoxString,ret);
    },
    topR() {
      const databoxString = this.transStyle.topR||'width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:-2px;right:-2px';
      const ret={};
      return this.getStyleObj(databoxString,ret);
    },
    bottomL() {
      const databoxString = this.transStyle.bottomL||'width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:-2px;left:-2px';
      const ret={};
      return this.getStyleObj(databoxString,ret);
    },
    bottomR() {
      const databoxString = this.transStyle.bottomR||'width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:-2px;right:-2px';
      const ret={};
      return this.getStyleObj(databoxString,ret);
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
      },
      deep: true,
    },
  },
  mounted() {
    this.options = this.value;
  },
  methods: {
    databox(databoxObj) {
      const databoxString = this.transStyle.databox||"border:2px solid #032d60; -webkit-box-shadow:#07417a 0 0 10px;-moz-box-shadow:#07417a 0 0 10px;box-shadow:inset 0 0 30px #07417a;z-index: 0";
      return this.getStyleObj(databoxString,databoxObj);
    },
    //将字符串转成样式
    getStyleObj(databoxString,databoxObj) {
      const data = databoxString.split(";")
      for(let i=0; i<data.length;i++){
        let dataOne = data[i].split(":");
        if(dataOne.length==2){
          let dataOneKey = dataOne[0].trimStart().trimEnd();
          let dataOnevalue = dataOne[1].trimStart().trimEnd();
          databoxObj[dataOneKey] =dataOnevalue;
        }
      }
      return databoxObj;
    },
  },
};
</script>

<style scoped lang="scss">
//.div_Style {
//  width: 100%;
//  height: 100%;
//}
//.data-box{
//  border:2px solid #032d60;
//  -webkit-box-shadow:#07417a 0 0 10px;
//  -moz-box-shadow:#07417a 0 0 10px;
//  box-shadow:inset 0 0 30px #07417a;
//  z-index: 0
//}
//.title14{ font-size:1.4rem; color:#fff; position: absolute; padding-left: 1.2rem;padding-top: 0.4rem;margin-bottom: 10px;}
.title14:before{ width: 5px; height: 20px; top:0.7rem; position: absolute; content: ""; background: #49bcf7; border-radius:20px; left: 2px; }
///*四个角*/
//.topL{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:-2px;left:-2px}
//.topR{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:-2px;right:-2px}
//.bottomL{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:-2px;left:-2px}
//.bottomR{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:-2px;right:-2px}

</style>
