<template>
  <table
    v-droppable
    :style="{'width':'100%', 'position': 'relative', 'background-color':  placeholderStyle[3].bgcolor}"
  >
  <!-- {{placeholderStyle[3]}}
  {{widgetType[selectedWidget.parentRow].style[2].cbgcolor}} -->
    <tr
      class="parentStyle"
      :style="{'height' : widgetType[index.parentRow].columns[index.column].rows.length > 0  ? '' : '100px', 'border': widgetType[index.parentRow].columns[index.column].rows.length > 0  ? '': '#4cb9ea dashed 1px'}"
    >
      <div
        :style="{'backgroundColor': JSON.stringify(selectedDropWidget) == JSON.stringify(index) ? 'rgb(76, 185, 234)' : 'transparent'}"
      ></div>
      <div
        v-if="dragWidgetType != 'parentRow'"
        class="hoverBox"
        :style="{'z-index': this.dragWidgetType == null ? '7' : '9'}"
        :id="JSON.stringify(index)"
        v-droppable
        @drag-over="onDragOver"
      ></div>
      <td
        :style="{'width': '100%', 'padding': placeholderStyle[1].padding + 'px',
         'paddingLeft': placeholderStyle[1].paddingLeft + 'px',
         'paddingRight': placeholderStyle[1].paddingRight + 'px',
         'paddingTop': placeholderStyle[1].paddingTop + 'px',
         'paddingBottom': placeholderStyle[1].paddingBottom + 'px',
         'border': placeholderStyle[4].border + 'px',
         'border-right': placeholderStyle[4].borderRight + 'px',
         'border-left': placeholderStyle[4].borderLeft + 'px',
         'border-top': placeholderStyle[4].borderTop + 'px',
         'border-bottom': placeholderStyle[4].borderBottom + 'px',
        }"
      >
        <slot>
          <div style="text-align:center; font-weight:500;">
             <span>No content here.Drag content from right.</span>
          </div>
        </slot>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  name: "columnPlaceholder",
  data: function() {
    return {
      hover: false
    };
  },
  props: {
    index: {
      type: Object
    },
    selectedDropWidget: {
      type: Object
    },
    widgetType: {
      type: Array
    },
    dragWidgetType: {
      type: String
    },
    placeholderStyle: {
      type: Array
    }
  },
  methods: {
    onDragOver() {
      //console.log("entered " + this.columnIndex + " " + this.index);
      this.$emit("changeSelectedDropWidget", this.index);
    }
  }
};
</script>

<style scoped>
.parentStyle {
  /* padding: 10px; */
  position: relative;
  /* padding: 10px 30px 10px 30px; */
}

.highlight {
  height: 5px;
  width: 100%;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
}

.hoverBox {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}
</style>
