<template>
  <div v-if="selectedWidget.row == null">
    <div v-b-toggle.columns class="vb-body-right-option pointer option-head">Columns</div>
    <b-collapse id="columns" visible>
      <div class="vb-p-10" style="height: 190px;">
        <div
          class="vb-widgets-colmns"
          @click="setColumnsSize('one')"
          :class="{selectedStyle: this.widgetType[this.selectedWidget.parentRow].numSize == 'one' ? true : false}"
        ></div>
        <div
          class="vb-widgets-colmns"
          @click="setColumnsSize('two')"
          :class="{selectedStyle: this.widgetType[this.selectedWidget.parentRow].numSize == 'two' ? true : false}"
        >
          <div class="vb-widgets-col2"></div>
        </div>
        <div
          class="vb-widgets-colmns"
          @click="setColumnsSize('three')"
          :class="{selectedStyle: this.widgetType[this.selectedWidget.parentRow].numSize == 'three' ? true : false}"
        >
          <div class="vb-widgets-col3"></div>
          <div class="vb-widgets-col3"></div>
        </div>
        <div
          class="vb-widgets-colmns"
          @click="setColumnsSize('four')"
          :class="{selectedStyle: this.widgetType[this.selectedWidget.parentRow].numSize == 'four' ? true : false}"
        >
          <div class="vb-widgets-col4"></div>
          <div class="vb-widgets-col4"></div>
          <div class="vb-widgets-col4"></div>
        </div>
        <div
          class="vb-widgets-colmns"
          @click="setColumnsSize('right')"
          :class="{selectedStyle: this.widgetType[this.selectedWidget.parentRow].numSize == 'right' ? true : false}"
        >
          <div class="vb-widgets-col3-4"></div>
        </div>
        <div
          class="vb-widgets-colmns"
          @click="setColumnsSize('left')"
          :class="{selectedStyle: this.widgetType[this.selectedWidget.parentRow].numSize == 'left' ? true : false}"
        >
          <div class="vb-widgets-col4"></div>
        </div>
      </div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  name: "columns",
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {};
  },
  methods: {
    setColumnsSize(size) {
      var preSize = this.widgetType[this.selectedWidget.parentRow].size;
      switch (size) {
        case "one":
          this.widgetType[this.selectedWidget.parentRow].numSize = "one";
          if (preSize == 1) {
          } else if (preSize > 1) {
            for (var i = 0; i < preSize - 1; i++) {
              this.$emit("removeColumn");
            }
          } else {
            this.$emit("addColumn");
          }
          this.$emit("chnageColumnSize", "one");
          break;
        case "two":
          this.widgetType[this.selectedWidget.parentRow].numSize = "two";
          if (preSize == 2) {
          } else if (preSize > 2) {
            for (var i = 0; i < preSize - 2; i++) {
              this.$emit("removeColumn");
            }
          } else {
            this.$emit("addColumn");
          }
          this.$emit("chnageColumnSize", "two");
          break;
        case "three":
          this.widgetType[this.selectedWidget.parentRow].numSize = "three";
          if (preSize == 3) {
          } else if (preSize > 3) {
            for (var i = 0; i < preSize - 3; i++) {
              this.$emit("removeColumn");
            }
          } else {
            for (var i = 0; i < 3 - preSize; i++) {
              this.$emit("addColumn");
            }
          }
          this.$emit("chnageColumnSize", "three");
          break;
        case "four":
          this.widgetType[this.selectedWidget.parentRow].numSize = "four";
          if (preSize == 4) {
          } else if (preSize > 4) {
            for (var i = 0; i < preSize - 4; i++) {
              this.$emit("removeColumn");
            }
          } else {
            for (var i = 0; i < 4 - preSize; i++) {
              this.$emit("addColumn");
            }
          }
          this.$emit("chnageColumnSize", "four");
          break;
        case "right":
          this.widgetType[this.selectedWidget.parentRow].numSize = "right";
          if (preSize == 2) {
          } else if (preSize > 2) {
            for (var i = 0; i < preSize - 2; i++) {
              this.$emit("removeColumn");
            }
          } else {
            this.$emit("addColumn");
          }
          this.$emit("chnageColumnSize", "");
          this.$emit("chnageColumnSize", "right");
          break;
        case "left":
          this.widgetType[this.selectedWidget.parentRow].numSize = "left";
          if (preSize == 2) {
          } else if (preSize > 2) {
            for (var i = 0; i < preSize - 2; i++) {
              this.$emit("removeColumn");
            }
          } else {
            this.$emit("addColumn");
          }
          this.$emit("chnageColumnSize", "");
          this.$emit("chnageColumnSize", "left");
          break;

        default:
        // code block
      }
    }
  }
};
</script>

<style scoped>
.selectedStyle {
  background-color: white;
  border: 2px solid #ccc;
}
</style>
