<template>
  <div
    :style="[cssProps]"
    v-droppable
    @drag-enter="onDragEnter"
    @drag-leave="onDragLeave"
    @drag-drop="onDragDrop"
    @mouseenter="widgetDidMove ?  '' : hover = true"
    @mouseleave="hover = false"
    class="textFieldStyle"
    @click="$emit('selected')"
    ref="infoBox"
  >
    <div>
      <div
        class="test1"
        :style="{'backgroundColor': selectedDropWidget == index ? 'rgb(76, 185, 234)' : 'transparent'}"
      ></div>

      <div
        class="hoverBox"
        :style=" {'border': hover && selectedWidget == null ? '#7aabc0 solid 2px' : selectedWidget == index ? '#4CB9EA solid 2px' : 'transparent solid 2px'}"
      >
        <b-btn
          size="sm"
          class="delBtn"
          @click="$emit('DeleteWidget')"
          v-if="selectedWidget == index"
        >
          <span class="ti-trash"></span>
        </b-btn>
      </div>

      <slot>
        <div>nothing inside column</div>
      </slot>
      <!-- <div class="parentDiv">
        <div v-for="(column, indexChild) in columns" :key="indexChild" class="childDiv">
          <div v-for="(rows, indexChild) in column" :key="indexChild" class="childDiv">
            <component
              :is="rows.component"
              :index="indexChild"
              :columnIndex="index"
              :selectedDropWidget="selectedDropWidget"
              v-on:changeDropValue="passOn($event)"
            ></component>
          </div>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "columnsWidget",
  data: function() {
    return {
      inputText: "",
      hover: false,
      highlight: false
    };
  },
  props: {
    NewStyle: {
      type: Array
    },
    selectedWidget: {
      type: Object
    },
    index: {
      type: Number
    },
    widgetDidMove: {
      type: Boolean
    },
    isDraging: {
      type: Boolean
    },
    hasDragEnded: {
      type: Boolean
    },
    selectedDropWidget: {
      type: Object
    }
    // columns: {
    //   type: Array
    // }
  },
  computed: {
    cssProps() {
      return {
        // "--bg-color": this.NewStyle[0],
        // "--padding-left": this.NewStyle[1]["paddingLeft"] + "px",
        // "--padding-right": this.NewStyle[1]["paddingRight"] + "px",
        // "--padding-top": this.NewStyle[1]["paddingTop"] + "px",
        // "--padding-bottom": this.NewStyle[1]["paddingBottom"] + "px"
        "--bg-color": "white",
        "--padding-left": "10px",
        "--padding-right": "10px",
        "--padding-top": "10px",
        "--padding-bottom": "10px"
      };
    }
  },
  methods: {
    onDragEnter() {
      //   console.log("entered");
      this.highlight = true;
      this.$emit("changeDropValue", this.index);
    },
    onDragLeave() {
      // console.log("left");
      // this.highlight = false;
    },
    onDragDrop() {},
    passOn(value) {
      this.$emit("changeDropValue", value);
    }
  }
};
</script>

<style scoped>
.textFieldStyle {
  margin: 0px;
  position: relative;
  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
}

p:hover {
  background-color: "blue";
}

.test {
  background-color: rgb(62, 61, 61, 0.4);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}
.hoverBox {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}

.parentDiv {
  padding: 0px 20px;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
}
.childDiv {
  flex: 1;
}
</style>
