<template>
<div>
    <div class="row">
        <div class="col-md-6">
            <div><span class="font-12">border Width</span></div>
            <b-btn-group>
                <b-btn size="sm" v-on:click="formBody.borderWidth > 0 ? --formBody.borderWidth : formBody.borderWidth">-</b-btn>
                <b-btn size="sm">{{formBody.borderWidth}}</b-btn>
                <b-btn size="sm" v-on:click="++formBody.borderWidth">+</b-btn>
            </b-btn-group>
        </div>
        <div class="col-md-6">
            <div><span class="font-12">Border Color</span></div>
            <colorpicker :color="formBody.borderColor" v-model="formBody.borderColor" />
        </div>
    </div>
    <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.borderType" :options="borderOptions"  size="sm" class="vb-mB-5" />
            </span>
        </div>
        <div class="col-md-6" v-if="formBody.borderActive">
            <div><span class="font-12">Border Active</span></div>
            <colorpicker :color="formBody.borderActive" v-model="formBody.borderActive" />
        </div>
    </div>
</div>
</template>

<script>
export default {
    props:{
        formBody:Object,
    },
    data(){
        return{
            borderOptions: [{
                    value: 'none',
                    text: 'None'
                },
                {
                    value: 'dotted',
                    text: 'Dotted'
                },
                {
                    value: 'dashed',
                    text: 'Dashed'
                },
                {
                    value: 'solid',
                    text: 'Solid'
                },
                {
                    value: 'double',
                    text: 'Double'
                },
                {
                    value: 'groove',
                    text: 'Groove'
                },
                {
                    value: 'ridge',
                    text: 'Ridge'
                },
                {
                    value: 'outset',
                    text: 'Outset'
                },
                {
                    value: 'hidden',
                    text: 'Hidden'
                }
            ],
        }
    }
}
</script>

<style>

</style>
