<template>
    <div class="bingo-toolbar-new" :class="{'tool-full-screen':isFullScreen}">
        <div class="toolbar-btn-group">
            <div class="toolbar-fl" ref="icoll">
                <span ref="oldBtnGroup">
                    <Button
                        type="primary"
                        :disabled="disabledNewBtn"
                        customIcon="iconfont iconxinjian"
                        @click="onNew"
                        v-if="showNewBtn"
                        >{{ $t("page.common.new") }}</Button
                    >
                </span>
                <slot name="toolbarNew"> </slot>
            </div>
            <div class="ivu-fl">
                <Dropdown
                    class="toolbar-down-button"
                    ref="drop"
                    placement="left-start"
                    trigger="click"
                    v-if="showFlag"
                >
                    <Icon type="ios-arrow-down" />
                    <Dropdown-menu slot="list" v-for="(tt, t) in item" :key="t">
                        <Dropdown-item :class="tt"></Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
            </div>
            <div class="toolbar-fr" ref="icolr">
                <div class="tool-fr">
                    <slot name="toolbarNew-r"> </slot>
                    <Tooltip :content="$t('page.common.export')" v-if="showExportBtn">
                        <span @click="onExport" class="r-fun">
                            <i class="icon iconfont icondaochu"></i>
                        </span>
                    </Tooltip>
                    <Tooltip :content="$t('page.common.refresh')" v-if="showRefreshBtn">
                        <span @click="onRefresh" class="r-fun">
                            <i class="icon iconfont iconshuaxin"></i>
                        </span>
                    </Tooltip>
                    <Tooltip content="下拉" v-if="showListBtn">
                        <span class="r-fun">
                            <Icon type="md-list"></Icon>
                            <Icon class="arrow-down" type="md-arrow-down" />
                        </span>
                    </Tooltip>
                    <Tooltip content="开关" v-if="showSwitchBtn">
                        <span @click="onSwitch" class="r-fun">
                            <Icon type="md-switch"></Icon>
                        </span>
                    </Tooltip>
                    <Tooltip content="全屏" v-if="showFullScreenBtn">
                        <span @click="onFullScreen" class="r-fun">
                            <i :class="!isFullScreen?'icon iconfont iconzuidahua':'icon iconfont iconzuidahua-huanyuan'"></i>
                        </span>
                    </Tooltip>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { on, off } from 'view-design/src/utils/dom';
    export default {
        name: 'bingo-toolbar-new',
        data () {
            return {
                item: [],
                timer: false,
                showFlag: false,
                widths: '',
                isFullScreen: false,
                selectedColumns: []
            };
        },
        props: {
            isSearch: {
                type: Boolean,
                default: true
            },
            isSearchAdvance: {
                type: Boolean,
                default: true
            },
            // 是否显示新建按钮
            showNewBtn: {
                type: Boolean,
                default: true
            },
            // 新建按钮是否禁用
            disabledNewBtn: {
                type: Boolean,
                default: false
            },
            // 是否显示搜索
            showSearchBtn: {
                type: Boolean,
                default: true
            },
            // 是否显示导出
            showExportBtn: {
                type: Boolean,
                default: true
            },
            // 是否显示刷新
            showRefreshBtn: {
                type: Boolean,
                default: true
            },
            // 是否显示下拉，增加更多功能
            showListBtn: {
                type: Boolean,
                default: true
            },
            // 是否显示开关，用来切换table和card
            showSwitchBtn: {
                type: Boolean,
                default: true
            },
            // 是否显示全屏功能
            showFullScreenBtn: {
                type: Boolean,
                default: true
            },
            columns: {
                type: Array,
                default () {
                    return []
                }
            }
        },
        mounted () {
            on(window, 'resize', this.handleWindowResize);
            this.handleMatchMedia();
        },
        watch: {
            // 超过那几个按钮装在item里
            item () {
                this.$nextTick(() => {
                    this.item.forEach((item, index) => {
                        let str = this.$slots.toolbarNew[item].elm;
                        this.$refs.drop.$children[1].$children[
                            index
                        ].$children[0].$el.appendChild(str);
                    });
                });
            }
        },
        methods: {
            handleWindowResize () {
                this.handleMatchMedia();
            },
            handleMatchMedia () {
                setTimeout(() => {
                    this.widths =
                        this.$parent.$el.offsetWidth -
                        this.$refs.icolr.offsetWidth -
                        20 - 263;// 263为搜索框预留宽度，20为下拉箭头预留宽度
                }, 400);
                this.showFlag = false;
                if (this.item.length > 0) {
                    this.item.forEach((item, key) => {
                        let sss = this.$refs.drop.$children[1].$children[key]
                            .$children[0].$el.children[0];
                        this.$refs.icoll.appendChild(sss);
                    });
                    this.$refs.drop.$children[1].$children = [];
                    this.item = [];
                }
                if (!this.timer) {
                    if (this.$slots.toolbarNew) {
                        let buttonList = this.$slots.toolbarNew;
                        let widthTotal = this.$refs.oldBtnGroup.offsetWidth;
                        this.timer = true;
                        setTimeout(() => {
                            for (let i = 0; i < buttonList.length; i++) {
                                widthTotal += buttonList[i].elm.offsetWidth + 6;
                                if (widthTotal >= this.widths) {
                                    for (let j = i; j < buttonList.length; j++) {
                                        this.item.push(j);
                                    }
                                    this.timer = false;
                                    this.showFlag = true;
                                    return;
                                }
                            }
                            this.timer = false;
                        }, 400);
                    }
                }
            },
            // 新建
            onNew () {
                this.$emit('on-add-new');
            },
            // 导出
            onExport () {
                this.$emit('on-export-file');
            },
            // 刷新
            onRefresh () {
                this.$emit('on-refresh');
            },
            // 切换
            onSwitch () {
                this.$emit('on-switch');
            },
            // 全屏
            onFullScreen () {
                this.isFullScreen = !this.isFullScreen;
                this.$emit('on-full-screen', this.isFullScreen);
            }
        },
        beforeDestroy () {
            off(window, 'resize', this.handleWindowResize);
        },
        components: {

        }
    };
</script>
