<template>
<div v-if="widgetType[selectedWidget].type == 'Text'">
    <div v-b-toggle.text class="vb-body-right-option pointer option-head">Text</div>
    <b-collapse id="text" visible>
        <div class="container vb-p-10">
            <!-- color -->
            <div class="row">
                <div class="col-md-6"><span class="font-12">Color</span></div>
                <div class="col-md-6"><span class="float-right"><colorpicker :color="bgcolor" v-model="bgcolor" /></span></div>
            </div>
            <!-- Color end -->
            <hr>
            <!-- 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 -->
        </div>
    </b-collapse>
</div>
</template>

<script>
export default {
    name: "text",
    props: {
        widgetType: {
            type: Array
        },
        selectedWidget: {
            type: Number
        }
    },
    data() {
        return {
            bgcolor:'#FFF'
        }
    }

}
</script>

<style>

</style>
