<template>
    <div style="border-bottom: 1px solid #e9eaec;line-height:1">
        <div class="iui-toolbar">
            <!--             <a href="javascript:void(0)"  @click="showReportOpenDlg" class="iui-toolbar-button iui-toolbar-icon-openfolder" title="打开报表文件"></a> -->
            <a
                href="javascript:void(0)"
                @click="preview"
                class="iui-toolbar-button iui-toolbar-icon-preview"
                title="预览"
            ></a>
            <!-- <a href="javascript:void(0)"  @click="showMenu('importXlsx')" class="iui-toolbar-button iui-toolbar-icon-impexcel" title="导入Excel模板文件"></a> -->
            <a
                href="javascript:void(0)"
                @click="save"
                class="iui-toolbar-button iui-toolbar-icon-save"
                title="保存"
            ></a>
            <!--             <a href="javascript:void(0)"  @click="showReportSaveAsDlg" class="iui-toolbar-button iui-toolbar-icon-saveas" title="另存为..."></a> -->
            <!-- <a href="javascript:void(0)"  @click="showMenu('previewPaged')" class="iui-toolbar-button iui-toolbar-icon-previewpage" title="分页预览"></a> -->
            <!--             <a href="javascript:void(0)"  @click="showMenu('undo')" class="iui-toolbar-button iui-toolbar-icon-undo" title="撤销"></a>
            <a href="javascript:void(0)"  @click="showMenu('redo')" class="iui-toolbar-button iui-toolbar-icon-redo" title="重做"></a>-->
            <a
                href="javascript:void(0)"
                @click="execCommand('mergeCell')"
                class="iui-toolbar-button iui-toolbar-icon-mergecell"
                title="合并/拆散"
            ></a>
            <span class="x-toolbar-input" style="width: 160px;">
                <Select v-model="fontFamily" @on-change="changeFontFamily">
                    <Option v-for="item in fontFamilies" :value="item" :key="item">{{item}}</Option>
                </Select>
            </span>
            <span class="x-toolbar-input" style="width: 100px;">
                <Select v-model="fontSize" @on-change="changeFontSize">
                    <Option v-for="i in 80" :value="i" :key="i">{{i}}</Option>
                </Select>
            </span>
            <span class="x-toolbar-input" style="padding-top:4px;">
                <i-Switch v-model="bold" @on-change="changeFontBold" size="large">
                    <span slot="open">加粗</span>
                    <span slot="close">加粗</span>
                </i-Switch>
            </span>
            <span class="x-toolbar-input" style="padding-top:4px;">
                <i-Switch v-model="italic" @on-change="changeFontItalic" size="large">
                    <span slot="open">斜体</span>
                    <span slot="close">斜体</span>
                </i-Switch>
            </span>
            <span class="x-toolbar-input" style="padding-top:4px;">
                <i-Switch v-model="underline" @on-change="changeFontUnderline" size="large">
                    <span slot="open">下划线</span>
                    <span slot="close">下划线</span>
                </i-Switch>
            </span>
            <span class="x-toolbar-input">
                <span>字体颜色</span>
                <ColorPicker v-model="forecolor" @on-change="changeForeColor" recommend>
                    <span>字体颜色</span>
                </ColorPicker>
            </span>
            <span class="x-toolbar-input">
                <span>背景颜色</span>
                <ColorPicker v-model="bgcolor" @on-change="changeBgColor" recommend>
                    <span>背景颜色</span>
                </ColorPicker>
            </span>
            <Dropdown class="x-toolbar-dropdown" @on-click="execCommand">
                <a class="x-toolbar-dropdown-button">
                    <i class="x-toolbar-dropdown-big x-icon-alignleft"></i>
                    <Icon type="arrow-down-b"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem name="alignLeft" class="x-menu-item">
                        <i class="x-menu-icon x-icon-alignleft"></i>
                        <span class="x-menu-text">左对齐</span>
                    </DropdownItem>
                    <DropdownItem name="alignCenter" class="x-menu-item">
                        <i class="x-menu-icon x-icon-aligncenter"></i>
                        <span class="x-menu-text">居中对齐</span>
                    </DropdownItem>
                    <DropdownItem name="alignRight" class="x-menu-item">
                        <i class="x-menu-icon x-icon-alignright"></i>
                        <span class="x-menu-text">右对齐</span>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
            <Dropdown class="x-toolbar-dropdown" @on-click="execCommand">
                <a class="x-toolbar-dropdown-button">
                    <i class="x-toolbar-dropdown-big x-icon-verticalaligntop"></i>
                    <Icon type="arrow-down-b"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem name="vAlignTop" class="x-menu-item">
                        <i class="x-menu-icon x-icon-verticalaligntop"></i>
                        <span class="x-menu-text">顶部对齐</span>
                    </DropdownItem>
                    <DropdownItem name="vAlignMiddle" class="x-menu-item">
                        <i class="x-menu-icon x-icon-verticalaligncenter"></i>
                        <span class="x-menu-text">中间对齐</span>
                    </DropdownItem>
                    <DropdownItem name="vAlignBottom" class="x-menu-item">
                        <i class="x-menu-icon x-icon-verticalalignbottom"></i>
                        <span class="x-menu-text">底部对齐</span>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
            <Dropdown class="x-toolbar-dropdown" @on-click="execCommand">
                <a class="x-toolbar-dropdown-button">
                    <i class="x-toolbar-dropdown-big x-icon-border-all"></i>
                    <Icon type="arrow-down-b"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem name="borderAll" class="x-menu-item">
                        <i class="x-menu-icon x-icon-border-all"></i>
                        <span class="x-menu-text">所有</span>
                    </DropdownItem>
                    <DropdownItem name="borderNo" class="x-menu-item">
                        <i class="x-menu-icon x-icon-border-clear"></i>
                        <span class="x-menu-text">无</span>
                    </DropdownItem>
                    <DropdownItem name="borderLeft" class="x-menu-item">
                        <i class="x-menu-icon x-icon-border-left"></i>
                        <span class="x-menu-text">左</span>
                    </DropdownItem>
                    <DropdownItem name="borderTop" class="x-menu-item">
                        <i class="x-menu-icon x-icon-border-top"></i>
                        <span class="x-menu-text">上</span>
                    </DropdownItem>
                    <DropdownItem name="borderRight" class="x-menu-item">
                        <i class="x-menu-icon x-icon-border-right"></i>
                        <span class="x-menu-text">右</span>
                    </DropdownItem>
                    <DropdownItem name="borderBottom" class="x-menu-item">
                        <i class="x-menu-icon x-icon-border-bottom"></i>
                        <span class="x-menu-text">下</span>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
            <SetOptionsAction class="iui-toolbar-button"></SetOptionsAction>
            <SetDescriptionAction class="iui-toolbar-button"></SetDescriptionAction>
            <span class="iui-file-info">{{displayFileName}}</span>
        </div>
        <Modal v-model="isShowReportOpenDlg" title="打开报表文件">
            <Table
                border
                :columns="openReportListColumns"
                :data="reportList"
                height="300"
                size="small"
            ></Table>
        </Modal>
        <Modal
            v-model="isShowReportSaveDlg"
            title="保存报表文件"
            @on-ok="saveAsReport"
            :loading="loadingSaveReport"
        >
            <Form :label-width="60">
                <FormItem label="文件名：">
                    <Input v-model="saveFileName"></Input>
                </FormItem>
            </Form>
            <Table
                border
                :columns="saveReportListColumns"
                :data="reportList"
                height="300"
                size="small"
            ></Table>
        </Modal>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import Hub from '../../Hub'
import SetOptionsAction from './action/SetOptionsAction'
import SetDescriptionAction from './action/SetDescriptionAction'
import Report from './mixins/Report.js'
import CommandFactory from './command/CommandFactory'
import { fontFamilies } from './command/Constants'

export default {
    name: 'Toolbar',
    data() {
        return {
            fontFamilies: fontFamilies,
            cellStyle: undefined,
            fontFamily: '',
            fontSize: 12,
            bold: false,
            italic: false,
            underline: false,
            bgcolor: '',
            forecolor: '',
        }
    },
    mixins: [Report],
    components: {
        SetOptionsAction,
        SetDescriptionAction,
    },
    computed: {
        ...mapState(['context', 'reportGuid']),
        displayFileName() {
            return this.reportGuid
        },
    },
    methods: {
        afterSelection(cellDef /*, rowIndex, colIndex, row2Index, col2Index*/) {
            this.cellStyle = cellDef.cellStyle
            this.fontFamily = this.cellStyle.fontFamily
            this.fontSize = this.cellStyle.fontSize
            this.bold = this.cellStyle.bold || false
            this.italic = this.cellStyle.italic || false
            this.underline = this.cellStyle.underline || false
            this.bgcolor = this.cellStyle.bgcolor || ''
            this.forecolor = this.cellStyle.forecolor || ''
        },
        execCommand(name) {
            let cmd = this.commonFactory.getCommand(name)
            cmd && cmd.execute()
        },
        changeFontFamily(value) {
            let cmd = this.commonFactory.getCommand('changeFontFamily')
            cmd.execute(value)
        },
        changeFontSize(value) {
            let cmd = this.commonFactory.getCommand('changeFontSize')
            cmd.execute(value)
        },
        changeFontBold(value) {
            let cmd = this.commonFactory.getCommand('changeFontBold')
            cmd.execute(value)
        },
        changeFontItalic(value) {
            let cmd = this.commonFactory.getCommand('changeFontItalic')
            cmd.execute(value)
        },
        changeFontUnderline(value) {
            let cmd = this.commonFactory.getCommand('changeFontUnderline')
            cmd.execute(value)
        },
        changeForeColor(value) {
            let cmd = this.commonFactory.getCommand('changeForeColor')
            cmd.execute(value)
        },
        changeBgColor(value) {
            let cmd = this.commonFactory.getCommand('changeBgColor')
            cmd.execute(value)
        },
    },
    mounted() {
        this.commonFactory = new CommandFactory(this.context)
        Hub.$on('after-selection-end', (param) => {
            this.afterSelection.apply(this, param)
        })
    },
}
</script>
<style scoped
    lang="less">
.iui-toolbar {
    padding: 4px 4px 4px 20px;
}

.iui-file-info {
    height: 32px;
    line-height: 32px;
    display: inline-block;
    float: right;
    margin-right: 10px;
}

.iui-toolbar-button {
    width: 32px;
    height: 32px;
    background-position: center;
    border-radius: 4px;
    display: inline-block;
    background-repeat: no-repeat;
    color: #495060;
    border: 1px solid #dddee1;
}

.iui-toolbar-button:hover {
    border-color: #57a3f3;
}

.x-toolbar-dropdown {
    // width: 32px;
    height: 32px;
    border-radius: 4px;
    color: #495060;
    border: 1px solid #dddee1;
    padding-right: 2px;

    &:hover {
        border-color: #57a3f3;
    }

    .x-toolbar-dropdown-button {
        height: 32px;
        display: inline-block;
        display: flex;
        align-items: center;

        .x-toolbar-dropdown-big {
            width: 32px;
            height: 32px;
            background-position: center;
            display: inline-block;
            background-repeat: no-repeat;
        }
    }
}

.x-toolbar-input {
    display: inline-block;
    height: 32px;
    vertical-align: top;
}

.iui-toolbar-icon-openfolder {
    background-image: url(../../assets/icons/folder_open.png);
}

.iui-toolbar-icon-impexcel {
    background-image: url(../../assets/icons/imp_excel.png);
}

.iui-toolbar-icon-save {
    background-image: url(../../assets/icons/save.png);
}

.iui-toolbar-icon-saveas {
    background-image: url(../../assets/icons/save_as.png);
}

.iui-toolbar-icon-preview {
    background-image: url(../../assets/icons/preview.png);
}

.iui-toolbar-icon-previewpage {
    background-image: url(../../assets/icons/preview_page.png);
}

.iui-toolbar-icon-undo {
    background-image: url(../../assets/icons/undo.png);
}

.iui-toolbar-icon-redo {
    background-image: url(../../assets/icons/redo.png);
}

.iui-toolbar-icon-mergecell {
    background-image: url(../../assets/icons/merge-cell.png);
}

.x-menu-item {
    display: flex;
}

.x-menu-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.x-menu-text {
    line-height: 24px;
    margin-left: 8px;
}

.x-icon-alignleft {
    background-image: url(../../assets/icons/align-left.png);
}

.x-icon-aligncenter {
    background-image: url(../../assets/icons/align-center.png);
}

.x-icon-alignright {
    background-image: url(../../assets/icons/align-right.png);
}

.x-icon-verticalaligntop {
    background-image: url(../../assets/icons/vertical-align-top.png);
}

.x-icon-verticalaligncenter {
    background-image: url(../../assets/icons/vertical-align-center.png);
}

.x-icon-verticalalignbottom {
    background-image: url(../../assets/icons/vertical-align-bottom.png);
}

.x-icon-border-all {
    background-image: url(../../assets/icons/border-all.png);
}

.x-icon-border-clear {
    background-image: url(../../assets/icons/border-clear.png);
}

.x-icon-border-left {
    background-image: url(../../assets/icons/border-left.png);
}

.x-icon-border-top {
    background-image: url(../../assets/icons/border-top.png);
}

.x-icon-border-right {
    background-image: url(../../assets/icons/border-right.png);
}

.x-icon-border-bottom {
    background-image: url(../../assets/icons/border-bottom.png);
}
</style>