<template>
    <div class="toolbar-div">
        <div class="toolbar">
            <div class="toolbar-format" id="_toolbar_format">
                <div class="toolbar-button-lg">
                    <div>
                        <i class="mc-icon mc-icon-brush"></i>
                    </div>
                    <div>{{ format.label }}</div>
                </div>
            </div>

            <div class="toolbar-font">
                <div class="tool-bar-font-row-top">
                    <a :title="font.family.title" class="tool-button-font-family">
                        <select id="_toolbar_font_type">
                            <option v-for="(font, index) in font.family.source" :key="index" value="font.value">{{
                                font.display
                            }}</option>
                        </select>
                    </a>

                    <a :title="font.size.title" class="tool-button-font-size">
                        <select id="_toolbar_font_size">
                            <option v-for="(size, index) in font.size.source" :key="index" value>{{ size }}</option>
                        </select>
                    </a>
                </div>

                <div class="tool-bar-font-row-bottom">
                    <div class="print-picker-box toolbar-button" :title="font.color.title">
                        <div class="print-picker-box-inner" id="color_text_picker">
                            <div>
                                <i class="mc-icon mc-icon-font"></i>
                            </div>
                            <div id="color_text_span" class="selected-picker-color"></div>
                        </div>
                        <div id="color_text_select">
                            <i class="mc-icon mc-icon-arrow-down"></i>
                        </div>
                    </div>

                    <a id="_toolbar_bold" title="粗体" class="toolbar-button">
                        <i class="mc-icon mc-icon-bold"></i>
                    </a>
                    <a id="_toolbar_italic" title="斜体" class="toolbar-button">
                        <i class="mc-icon mc-icon-italic"></i>
                    </a>
                    <a id="_toolbar_under_line" title="下划线" class="toolbar-button">
                        <i class="mc-icon mc-icon-underline"></i>
                    </a>
                    <a id="_toolbar_strikethrough" title="删除线" class="toolbar-button">
                        <i class="mc-icon mc-icon-strike-through"></i>
                    </a>
                </div>
            </div>

            <div class="toolbar-align">
                <a
                    v-for="(button, index) in align"
                    :key="index"
                    class="toolbar-button"
                    :id="button.id"
                    :title="button.title"
                >
                    <i :class="getClassName(button.icon)"></i>
                </a>
            </div>

            <div class="toolbar-border">
                <a
                    v-for="(border, index) in border"
                    class="toolbar-button"
                    :key="index"
                    :id="border.id"
                    :title="border.title"
                >
                    <img :src="border.icon" />
                </a>
            </div>

            <div class="toolbar-line">
                <div class="toolbar-button-line-type" :title="line.type.label">
                    <select id="_toolbar_border_style">
                        <option v-for="(type, index) in line.type.source" :key="index" value="type.value">{{
                            type.display
                        }}</option>
                    </select>
                </div>

                <div class="toolbar-button-line-desc">
                    <div class="toolbar-button-line-thickness" :title="line.thickness.label">
                        <select id="_toolbar_border_size">
                            <option v-for="(thick, index) in line.thickness.source" :key="index" :value="thick">{{
                                thick
                            }}</option>
                        </select>
                    </div>

                    <div class="toolbar-button-line-color">
                        <div
                            class="print-picker-box toolbar-button"
                            v-for="(borderAndBg, index) in line.borderAndBackground"
                            :key="index"
                            :title="borderAndBg.title"
                        >
                            <div class="print-picker-box-inner" :id="borderAndBg.containerId">
                                <div>
                                    <i :class="getClassName(borderAndBg.selectedIcon)"></i>
                                </div>
                                <div :id="borderAndBg.selectedId" class="selected-picker-color"></div>
                            </div>
                            <div :id="borderAndBg.pickerId">
                                <i class="mc-icon mc-icon-arrow-down"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-for="(cell, index) in cells" :key="index" :class="cell.class" id="cell.id">
                <div class="toolbar-button-lg">
                    <div>
                        <i :class="getClassName(cell.icon)"></i>
                    </div>
                    <div>{{ cell.label }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import toolbar from '../../../../../../config/renderSet/actions/main/toolbar';
export default {
    data: () => ({ ...toolbar }),
    name: 'dic-toolbar',
    methods: {
        getClassName: (className) => `mc-icon ${className}`,
    },
};
</script>

<style lang="scss" scoped>
@import './_toolBar.scss';
</style>
