<template>
<div v-if="widgetType[selectedWidget].type == 'Image'">
    <div v-b-toggle.spaceing class="vb-body-right-option pointer option-head">Soaceing</div>
    <b-collapse id="spaceing" visible>
        <div class="container vb-p-10">
            <!-- text -->
            <div class="row">
                <div class="col-md-6"><span class="font-12">Text Align</span></div>
                <div class="col-md-6">
                    <span class="float-right">
                        <b-btn-group size="sm">
                            <b-btn><span class="ti-align-justify"></span></b-btn>
                    <b-btn><span class="ti-align-right"></span></b-btn>
                    <b-btn><span class="ti-align-center"></span></b-btn>
                    <b-btn><span class="ti-align-left"></span></b-btn>
                    </b-btn-group>
                    </span>
                </div>
            </div>
            <!-- text end -->
            <hr>
            <!-- line height -->
            <div class="row">
                <div class="col-md-6"><span class="font-12">Line Height</span></div>
                <div class="col-md-6">
                    <span class="float-right">
                        <b-btn-group>
                            <b-btn size="sm" v-on:click="subtractone(padding)">-</b-btn>
                            <b-btn size="sm">100%</b-btn>
                            <b-btn size="sm" v-on:click="addone(padding)">+</b-btn>
                        </b-btn-group>
                    </span>
                </div>
            </div>
            <!-- line height end -->
            <!-- border -->
            <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" :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="subtractone(padding)">-</b-btn>
                            <b-btn size="sm">{{padding}}</b-btn>
                            <b-btn size="sm" v-on:click="addone(padding)">+</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="subtractone(padding)">-</b-btn>
                                <b-btn size="sm">{{padding}}</b-btn>
                                <b-btn size="sm" v-on:click="addone(padding)">+</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="subtractone(padding)">-</b-btn>
                                <b-btn size="sm">{{padding}}</b-btn>
                                <b-btn size="sm" v-on:click="addone(padding)">+</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="subtractone(padding)">-</b-btn>
                                <b-btn size="sm">{{padding}}</b-btn>
                                <b-btn size="sm" v-on:click="addone(padding)">+</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="subtractone(padding)">-</b-btn>
                                <b-btn size="sm">{{padding}}</b-btn>
                                <b-btn size="sm" v-on:click="addone(padding)">+</b-btn>
                            </b-btn-group>
                        </div>
                    </div>
                </div>
            </div>
            <!-- border end -->
        </div>
    </b-collapse>
</div>
</template>

<script>
export default {
    name: "spaceing",
    props: {
        widgetType: {
            type: Array
        },
        selectedWidget: {
            type: Number
        }
    },
    data() {
        return {
            allborderselected: null,
            allborderoptions: [{
                    value: 'solid',
                    text: 'solid'
                },
                {
                    value: 'dotted',
                    text: 'Dotted'
                },
                {
                    value: 'dashed',
                    text: 'Dashed'
                },
            ],
            oneborderselected:[],
            padding: '',
            paddingoption: [{
                text: '',
                value: 'true'
            }],
            onebyselected: [], // Must be an array reference!
             borderoptions: [{
                text: '',
                value: 'true'
            }],
        }
    },
    methods: {
        addone(p) {
            this.padding = p + 1
        },
        subtractone(p) {
            if (p > 0) {
                this.padding = p - 1
            }
        }
    }

}
</script>

<style>

</style>
