<template>
    <div class="tabs-view-pack">
        <el-tabs
            v-model="activatedTab"
            @tab-click="tabsViewClick"
            @tab-remove="delTabsView"
            type="card"
            closable>
            <el-tab-pane
                v-for="(item, index) in openedViews"
                :key="item.path"
                :label="item.title"
                :name="item.path">
                <span slot="label">
                    <svg-icon :icon-class="item.meta.icon !== undefined ? item.meta.icon : 'list'" /> {{generateTitle(item.title)}}
                </span>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import { generateTitle } from '@/utils/i18n'


    export default {
        name: 'TabsView',
        data () {
            return {
                activatedTab: ''
            }
        },
        computed: {
            ...mapState('TabsView', {
                openedViews: state => state.openedViews
            })
        },
        watch: {
            $route () {
                this.addTabsView()
            }
        },
        methods: {
            // 添加一个tabs
            addTabsView () {
                this.$store.dispatch('TabsView/addTabsView', this.$route).then(() => {
                    this.activatedTab = this.$route.path;
                })
            },
            // 点击一个tabs
            tabsViewClick (item) {
                // 1. 从store中获取打开的view列表，找到将要打开的tab对应的路由信息
                let view = null;
                for (let tab of this.openedViews) {
                    if (tab.path === item.name) {
                        view = _.cloneDeep(tab)
                        break;
                    }
                }
                // 2. 根据路由信息跳转数据
                this.$router.push({
                    path: item.name,
                    // name: view.name,
                    params: view.params,
                    query: view.query
                })
            },
            // 删除一个tabs
            delTabsView (delViewPath) {
                console.info(this.openedViews)
                // 1. 最后一个不允许删除
                if (this.openedViews.length === 1) {
                    this.$message.warning('最后一个标签不允许删除');
                    return false;
                }
                // 2. 如果当前tab被删除，需要选中上一个
                if (this.activatedTab === delViewPath) {
                    let index = 0;
                    for (let tab of this.openedViews) {
                        if (tab.path === delViewPath) {
                            break;
                        }
                        index++;
                    }
                    // 如果从头删除就要选中后一个，如果从后删除就要选中上一个
                    let checkedTabView = '';
                    if (index > 0) {
                        checkedTabView = _.cloneDeep(this.openedViews[index - 1]);
                    } else {
                        checkedTabView = _.cloneDeep(this.openedViews[index + 1]);
                    }
                    // 删除选中tab，并跳转路由
                    this.$store.dispatch('TabsView/delTabsView', delViewPath).then(() => {
                        this.activatedTab = checkedTabView.path;
                        this.$router.push({
                            path: checkedTabView.path,
                            // name: view.name,
                            params: checkedTabView.params,
                            query: checkedTabView.query
                        })
                    })
                } else {
                    // 删除当前tab
                    this.$store.dispatch('TabsView/delTabsView', delViewPath)
                }
            },
            generateTitle
        },
        mounted () {
            this.addTabsView()
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .tabs-view-pack {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 30px;
        padding: 10px 10px 0 10px;
        /*-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
        box-shadow: 0 1px 4px rgba(0,21,41,.08);*/
        .el-tabs {
            .el-tabs__header {
                margin: 0 5px!important;
            }
            .el-tabs__item {
                border: 1px solid #dcdcdc!important;
                border-radius: 5px;
                margin-right: 10px;
                padding: 0 10px!important;
                height: 30px;
                line-height: 30px;
                font-weight: bold;
                color: #777;
                background: #f0f3fa;
                svg {
                    font-size: 18px;
                    margin-right: 5px;
                }
            }
            .el-tabs__header {
                border-bottom: 0px solid #fff!important;
            }
            .el-tabs__nav {
                border: 0px solid #fff!important;
            }
            .el-tabs__nav-next, .el-tabs__nav-prev {
                line-height: 32px;
            }
            .is-active {
                color: #444;
                background: #fff;
                font-size: 16px;
                border: 1px solid #d2d3d5!important;
                svg {
                    font-weight: bold;
                }
            }
        }
    }
</style>
