<template>
  <div v-if="selectedWidget.row == null">
    <div v-b-toggle.colproperties class="vb-body-right-option pointer option-head">Col Properties</div>
    <b-collapse id="colproperties" visible>
      <div class>
        <b-tabs content-class="mt-3" small>
          <b-tab title="Columns 1" active>
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <span class="font-12">Background Color</span>
                </div>
                <div class="col-md-6">
                  <span class="float-right">
                    <colorpicker
                      :color="widgetType[selectedWidget.parentRow].columns[0].style[3].bgcolor"
                      v-model="widgetType[selectedWidget.parentRow].columns[0].style[3].bgcolor"
                    />
                  </span>
                </div>
              </div>
              <hr>
              <!-- padding -->
              <padding :widgetType="widgetType" :selectedWidget="selectedWidget" :index="0"></padding>
              <!-- paddding end -->
              <hr>
              <!-- border -->
              <border :widgetType="widgetType" :selectedWidget="selectedWidget" :index="0"></border>
              <!-- border end -->
            </div>
          </b-tab>
          <b-tab title="Columns 2" v-if="this.widgetType[this.selectedWidget.parentRow].size >= 2">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <span class="font-12">Background Color</span>
                </div>
                <div class="col-md-6">
                  <span class="float-right">
                    <colorpicker
                      color="ffffff"
                      v-model="widgetType[selectedWidget.parentRow].columns[1].style[3].bgcolor"
                    />
                  </span>
                </div>
              </div>
              <hr>
              <!-- padding -->
              <padding :widgetType="widgetType" :selectedWidget="selectedWidget" :index="1"></padding>
              <!-- paddding end -->
              <hr>
              <!-- border -->
              <border :widgetType="widgetType" :selectedWidget="selectedWidget" :index="1"></border>
              <!-- border end -->
            </div>
          </b-tab>
          <b-tab title="Columns 3" v-if="this.widgetType[this.selectedWidget.parentRow].size >= 3">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <span class="font-12">Background Color</span>
                </div>
                <div class="col-md-6">
                  <span class="float-right">
                    <colorpicker
                      color="ffffff"
                      v-model="widgetType[selectedWidget.parentRow].columns[2].style[3].bgcolor"
                    />
                  </span>
                </div>
              </div>
              <hr>
              <!-- padding -->
              <padding :widgetType="widgetType" :selectedWidget="selectedWidget" :index="2"></padding>
              <!-- paddding end -->
              <hr>
              <!-- border -->
              <border :widgetType="widgetType" :selectedWidget="selectedWidget" :index="2"></border>
              <!-- border end -->
            </div>
          </b-tab>
          <b-tab title="Columns 4" v-if="this.widgetType[this.selectedWidget.parentRow].size == 4">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <span class="font-12">Background Color</span>
                </div>
                <div class="col-md-6">
                  <span class="float-right">
                    <colorpicker
                      color="ffffff"
                      v-model="widgetType[selectedWidget.parentRow].columns[3].style[3].bgcolor"
                    />
                  </span>
                </div>
              </div>
              <hr>
              <!-- padding -->
              <padding :widgetType="widgetType" :selectedWidget="selectedWidget" :index="3"></padding>
              <!-- paddding end -->
              <hr>
              <!-- border -->
              <border :widgetType="widgetType" :selectedWidget="selectedWidget" :index="3"></border>
              <!-- border end -->
            </div>
          </b-tab>
        </b-tabs>
      </div>
    </b-collapse>
  </div>
</template>

<script>
import padding from "./padding.vue";
import border from "./border.vue";

export default {
  name: "col-properties",
  components: {
    padding,
    border
  },
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {
      padding: 10,
      allborderselected: null,
      allborderoptions: [
        {
          value: "solid",
          text: "solid"
        },
        {
          value: "dotted",
          text: "Dotted"
        },
        {
          value: "dashed",
          text: "Dashed"
        }
      ],
      bgcolor1: "#FFF",
      cbgcolor: "#FFF",
      onebyselected: [], // Must be an array reference!
      oneborderselected: [],
      borderoptions: [
        {
          text: "",
          value: "true"
        }
      ],
      paddingoption: [
        {
          text: "",
          value: "true"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style>
</style>
