
<template>
    <div>
        <div class="table-zone">
            <p class="object-title mb5">타이틀 사용 여부</p>
            <ul>
                <li class="mb10">
                    <div class="input-container flex">
                        <label class="radio-label">
                            <input type="radio" name="comId+'use_at'" class="custom-radiobox" :value="true" v-model="component.sj_at">
                            <span>사용</span>
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="comId+'use_at'" class="custom-radiobox" :value="false" v-model="component.sj_at">
                            <span>사용안함</span>
                        </label>
                    </div>
                </li>
                
            </ul>
            <p class="object-title mb5">메인타이틀</p>
            <ul>
                <li class="mb10">
                    <input type="text" class="full-input" v-model="component.sj.main_sj" />                   
                </li>
            </ul>          
            <FontOption :fontStyle="component.sj.styleSheetMain.fontStyle" :title="'메인 '"/>       
            <p class="object-title mb5">서브타이틀</p>
            <ul>
                <li class="mb10">                    
                    <input type="text" class="full-input" v-model="component.sj.sub_sj" />
                </li>
            </ul>
             <FontOption :fontStyle="component.sj.styleSheetSub.fontStyle" :title="'서브 '" />        
        </div>
    </div>
</template>

<script>
import BackgroundOption from './BackgroundOption.vue';
import CellOption from './CellOption.vue';
import FontOption from './FontOption.vue';

export default {
    props: {       
        component: {
            type: Object,
            default: null
        },       
    },
    data() {
        return {
           comId: "comId_" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),             
           styleSheetMain : this.component.sj.styleSheetMain,
           styleSheetSub  : this.component.sj.styleSheetSub       
        }
    },
    methods: {
       

    },
    watch: {
        component : function(v){          
            this.styleSheetMain = v.sj.styleSheetMain;
            this.styleSheetSub  = v.sj.styleSheetSub;
        }
    },
    computed: {

    },
    components: {             
        'FontOption': FontOption
    },
    mounted() {
    },
}

</script>
