<template>
<div v-if="selectedWidget.row == null ? false : widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'buttonWidget'">
    <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">
            <div class="row">
                <div class="col-md-6">
                    <span class="font-12">Button Text</span>
                </div>
                <div class="col-md-6">
                    <span class="font-12">Font size</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <b-form-input size="sm" type="text" v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].value.btnText" />
                </div>
                <div class="col-md-6">
                    <b-form-select size="sm" v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[3].size.fsize" :options="fontOption"></b-form-select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <span class="font-12">Button Link</span>
                </div>
                <div class="col-md-6">
                    <!-- <span class="font-12">Font Family</span> -->
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <b-form-input size="sm" type="text" v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].value.buttonLink" />
                </div>
                <div class="col-md-6">
                   <!-- <b-form-select size="sm" v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].style[3].font.fontFamily" :options="fontFamilyOption"></b-form-select> -->
                </div>
            </div>
        </div>
    </b-collapse>
</div>
</template>

<script>
export default {
    props: {
        widgetType: {
            type: Array
        },
        selectedWidget: {
            type: Object
        }
    },
    data() {
        return {
            fontOption: [{
                    value: 10,
                    text: '10px'
                },
                {
                    value: 11,
                    text: '11px'
                },
                {
                    value: 12,
                    text: '12px'
                },
                {
                    value: 14,
                    text: '14px'
                },
                {
                    value: 16,
                    text: '16px',
                },
                {
                    value: 18,
                    text: '18px',
                },
                {
                    value: 24,
                    text: '24px',
                },
                {
                    value: 36,
                    text: '36px',
                },
                {
                    value: 48,
                    text: '48px',
                },
                {
                    value: 60,
                    text: '60px',
                },
                {
                    value: 72,
                    text: '72px',
                }
            ],
             fontFamilyOption: [{
                    value: null,
                    text: 'Please Select Fonts'
                },
                {
                    value: 'Arial',
                    text: 'Arial'
                },
                {
                    value: 'Helveticab',
                    text: 'Helvetica'
                },
                {
                    value: 'Times New Roman',
                    text: 'Times New Roman'
                },
                {
                    value: 'Times',
                    text: 'Times',
                },
                {
                    value: 'Courier New',
                    text: 'Courier New',
                },
                {
                    value: 'Courier',
                    text: 'Courier',
                },
                {
                    value: 'Georgia',
                    text: 'Georgia',
                },
                {
                    value: 'Palatino',
                    text: 'Palatino',
                },
                {
                    value: 'Garamond',
                    text: 'Garamond',
                }
            ],
        };
    }
};
</script>

<style>
</style>
