<template>
    <div class="table-zone">
        <p class="object-title mb5">선</p>
        <ul>
            <li class="mb10">
                <div class="flex align-center">
                    <div class="flex50 pd0">
                        <select class="full-select" v-model="border.border_style">
                            <option value="none">없음</option>
                            <option v-for="(item, indx) in cellList" :key="indx" :value="item.codeNm">
                                <!-- <span :class="['option-img', item.codeNm]"></span> -->
                                {{ item.codeNm }}
                            </option>
                        </select>
                    </div>
                </div>
            </li>
            <li class="mb10">
                <div class="font-size flex justify-between align-center">
                    <div v-for="(item, idx) in borderStyles" :key="idx" class="flex justify-between flex50 align-center mt5 no-gutter pl0">
                        <span class="flex20">
                            <img :src="item.src" alt="" class="content-box">
                        </span>
                        <div class="flex75">
                            <input type="text" class="full-input " v-model="border.border_item[idx].border_width" >
                            <!-- v-model="border.border_item[0].border_width"> -->
                        </div>
                    </div>
                </div>
            </li>
            <li class="mb10">
                <div class="font-size flex justify-between align-center">
                    <div class="flex justify-between flex50 align-center mt5 no-gutter pl0">
                        <span class="flex20"><img src="../../../resources/img/icon/lt.png" alt=""
                                class="content-box"></span>
                        <div class="flex75"><input type="text" class="full-input " v-model="border.border_item[0].border_radius">
                        </div>
                    </div>
                    <div class="flex justify-between flex50 align-center mt5 no-gutter pr0">
                        <div class="flex75"><input type="text" class="full-input " v-model="border.border_item[1].border_radius">
                        </div>
                        <span class="flex20"><img src="../../../resources/img/icon/rt.png" alt=""
                                class="content-box"></span>
                    </div>
                    <div class="flex justify-between flex50 align-center mt5 no-gutter pl0">
                        <span class="flex20"><img src="../../../resources/img/icon/lb.png" alt=""
                                class="content-box"></span>
                        <div class="flex75"><input type="text" name="" id="" class="full-input " v-model="border.border_item[2].border_radius">
                        </div>
                    </div>
                    <div class="flex justify-between flex50 align-center mt5 no-gutter pr0">
                        <div class="flex75"><input type="text" name="" id="" class="full-input " v-model="border.border_item[3].border_radius">
                        </div>
                        <span class="flex20"><img src="../../../resources/img/icon/rb.png" alt=""
                                class="content-box"></span>
                    </div>
                </div>
            </li>
            <li class="mb10">
                <input type="color" class="color-picker" v-model="border.border_color" />
            </li>
        </ul>
    </div>
</template>

<script>
import { Background } from '@vue-flow/background';


export default {
    props: {
        borderStyle: {
            type: Object,
            default: null
        },
    },
    data() {
        return {

            border : this.borderStyle
            ,cellWidth: 1,
            cellRound: 0,
            cellSelectedColor: "#333333",
            cellIsColorChanged: false,
            fontColorList: [],
            cellColorList: [],
            cellList: [],
            borderStyles: [
                { src: require("../../../resources/img/icon/top.png"), name: "top" },
                { src: require("../../../resources/img/icon/right.png"), name: "right" },
                { src: require("../../../resources/img/icon/left.png"), name: "left" },
                { src: require("../../../resources/img/icon/bottom.png"), name: "bottom" },
            ]
        }
    },
    methods: {
        // addColorToList(type) {
        //     if (type === 'font') {
        //         this.fontColorList.push(this.fontSelectedColor);
        //     } else if (type === 'cell') {
        //         this.cellColorList.push(this.cellSelectedColor);
        //     }
        // },
        initCode: async function () {
            this.cellList = await this.$getCommonCode('CELL_STYLE');
        }
    },
    watch: {
        borderStyle : function(v){
            this.border = v;
        }
    },
    computed: {

    },
    components: {
    },
    mounted() {
        this.initCode();
    }
}
</script>