<template>
    <div class="header-title" :style="{textAlign:titleAlign}">
        <div class="header-button-wrap">
            <el-button v-if="backBtn" size="small" icon="el-icon-arrow-left" @click="back">返回</el-button>
        </div>
        <div class="header-title-text-wrap">
            <span class="header-title-text" >{{title}}</span>
        </div>
        <div class="header-title-suffix-buttons">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HeaderTitle',
        props: {
            title: {
                type: String,
                default: '标题栏'
            },
            backBtn: {
                type: Boolean,
                default: true
            },
            backPath: String,
            queryData:
                {
                    type: Object,
                    default: () =>{}
                },
            align: {
                type: String,
                default: 'center'
            }
        },
        computed: {
            titleAlign: {
                get() {
                    if (this.$slots.default || this.backBtn) {
                        return 'center'
                    } else {
                        return this.align
                    }
                }
            }
        },
        methods: {
            closeTag() {
                this.$store.dispatch('tagsView/delView', this.$route);
            },
            back() {
                if(this.backPath){
                    this.backPath = this.backPath.trim();
                    if (this.backPath) {
                        this.$router.push({
                            name: this.backPath,
                            query: this.queryData
                        })
                    } else {
                        this.$router.go(-1)
                        this.closeTag()
                    }
                } else {
                    this.$router.go(-1)
                    this.closeTag()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

    .header-title {
        display: flex;
        /*justify-content: space-between;*/
        width: 100%;
        padding: $main-inside-padding;
        border-bottom: 1px solid #dcdfe6;
        box-sizing: border-box;
        .header-button-wrap{
            width: 73px;
        }
        .header-title-text-wrap{
            width: calc(100% - 146px);
        }
        .header-title-text {
            font-weight: bold;
            font-size: $font-size-sub-title;
            color: $color-666;
            line-height: 32px;
        }
        .header-title-suffix-buttons {
            display: flex;
            align-items: center;
        }
    }
</style>
