<template>
  <div>
    <div class="row">
      <div class="col-md-6">
        <span class="font-12">Border</span>
      </div>
      <div class="col-md-6">
        <span class="float-right">
          <b-form-checkbox-group
            switches
            v-model="oneborderselected"
            @change="setAllValues($event)"
            :options="borderoptions"
          />
        </span>
      </div>
    </div>
    <div class="row vb-p-10" v-if="oneborderselected.length == 0">
      <div class="col-md-6">
        <div>
          <span class="font-12">All Sides</span>
        </div>
        <div>
          <b-form-select
            v-model="allborderselected"
            :options="allborderoptions"
            size="sm"
            class="vb-mB-5"
          />
        </div>
        <div>
          <b-btn-group>
            <b-btn size="sm" v-on:click="globalAdd('border', false)">-</b-btn>
            <b-btn size="sm">
              {{this.widgetType[this.selectedWidget.parentRow].columns[
              this.index
              ].style[4]["border"].split(" ")[2]}}
            </b-btn>
            <b-btn size="sm" v-on:click="globalAdd('border', true)">+</b-btn>
          </b-btn-group>
        </div>
      </div>
    </div>
    <div class="vb-p-10" v-else>
      <div class="row">
        <div class="col-md-6">
          <div>
            <span class="font-12">Top</span>
          </div>
          <div>
            <b-form-select
              v-model="allborderselected"
              :options="allborderoptions"
              size="sm"
              class="vb-mB-5"
            />
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="globalAdd('borderTop', false)">-</b-btn>
              <b-btn size="sm">
                {{this.widgetType[this.selectedWidget.parentRow].columns[
                this.index
                ].style[4]["borderTop"].split(" ")[2]}}
              </b-btn>
              <b-btn size="sm" v-on:click="globalAdd('borderTop', true)">+</b-btn>
            </b-btn-group>
          </div>
        </div>
        <div class="col-md-6">
          <div>
            <span class="font-12">Right</span>
          </div>
          <div>
            <b-form-select
              v-model="allborderselected"
              :options="allborderoptions"
              size="sm"
              class="vb-mB-5"
            />
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="globalAdd('borderRight', false)">-</b-btn>
              <b-btn size="sm">
                {{this.widgetType[this.selectedWidget.parentRow].columns[
                this.index
                ].style[4]["borderRight"].split(" ")[2]}}
              </b-btn>
              <b-btn size="sm" v-on:click="globalAdd('borderRight', true)">+</b-btn>
            </b-btn-group>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div>
            <span class="font-12">Left</span>
          </div>
          <div>
            <b-form-select
              v-model="allborderselected"
              :options="allborderoptions"
              size="sm"
              class="vb-mB-5"
            />
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="globalAdd('borderLeft',false)">-</b-btn>
              <b-btn size="sm">
                {{this.widgetType[this.selectedWidget.parentRow].columns[
                this.index
                ].style[4]["borderLeft"].split(" ")[2]}}
              </b-btn>
              <b-btn size="sm" v-on:click="globalAdd('borderLeft', true)">+</b-btn>
            </b-btn-group>
          </div>
        </div>
        <div class="col-md-6">
          <div>
            <span class="font-12">Bottom</span>
          </div>
          <div>
            <b-form-select
              v-model="allborderselected"
              :options="allborderoptions"
              size="sm"
              class="vb-mB-5"
            />
          </div>
          <div>
            <b-btn-group>
              <b-btn size="sm" v-on:click="sglobalAdd('borderBottom', false)">-</b-btn>
              <b-btn size="sm">
                {{this.widgetType[this.selectedWidget.parentRow].columns[
                this.index
                ].style[4]["borderBottom"].split(" ")[2]}}
              </b-btn>
              <b-btn size="sm" v-on:click="globalAdd('borderBottom', true)">+</b-btn>
            </b-btn-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "border",
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      border: this.widgetType[this.selectedWidget.parentRow].columns[this.index]
        .style[4]["border"],
      borderRight: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[4]["borderRight"],
      borderLeft: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[4]["borderLeft"],
      borderTop: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[4]["borderTop"],
      BorderBottom: this.widgetType[this.selectedWidget.parentRow].columns[
        this.index
      ].style[4]["borderBottom"],

      onebyselected: [], // Must be an array reference!
      oneborderselected: [],
      allborderselected: null,
      allborderoptions: [
        {
          value: "solid",
          text: "solid"
        },
        {
          value: "dotted",
          text: "Dotted"
        },
        {
          value: "dashed",
          text: "Dashed"
        }
      ],
      borderoptions: [
        {
          text: "",
          value: "true"
        }
      ],
      paddingoption: [
        {
          text: "",
          value: "true"
        }
      ]
    };
  },
  methods: {
    setAllValues(value) {
      if (value[0]) {
        this.paddingRight = this.padding;
        this.paddingLeft = this.padding;
        this.paddingTop = this.padding;
        this.paddingBottom = this.padding;

        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingRight"] = this.paddingRight;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingLeft"] = this.paddingLeft;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingTop"] = this.paddingTop;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["paddingBottom"] = this.paddingBottom;
      } else {
        this.padding = this.paddingTop;
        this.widgetType[this.selectedWidget.parentRow].columns[
          this.index
        ].style[1]["padding"] = this.padding;
      }
    },
    globalAdd(name, value) {
      switch (name) {
        case "border":
          var splitBorder = this.widgetType[
            this.selectedWidget.parentRow
          ].columns[this.index].style[4]["border"].split(" ");
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[4]["border"] =
            splitBorder[0] +
            " " +
            splitBorder[1] +
            " " +
            (value
              ? parseInt(splitBorder[2]) + 1
              : parseInt(splitBorder[2]) >= 1
              ? parseInt(splitBorder[2]) - 1
              : parseInt(splitBorder[2])
            ).toString();
          break;
        case "borderRight":
          var splitBorder = this.widgetType[
            this.selectedWidget.parentRow
          ].columns[this.index].style[4]["borderRight"].split(" ");
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[4]["borderRight"] =
            splitBorder[0] +
            " " +
            splitBorder[1] +
            " " +
            (value
              ? parseInt(splitBorder[2]) + 1
              : parseInt(splitBorder[2]) >= 1
              ? parseInt(splitBorder[2]) - 1
              : parseInt(splitBorder[2])
            ).toString();
          break;
        case "borderLeft":
          var splitBorder = this.widgetType[
            this.selectedWidget.parentRow
          ].columns[this.index].style[4]["borderLeft"].split(" ");
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[4]["borderLeft"] =
            splitBorder[0] +
            " " +
            splitBorder[1] +
            " " +
            (value
              ? parseInt(splitBorder[2]) + 1
              : parseInt(splitBorder[2]) >= 1
              ? parseInt(splitBorder[2]) - 1
              : parseInt(splitBorder[2])
            ).toString();
          break;
        case "borderTop":
          var splitBorder = this.widgetType[
            this.selectedWidget.parentRow
          ].columns[this.index].style[4]["borderTop"].split(" ");
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[4]["borderTop"] =
            splitBorder[0] +
            " " +
            splitBorder[1] +
            " " +
            (value
              ? parseInt(splitBorder[2]) + 1
              : parseInt(splitBorder[2]) >= 1
              ? parseInt(splitBorder[2]) - 1
              : parseInt(splitBorder[2])
            ).toString();

          break;
        case "borderBottom":
          var splitBorder = this.widgetType[
            this.selectedWidget.parentRow
          ].columns[this.index].style[4]["borderBottom"].split(" ");
          this.widgetType[this.selectedWidget.parentRow].columns[
            this.index
          ].style[4]["borderBottom"] =
            splitBorder[0] +
            " " +
            splitBorder[1] +
            " " +
            (value
              ? parseInt(splitBorder[2]) + 1
              : parseInt(splitBorder[2]) >= 1
              ? parseInt(splitBorder[2]) - 1
              : parseInt(splitBorder[2])
            ).toString();
          break;

        default:
        // code block
      }
    }
  }
};
</script>



