<!-- 
  Div 图层
-->
 <template>
  <div :class="[divClass]" :style="styleColor">
    {{ styleColor.text }}
  </div>
</template>

<script>
export default {
  name: "WidgetDiv",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {},
      optionsData: {}
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        color: this.transStyle.colorOne,
        text: this.transStyle.text,
        divClass: this.transStyle.divType == undefined
            ? "div_Style_1"
            : this.transStyle.divType,
        background: this.transStyle.background,
        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
    }
  }, 
  watch: {
    value: {
      handler(val) {
        this.options = val;
      },
      deep: true
    }
  },
  mounted() {
    this.options = this.value;
  },
  methods: {}
};
</script>

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