<template>
    <div>
        <div v-if="isConnect" class="toolbar-connect">
            <el-tabs
                :type="tabsType"
                v-model="activeName"
                :tab-position="position"
                :closable="false"
                @tab-click="tabClick"
                :before-leave="beforeLeave"
            >
                <el-tab-pane
                    v-for="(item, index) in toolbarItem"
                    :key="item.key || index.toString()"
                    :label="item.title"
                    :lazy="true"
                    :name="item.fromId.toString()"
                    :disabled="item.disabled"
                ></el-tab-pane>
            </el-tabs>
        </div>
        <div v-else id="toolBox" class="toolbar clear">
            <el-tabs
                :class="origintoolbarClass"
                type="tabsType"
                id="eltabs"
                :tab-position="position"
                :closable="false"
                @tab-click="tabClick"
            >
                <el-tab-pane
                    v-for="(item, index) in toolbarItem"
                    :key="item.key || index.toString()"
                    :label="item.title"
                    :name="index.toString()"
                    :disabled="item.disabled"
                >
                    <el-button
                        v-if="item.icon"
                        style="margin-right: 5px"
                        slot="label"
                        :plain="item.plain"
                        :disabled="item.disabled"
                        :type="item.type"
                        :size="!!item.size ? item.size : 'medium'"
                        :icon="
                            display === 'block'
                                ? item.icon + ' el-block'
                                : item.icon
                        "
                    >
                        {{ item.title }}
                    </el-button>
                    <el-button
                        v-else
                        style="margin-right: 5px"
                        slot="label"
                        :plain="item.plain"
                        :disabled="item.disabled"
                        :type="item.type"
                        :size="!!item.size ? item.size : 'medium'"
                    >
                        {{ item.title }}
                    </el-button>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    name: "toolbar",
    props: {
        subPageActiveName: {
            type: Number,
            default: -1,
        },
        isRight: {
            type: Boolean,
            default: false,
        },
        isConnect: {
            type: Boolean,
            default: false,
        },
        position: {
            type: String,
            default: "top",
        },
		tabsType: {
            type: String,
            default: "",
        },
        display: {
            type: String,
            default: "block",
        },
        toolbarItem: Array,
        isAutoMove: {
            type: Boolean,
            default: false,
        },
        beforeLeave: {
            type: Function,
            default: () => {},
        },
    },
    data() {
        return {
            activeName: "-1",
            clientWidth: 0,
            clientHeight: 0,
            totalWidth: 0,
            totalHeight: 0,
            isShowHBtn: false,
            isShowVBtn: false,
            clientMarginLR: 0,
            timer: 0,
            toolbarClass: false,
        };
    },
    methods: {
        click() {},
        tabClick(tab, event) {
            this.$emit(
                "toolbarClick",
                this.toolbarItem[parseInt(tab.index)],
                event
            );
        },

        // 当工具条过长时显示能控制其左右移动的按钮。测试了一下
        controlToolBarMove(v) {
            let toolBox = document.querySelector("#toolBox");
            let eltabs = document.querySelector("#eltabs .el-tabs__nav");
            if (
                toolBox &&
                eltabs &&
                parseInt(window.getComputedStyle(toolBox).width) &&
                parseInt(window.getComputedStyle(eltabs).width)
            ) {
                if (
                    parseInt(window.getComputedStyle(toolBox).width) <=
                    parseInt(window.getComputedStyle(eltabs).width) + 10
                ) {
                    this.toolbarClass = true;
                } else {
                    this.toolbarClass = false;
                }
            }
        },
    },
    watch: {
        subPageActiveName(val) {
            if (val != -1) {
                this.activeName = "" + val;
            }
        },
        "$store.state.contentHeight"(newValue, oldValue) {
            this.clientHeight =
                this.$store.state.contentHeight - this.clientMarginLR;
            if (this.position == "right") {
                this.$el.style.height = this.clientHeight + "px";
            }
        },
        toolbarItem: {
            handler(newValue) {
                this.$nextTick(() => {
                    setTimeout(this.controlToolBarMove, 1);
                });
            },
            deep: true,
            immediate: true,
        },
    },
    computed: {
        origintoolbarClass() {
            if (this.toolbarClass) return "or";
            return this.isRight ? "fr" : "";
        },
    },
    mounted() {
        this.clientWidth = this.$el.clientWidth;
        this.clientHeight = this.$store.state.contentHeight;
        if (this.position == "right") {
            this.clientMarginLR =
                parseInt(this.$el.style.marginTop) +
                parseInt(this.$el.style.marginBottom);
            this.$el.style.height =
                this.clientHeight - this.clientMarginLR + "px";
            this.$el.className += " right";
        }
        window.addEventListener("resize", this.controlToolBarMove);
    },
    created() {
        this.activeName = "" + this.subPageActiveName;
    },

    destroyed() {
        window.removeEventListener("resize", this.controlToolBarMove);
    },
};
</script>

<style scoped lang="less">
.fl {
    float: left;
}
.fr,
.or {
    width: 100%;
}

.fr /deep/ .el-tabs__nav {
    float: right;
}
.clear:before,
.clear:after {
    display: table;
    content: "";
}
.clear:after {
    clear: both;
}
.toolbar {
    font-family: PingFangSC, Microsoft YaHei, Arial, sans-serif;
    overflow: hidden;
    border-radius: 4px;
    margin-left: 0;
    position: relative;

    /deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
        border-left: none;
    }

    /deep/ .el-tabs__header {
        padding-bottom: 2px;
        margin-bottom: 0;
        .el-tabs__nav {
            border: none;
        }
    }

    /deep/.el-tabs__nav-scroll {
        padding: 0;
    }

    &.right {
        position: fixed;
        right: 10px;
    }
    /deep/ .el-tabs__item {
        padding: 0px;
    }
    /deep/
        .el-tabs--top.el-tabs--card
        > .el-tabs__header
        .el-tabs__item:last-child {
        padding-right: 0px;
    }
    /deep/
        .el-tabs--top.el-tabs--card
        > .el-tabs__header
        .el-tabs__item:nth-child(2) {
        padding-left: 0px;
    }

    /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
        background-color: transparent;
    }
    /deep/
        .el-tabs--card
        > .el-tabs__header.is-right
        .el-tabs__item:not(:first-child) {
        margin-left: 0px;
    }
    /deep/ .el-tabs--right .el-tabs__header.is-right {
        margin-left: 0px;
        .el-tabs__item.is-right {
            margin: 6px 0px;
        }
    }

    /deep/ .el-tabs--right .el-tabs__header.is-right i.el-block {
        display: block;
        font-size: 1.5em;
        margin-bottom: 5px;
    }

    /deep/ .el-tabs--right .el-tabs__header.is-right .el-tabs__item {
        height: auto;
    }

    /deep/ .el-tabs--right.el-tabs--card .el-tabs__item.is-right {
        border-top: 0px solid transparent;
    }

    /deep/ .el-tabs--right.el-tabs--card .el-button {
        width: 60px;
        height: 60px;
        padding: 0px;
        margin-top: 10px;
        display: block;
        font-size: 14px;
        span {
            margin-left: 0px;
        }
    }

    /deep/ .el-tabs--card .el-tabs__header {
        background-color: transparent;
        border-bottom-color: transparent;
    }
    /deep/ .el-tabs__nav-scroll {
        background-color: transparent;
    }
    /deep/ .el-tabs--card > .el-tabs__header {
        border-bottom: 0px solid transparent;
    }
    /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
        border-bottom: 1px solid transparent;
    }
    /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border-bottom-color: transparent;
        background-color: transparent;
    }
    /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
        border-radius: 4px;
    }
    /deep/ .el-tabs--right {
        height: 100%;
    }
    /deep/ .el-tabs__nav-scroll {
        height: 100%;
    }
    /deep/ .el-tabs__item.is-active {
        color: inherit;
    }
}
.toolbar-connect {
    font-family: PingFangSC, Microsoft YaHei, Arial, sans-serif;
    /deep/.el-tabs__header {
        padding-left: 20px;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
        border-top: #e4e7ed 1px solid;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
        border-left: #e4e7ed 1px solid;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
        border-right: #e4e7ed 1px solid;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: none;
    }
    /deep/.el-tabs--card > .el-tabs__header {
        border-bottom: 1px solid @themeColor;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border-left: 1px solid @themeColor;
        border-top: 1px solid @themeColor;
    }
    /deep/.el-tabs--card
        > .el-tabs__header
        .el-tabs__item:last-child.is-active {
        border-right: 1px solid @themeColor;
    }
    /deep/.el-tabs--card
        > .el-tabs__header
        .el-tabs__item.is-active
        + .el-tabs__item {
        border-left: 1px solid @themeColor;
    }
}
</style>