<template>
    <div class="table-zone">
        <p class="object-title mb5">폰트 설정</p>
        <ul>
            <!-- <li class="mb10">
                <div class="flex">
                    <div class="flex60 pd0">
                        <select class="full-select" v-model="fontStyle.font">
                            <option v-for="(item, indx) in fontList" :key="indx" :value="item.cmmnCode"> {{ item.codeNm
                                }}</option>
                        </select>
                    </div>
                    <div class="flex40">
                        <div class="font-size flex justify-start align-center no-gutter">
                            <div class="down flex20">
                                <button @click="down">-</button>
                            </div>
                            <div class="flex55">
                                <input type="text" class="size-input full-input" v-model="fontStyle.font_size">
                            </div>
                            <div class="up flex20">
                                <button @click="up">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </li> -->
            <li class="mb10">
                <div class="flex align-center">
                    <div v-for="(style, idx) in fontStyleList" :key="idx" class="check-group ml5">
                        <input type="checkbox" name="" :id="style.name" class="style-input">
                        <label :for="style.name" class="style-label">
                            <svg-icon type="mdi" :path="style.iconPath"></svg-icon>
                        </label>
                    </div>
                </div>
            </li>
            <li class="mb10">
                <div class="flex align-center">
                    <div v-for="(HorSort, idx) in fontHorSort" :key="idx" class="check-group ml5">
                        <input type="radio" name="horizontalAlign" :id="HorSort.name" class="style-input">
                        <label :for="HorSort.name" class="style-label">
                            <svg-icon type="mdi" :path="HorSort.iconPath"></svg-icon>
                        </label>
                    </div>
                </div>
            </li>
            <li class="mb10">
                <div class="flex align-center">
                    <div v-for="(verSort, idx) in fontVerSort" :key="idx" class="check-group ml5">
                        <input type="radio" name="verticalAlign" :id="verSort.name" class="style-input">
                        <label :for="verSort.name" class="style-label">
                            <svg-icon type="mdi" :path="verSort.iconPath"></svg-icon>
                        </label>
                    </div>
                </div>
            </li>
            <li class="mb10">
                <input type="color" name="" id="" class="color-picker flex align-center" v-model="fontSelectedColor" />
            </li>
        </ul>
    </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatStrikethroughVariant, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignRight, mdiFormatAlignTop, mdiFormatAlignMiddle, mdiFormatAlignBottom } from '@mdi/js';

export default {
    props: {
        fontStyle: {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            fontStyleList: [
                { iconPath: mdiFormatBold, active: false, name: 'bold' },
                { iconPath: mdiFormatItalic, active: false, name: 'italic' },
                { iconPath: mdiFormatUnderline, active: false, name: 'underline' },
                { iconPath: mdiFormatStrikethroughVariant, active: false, name: 'centerline' },
            ],
            fontHorSort: [
                { iconPath: mdiFormatAlignLeft, active: false, name: 'left' },
                { iconPath: mdiFormatAlignCenter, active: false, name: 'center' },
                { iconPath: mdiFormatAlignRight, active: false, name: 'right' },
            ],
            fontVerSort: [
                { iconPath: mdiFormatAlignTop, active: false, name: 'top' },
                { iconPath: mdiFormatAlignMiddle, active: false, name: 'middle' },
                { iconPath: mdiFormatAlignBottom, active: false, name: 'bottom' },
            ],
            fontSize: 16,
            fontSelectedColor: '#333333',
            fontIsColorChanged: false,
            fontColorList: [],
            fontList: []
        }
    },
    methods: {
        up: function () {
            this.fontSize += 1;
        },
        down: function () {
            this.fontSize -= 1;
        },
    },
    watch: {
    },
    computed: {

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

    }
}
</script>