<template>
  <table
    id="3"
    :style="{'background-image': this.widgetType[this.index.parentRow].width ? 'url(' + this.widgetType[this.index.parentRow].imgurl + ')' : '', 'background-repeat': this.widgetType[this.index.parentRow].repeat, 'background-position': this.widgetType[this.index.parentRow].position }"
    v-droppable
    @drag-enter="onDragEnter"
    @drag-leave="onDragLeave"
    @drag-drop="onDragDrop"
    ref="infoBox"
    style="width: 100%;"
    class="inlinestyletest"
  >
    <tr>
      <div
        class="test1"
        :style="{'backgroundColor': JSON.stringify(selectedDropWidget) == JSON.stringify(index) ? 'rgb(76, 185, 234)' : 'transparent'}"
      ></div>

      <div
        @click="$emit('selected')"
        :id="JSON.stringify(index)"
        class="hoverBox"
        :style=" {'z-index': JSON.stringify(selectedWidget) == JSON.stringify(index) ? 20 : 8,'border': JSON.stringify(widgetHoverIndex) == JSON.stringify(index) && selectedWidget.parentRow == null ? '#7aabc0 solid 2px' : JSON.stringify(selectedWidget) == JSON.stringify(index) ? '#4CB9EA solid 2px' : 'transparent solid 2px'}"
      >
        <b-btn
          size="sm"
          class="delBtn"
          @click="$emit('DeleteWidget')"
          v-if="JSON.stringify(selectedWidget) == JSON.stringify(index)"
        >
          <span class="ti-trash"></span>
        </b-btn>
      </div>
      <table
        style="max-width:600px; min-width:600px"
        :style="{'margin': '0px auto', 'background-image': !this.widgetType[this.index.parentRow].width ? 'url(' + this.widgetType[this.index.parentRow].imgurl + ')' : '', 'background-repeat': this.widgetType[this.index.parentRow].repeat, 'background-position': this.widgetType[this.index.parentRow].position}"
        id="container3"
        class="item"
        cellspacing="0"
        cellpadding="0"
        border="0"
        :bgcolor="NewStyle[2].cbgcolor"

      >
        <slot>
          <div>nothing inside parentRow</div>
        </slot>
      </table>

      <!-- url(this.widgetType[this.index.parentRow].imgurl) -->

      <!-- <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>-->
    </tr>
  </table>
</template>

<script>
export default {
  name: "parentRowWidget",
  data: function() {
    return {
      inputText: "",
      hover: false,
      highlight: false,
    };
  },
  props: {
    widgetType: Array,
    NewStyle: {
      type: Array
    },
    selectedWidget: {
      type: Object
    },
    index: {
      type: Object
    },
    widgetDidMove: {
      type: Boolean
    },
    isDraging: {
      type: Boolean
    },
    hasDragEnded: {
      type: Boolean
    },
    selectedDropWidget: {
      type: Object
    },
    widgetHoverIndex: {
      type: Object
    },
    dragWidgetType: {
      type: String
    }
  },
  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"
        // "--background-color": "white",
      };
    }
  },
  updated() {
    //console.log(this.selectedWidget.parentRow)
  },
  methods: {
    onDragEnter() {
      if (this.dragWidgetType == "parentRow") {
        //   console.log("entered");
        this.highlight = true;
        this.$emit("changeSelectedDropWidget", this.index);
      }
    },
    onDragLeave() {
      // console.log("left");
      // this.highlight = false;
    },
    onDragDrop() {}

    // updateWidgetHoverIndex(index, event) {
    //   // console.log('parent')
    //   // console.log(JSON.stringify(this.widgetHoverIndex) == JSON.stringify(this.index))
    //   // console.log(this.index)
    //   // console.log(this.widgetHoverIndex['parentRow'])
    //   //console.log(JSON.parse(event));
    //   if (event != "" && event == JSON.stringify(index)) {
    //     //console.log("ture");
    //     this.$emit("updateWidgetHoverIndex", index);
    //   }
    // }
  }
};
</script>

<style scoped>
.item {
  /* background-image: url(../../../assets/logo.png); */
}

.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); */
}

#container3 {
  background-color: var(--cbg-color);
}

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>
