<template>
<div v-if="widgetType[selectedWidget].type == 'Image'">
    <div v-b-toggle.colproperties class="vb-body-right-option pointer option-head">Col Properties</div>
    <b-collapse id="colproperties" visible>
        <div class="">
            <b-tabs content-class="mt-3" small>
                <b-tab title="Columns 1" active>
                    <div class="container">
                        <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>
                        <!-- 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 -->
                        <hr>
                        <!-- 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-tab>
                <b-tab title="Columns 2">
                    <p>I'm the second tab content</p>
                </b-tab>
                <b-tab title="Columns 3">
                    <p>Disabled tab!</p>
                </b-tab>
                <b-tab title="Columns 4">
                    <p>Disabled tab!</p>
                </b-tab>
            </b-tabs>
        </div>
    </b-collapse>
</div>
</template>

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

<style>

</style>
