<template>
  <div
    v-if="selectedWidget.row == null ? false :  true"
  >
    <div v-b-toggle.color class="vb-body-right-option pointer option-head">Color</div>
    <b-collapse id="color" visible>
      <div class="container vb-p-10">
        <div>
          <div class="row">
            <div class="col-md-6">
              <div>
                <span class="font-12">Background Color</span>
              </div>
              <div>
                <colorpicker
                  :color="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[0]"
                  v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[0]"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- <div id="buttonWidget" v-if="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'socialWidget'">
          <div class="row">
            <div class="col-md-6">
              <div>
                <span class="font-12">Background Color</span>
              </div>
              <div>
                <colorpicker
                  :color="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[0]"
                  v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[0]"
                />
              </div>
            </div>
          </div>
        </div> -->

      </div>
    </b-collapse>
  </div>
</template>

<script>
export default {
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {};
  },
};
</script>

<style>
</style>
