<template>
  <div>
    <div
      v-if="widgetData.type == 'single_input_widget' || widgetData.type == 'text_area_widget' || widgetData.type == 'widdate' || widgetData.type == 'widtime'"
    >
      <div class="vb-body-right-option pointer option-head">Form Design</div>

      <div class="container vb-p-10">
        <!-- Link -->
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Size</span>
            </div>
            <span class>
              <b-form-select
                v-model="widgetData.style.size"
                size="sm"
                class="vb-mB-5"
                :options="formElementSize"
              />
            </span>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Border Radius</span>
            </div>
            <div>
              <b-btn-group>
                <b-btn
                  size="sm"
                  v-on:click="widgetData.style.borderRadius > 0 ? --widgetData.style.borderRadius : widgetData.style.borderRadius"
                >-</b-btn>
                <b-btn size="sm">{{widgetData.style.borderRadius}}</b-btn>
                <b-btn size="sm" v-on:click="++widgetData.style.borderRadius">+</b-btn>
              </b-btn-group>
            </div>
          </div>
        </div>
        <borderTool :formBody="widgetData.style.formBody" />
        <div class="row" v-if="widgetData.style.formBody.rows">
          <div class="col-md-6">
            <div>
              <span class="font-12">Textarea Row</span>
            </div>
            <div>
              <b-btn-group>
                <b-btn
                  size="sm"
                  v-on:click="widgetData.style.formBody.rows > 3 ? --widgetData.style.formBody.rows : widgetData.style.formBody.rows"
                >-</b-btn>
                <b-btn size="sm">{{widgetData.style.formBody.rows}}</b-btn>
                <b-btn size="sm" v-on:click="++widgetData.style.formBody.rows">+</b-btn>
              </b-btn-group>
            </div>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Textarea Max Row</span>
            </div>
            <div>
              <b-btn-group>
                <b-btn
                  size="sm"
                  v-on:click="widgetData.style.formBody.maxRows > widgetData.style.formBody.rows ? --widgetData.style.formBody.maxRows : widgetData.style.formBody.maxRows"
                >-</b-btn>
                <b-btn size="sm">{{widgetData.style.formBody.maxRows}}</b-btn>
                <b-btn size="sm" v-on:click="++widgetData.style.formBody.maxRows">+</b-btn>
              </b-btn-group>
            </div>
          </div>
        </div>

        <!-- link end -->
      </div>
    </div>
    <div v-else-if="widgetData.type == 'radiogroup_widget' || widgetData.type == 'checkbox_widget'">
      <div class="vb-body-right-option pointer option-head">Form Design</div>

      <div class="container vb-p-10">
        <!-- Link -->
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Box Style</span>
            </div>
            <span class>
              <select v-model="widgetData.style.boxStyle" class="form-control form-control-sm">
                <option
                  v-for="(style, index) in boxStyle"
                  :key="index"
                  :value="style['value']"
                >{{style['text']}}</option>
              </select>
            </span>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Font Size</span>
            </div>
            <div>
              <form>
                <div class="form-group">
                  <input
                    type="range"
                    class="form-control-range"
                    id="formControlRange"
                    v-model="widgetData.style.size"
                  />
                </div>
              </form>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Box Type</span>
            </div>
            <span class>
              <select v-model="widgetData.style.boxType" class="form-control form-control-sm">
                <option
                  v-for="(style, index) in boxType"
                  :key="index"
                  :value="style['value']"
                >{{style['text']}}</option>
              </select>
            </span>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12 right-45">Radio Button Color</span>
            </div>
            <span class>
              <select v-model="widgetData.style.boxColor" class="form-control form-control-sm">
                <option
                  v-for="(style, index) in boxColor"
                  :key="index"
                  :value="style['value']"
                >{{style['text']}}</option>
              </select>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <span class="font-12">Border Options</span>
          </div>
          <div class="col-md-6">
            <span class="float-right">
              <div class="custom-control custom-switch">
                <input
                  v-model="widgetData.style.boxborder"
                  type="checkbox"
                  class="custom-control-input"
                  id="customSwitch1"
                />
                <label class="custom-control-label" for="customSwitch1"></label>
              </div>
            </span>
          </div>
        </div>
        <!-- link end -->
      </div>
    </div>
  </div>
</template>

<script>
import borderTool from "./common/border-tool.vue";
export default {
  components: {
    borderTool
  },
  props: {
    widgetData: Object
  },
  data() {
    return {
      boxColor: [
        {
          value: "info",
          text: "Info"
        },
        {
          value: "success",
          text: "Success"
        },
        {
          value: "danger",
          text: "danger"
        },
        {
          value: "primary",
          text: "Primary"
        },
        {
          value: "warning",
          text: "Warning"
        },
        {
          value: "info-o",
          text: "Info Outline"
        },
        {
          value: "success-o",
          text: "Success Outline"
        },
        {
          value: "danger-o",
          text: "danger Outline"
        },
        {
          value: "primary-o",
          text: "Primary Outline"
        },
        {
          value: "warning-o",
          text: "Warning Outline"
        }
      ],
      boxStyle: [
        {
          value: "p-default p-round p-fill",
          text: "Fill Round"
        },
        {
          value: "p-default p-curve p-fill",
          text: "Fill Curve"
        },
        {
          value: "p-default p-switch p-fill",
          text: "Fill Switch"
        },
        {
          value: "p-default p-thick",
          text: "Thick box"
        },
        {
          value: "p-default p-round p-thick",
          text: "Thick Round"
        },
        {
          value: "p-default p-curve p-thick",
          text: "Thick Curve"
        },
        {
          value: "p-switch p-thick",
          text: "Thick Switch"
        },
        {
          value: "p-default p-fill",
          text: "fill box"
        },
        {
          value: "p-default p-round p-fill",
          text: "fill Round"
        },
        {
          value: "p-default p-curve p-fill",
          text: "fill Curve"
        },
        {
          value: "p-default p-fill",
          text: "fill Switch"
        }
      ],
      boxType: [
        {
          value: "",
          text: "None"
        },
        {
          value: "ti-check",
          text: "Check"
        },
        {
          value: "ti-location-arrow",
          text: "Location"
        },
        {
          value: "ti-close",
          text: "Close"
        },
        {
          value: "ti-plus",
          text: "Plus"
        },
        {
          value: "ti-time",
          text: "time"
        },
        {
          value: "ti-hand-point-right",
          text: "right Hand"
        }
      ],
      formElementSize: [
        {
          value: "sm",
          text: "Small"
        },
        {
          value: "md",
          text: "Medium"
        },
        {
          value: "lg",
          text: "Large"
        }
      ]
    };
  }
};
</script>

<style>
</style>
