<template>
  <div>
    <div v-b-toggle.body class="vb-body-right-option pointer option-head">body</div>
    <b-collapse id="body" visible>
      <div class="container vb-p-10">
        <!-- Link -->
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Font Family</span>
            </div>
            <span class>
              <b-form-select
                v-model="formBody.fontType"
                :options="options"
                size="sm"
                class="vb-mB-5"
              />
            </span>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Background Color</span>
            </div>
            <colorpicker :color="formBody.backgroundcolor" v-model="formBody.backgroundcolor" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">max-width</span>
            </div>
            <b-btn-group>
              <b-btn
                size="sm"
                v-on:click="globalAdd('paddingLeft', formBody.maxWidth > 0 ? --formBody.maxWidth : formBody.maxWidth)"
              >-</b-btn>
              <b-btn size="sm">{{formBody.maxWidth}}</b-btn>
              <b-btn size="sm" v-on:click="globalAdd('paddingLeft', ++formBody.maxWidth)">+</b-btn>
            </b-btn-group>
          </div>
          <div class="col-md-6">
            <span class>
              <div>
                <span class="font-12">Postion</span>
              </div>
              <b-btn-group size="sm">
                <b-btn v-on:click="setposition('0 0 0 0')">
                  <span class="ti-align-left"></span>
                </b-btn>
                <b-btn v-on:click="setposition('0px auto')">
                  <span class="ti-align-center"></span>
                </b-btn>
                <b-btn v-on:click="setposition('0 0 0 auto')">
                  <span class="ti-align-right"></span>
                </b-btn>
              </b-btn-group>
            </span>
          </div>
        </div>
        <hr />
        <div class="row">
          <div class="col-md-6">
            <div>
              <span class="font-12">Padding Top and Bottom</span>
            </div>
            <b-btn-group>
              <b-btn
                size="sm"
                v-on:click="formBody.PaddingTB > 0 ? --formBody.PaddingTB : formBody.PaddingTB"
              >-</b-btn>
              <b-btn size="sm">{{formBody.PaddingTB}}</b-btn>
              <b-btn size="sm" v-on:click="++formBody.PaddingTB">+</b-btn>
            </b-btn-group>
          </div>
          <div class="col-md-6">
            <div>
              <span class="font-12">Inner Background</span>
            </div>
            <colorpicker :color="formBody.innerBackground" v-model="formBody.innerBackground" />
          </div>
        </div>
        <hr />
        <borderTool :formBody="formBody" />
        <!-- <hr> -->
        <!-- <div class="row">
            <div class="col-md-12">
                <b-input-group size="sm">
                    <b-input-group-text slot="prepend">URL</b-input-group-text>
                    <b-form-input />
                </b-input-group>
            </div>
        </div>-->
        <!-- link end -->
      </div>
    </b-collapse>
  </div>
</template>

<script>
import borderTool from "./common/border-tool.vue";
export default {
  name: "action",
  props: {
    formBody: Object
  },
  data() {
    return {
      options: [
        {
          value: null,
          text: "Please Select Fonts"
        },
        {
          value: "Arial",
          text: "Arial"
        },
        {
          value: "Helveticab",
          text: "Helvetica"
        },
        {
          value: "Times New Roman",
          text: "Times New Roman"
        },
        {
          value: "Times",
          text: "Times"
        },
        {
          value: "Courier New",
          text: "Courier New"
        },
        {
          value: "Courier",
          text: "Courier"
        },
        {
          value: "Georgia",
          text: "Georgia"
        },
        {
          value: "Palatino",
          text: "Palatino"
        },
        {
          value: "Garamond",
          text: "Garamond"
        }
      ]
    };
  },
  methods: {
    setposition(postion) {
      this.formBody.margain = postion;
    }
  },
  components: {
    borderTool
  }
};
</script>

<style>
</style>
