<template>
<div v-if="widgetType[selectedWidget].type == 'Image'">
    <div v-b-toggle.rowproperties class="vb-body-right-option pointer option-head">Row Properties</div>
    <b-collapse id="rowproperties" visible>
        <div class="container vb-p-10">
            <div class="row">
                <div class="col-md-6"><span class="font-12">Background Color</span></div>
                <div class="col-md-6"><span class="float-right"><colorpicker :color="bgcolor" v-model="bgcolor" /></span></div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6"><span class="font-12">Content Background Color</span></div>
                <div class="col-md-6"><span class="float-right"><colorpicker :color="cbgcolor" v-model="cbgcolor" /></span></div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6"><span class="font-12">Background Image</span></div>
                <div class="col-md-6"><span class="float-right"><b-btn size="sm">SelectImage</b-btn></span></div>
            </div>
            <hr>
            <!-- padding -->
            <div class="row">
                <div class="col-md-6"><span class="font-12">Pandding</span></div>
                <div class="col-md-6"><span class="float-right"><b-form-checkbox-group switches v-model="onebyselected" :options="paddingoption" /></span></div>
            </div>
            <div class="row vb-p-10"  v-if="onebyselected.length == 0">
                <div class="col-md-6">
                    <div><span class="font-12">All Sides</span></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-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-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-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-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>
            <!-- paddding end -->
        </div>
    </b-collapse>
</div>
</template>

<script>
export default {
    name: "row-properties",
    props: {
        widgetType: {
            type: Array
        },
        selectedWidget: {
            type: Number
        }
    },
    data() {
        return {
            padding: 0,
            bgcolor: '#FFF',
            cbgcolor: '#FFF',
            onebyselected: [], // Must be an array reference!
            paddingoption: [{
                text: '',
                value: 'true'
            }, ]
        }
    },
    methods: {
        addone(p) {
            this.padding = p + 1
        },
        subtractone(p) {
            if (p > 0) {
                this.padding = p - 1
            }
        }
    }

}
</script>

<style>

</style>
