<template>
  <table style="width:100%">
    <tbody>
      <tr style="position: relative">
        <td v-html="NewStyle[2].code"></td>
      </tr>
    </tbody>
  </table>
</template>





<script>
export default {
  name: "buttonWidget",
  data: function() {
    return {
      inputText: "",
      hover: false,
      highlight: false,
      top: false,
      bottom: false
    };
  },
  props: {
    NewStyle: {
      type: Array
    },
    selectedWidget: {
      type: Object
    },
    index: {
      type: Object
    },
    widgetDidMove: {
      type: Boolean
    },
    isDraging: {
      type: Boolean
    },
    hasDragEnded: {
      type: Boolean
    },
    selectedDropWidget: {
      type: Object
    },
    widgetHoverIndex: {
      type: Object
    },
    widgetType: {
      type: Array
    },
    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"
      };
    }
  },

  computed: {
    cssProps() {
      return {
        "--bg-color": this.NewStyle[0],
        padding: this.NewStyle[1]["padding"] + "px",
        paddingLeft: this.NewStyle[1]["paddingLeft"] + "px",
        paddingRight: this.NewStyle[1]["paddingRight"] + "px",
        paddingTop: this.NewStyle[1]["paddingTop"] + "px",
        paddingBottom: this.NewStyle[1]["paddingBottom"] + "px"
      };
    }
  },
  methods: {
    onDragOver(value) {
      this.highlight = true;
      if (value == "top") {
        this.top = true;
        this.bottom = false;
        this.$emit("changeSelectedDropWidget", this.index);
        this.$emit("addToBottom", false);
      } else if (
        this.widgetType[this.index.parentRow].columns[this.index.column].rows
          .length -
          1 ==
        this.index.row
      ) {
        this.$emit("changeSelectedDropWidget", this.index);
        this.$emit("addToBottom", true);
        this.bottom = true;
        this.top = false;
      }
    },
    // onDragEnter() {
    //   //   console.log("entered");
    //   this.highlight = true;
    //   this.$emit("changeSelectedDropWidget", this.index, false]);
    // },

    updateWidgetHoverIndex(index) {
      //    console.log('child')
      //   console.log(JSON.stringify(this.widgetHoverIndex) == JSON.stringify(this.index))
      //   console.log(this.index)
      //   console.log(this.widgetHoverIndex)
      this.$emit("updateWidgetHoverIndex", index);
    }
  }
};
</script>

<style scoped>
/* #childContainer {
  padding: var(--padding);
} */
.buttonStyle {
  border: none;
  line-height: 120%;
  display: inline-block;
  text-decoration: none;
  position: relative;
}
.hoverParent {
  z-index: 12;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hoverChild1 {
  z-index: 12;
  top: 0px;
  width: 100%;
  height: 50%;
  position: absolute;
}

.hoverChild2 {
  z-index: 12;
  bottom: 0px;
  width: 100%;
  height: 50%;
  position: absolute;
}
.dropHighlight {
  height: 5px;
  width: 100%;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
}

.dropHighlightBottom {
  height: 5px;
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: 0px;
  left: 0px;
}
.hoverBox {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}

.textFieldStyle {
  margin: 0px;
  position: relative;
  /* background-color: var(--bg-color);
    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;
}
</style>
