<template>
    <div id="detail_tab">
        <div class="detail_tab_wrapper"
             ref="detailTabWrapper">
            <div class="detail_tab_nav"
                 :class="setNav?'detail_tab_nav_single':'detail_tab_nav_all'"
                 v-if="!isHideNav"
                 ref="detailNav">
                <ul class="detail_tab_nav_items"
                    @click="detailTabChange">
                    <li class="detail_tab_nav_item"
                        :data-index="index"
                        :class="{'is-active':currentIndex == index,'detail_tab_nav_item_single':setNav,'detail_tab_nav_item_all':!setNav}"
                        v-for="(item,index) in tab_nav"
                        :key="index"
                        v-if="item">{{item}}
                    </li>
                </ul>
            </div>
            <div class="detail_tab_panes"
                 :class="{noneNav:isHideNav,'detail_tab_panes_single':setNav}"
                 :style="{paddingLeft:(navWidth+20)+'px'}"
                 ref="tabPanes">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
    import transfer from '../../util/eventTransfer'

    export default {
        name: "enoDetailTab",
        data() {
            return {
                tab_nav: [],
                currentIndex: 0,
                paneTop: [],
                isClickTab: false,
                voidNav: 0,
                navChangePanes: [],
                $main:null
            }
        },
        props: {
            'navWidth': {
                type: Number
            },
            'navChange': {// 兄弟面板是否隐藏
                type: Boolean,
                default: false
            },
            isHideNav: { //是否隐藏导航栏
                type: Boolean,
                default: false
            },
            setNav: {  //单独设置nav样式
                type: String
            }
        },
        created() {
            /*获取导航标签*/
            this.tab_nav = this.$slots.default.filter(value => {
                return value.tag
            }).map(value => {
                return value.componentOptions.propsData.label;
            });

        /*获取面板的offsetHeight*/
        transfer.$on('to-detailTab-scrollTop', data => {
            this.paneTop.push(data.offsetTop);
            this.navChangePanes.push(data);
        });
        /*判断是否有无导航的面板*/
        this.tab_nav.forEach((value, index) => {
            if (!value) {
                this.voidNav++;
                this.currentIndex = this.voidNav;
            }
        });

    },
    computed: {

    },
    mounted () {
        this.$main = this.$parent.$parent.$el.querySelector('.main')
        if (!this.navChange && this.$main) {
            this.$main.addEventListener("scroll", this.handleScroll, true);
        } else {
            this.navChangePanes.forEach((value, index) => {
                if (index < this.voidNav || index === this.currentIndex) {
                    value.style.display = 'block';
                } else {
                    value.style.display = 'none';
                }
            })
        }

        if (!this.isHideNav) {
            let navWidth = this.$refs.detailNav.offsetWidth + 42;
            if (!this.setNav) {
                this.$refs.tabPanes.style.paddingLeft = navWidth + 'px';
            } else {
                this.$refs.tabPanes.style.paddingLeft = 40 + 'px';
            }
            // this.setNavPosition();
        }



        },
        methods: {
            detailTabChange: function (e) {
                if(!e.target) {
                    this.currentIndex = e;
                } else {
                    this.currentIndex = e.target.dataset.index;
                }
                if (this.navChange) {
                    this.navChangePanes.forEach((value, index) => {
                        if (index == this.currentIndex || index < this.voidNav) {
                            value.style.display = 'block';
                        } else {
                            value.style.display = 'none';
                        }
                    });
                } else {
                    this.isClickTab = true;
                    transfer.$emit('to-detail-pane', this.currentIndex);
                    let offsetTop = this.$refs.tabPanes.childNodes[this.currentIndex].offsetTop;
                    this.$main.scrollTo(0,offsetTop);
                    setTimeout(() => {
                        this.isClickTab = false;
                    }, 500);
                }


            },
            handleScroll: function (e) {
                let scrollTop = this.$main.scrollTop;
                if (!this.isClickTab) {
                    if (scrollTop < this.paneTop[this.voidNav]) {
                        this.currentIndex = this.voidNav;
                        transfer.$emit('to-detail-pane', this.currentIndex);
                    } else {
                        this.paneTop.forEach((value, index) => {
                            if (scrollTop > value) {
                                this.currentIndex = index;
                                transfer.$emit('to-detail-pane', this.currentIndex);
                            }
                        });
                    }


            }

        },
        setNavPosition: function () {
            let parentOffsetTop = this.$refs.detailTabWrapper.offsetTop;
            this.$refs.detailNav.style.top = (parentOffsetTop + 6) + 'px';
            if (this.setNav) {
                let parentOffsetRight = this.$refs.detailTabWrapper.offsetLeft;
                this.$refs.detailNav.style.right = parentOffsetRight + 'px';
            } else {
                let parentOffsetLeft = this.$refs.detailTabWrapper.offsetLeft;
                this.$refs.detailNav.style.left = parentOffsetLeft + 'px';
            }
        }
    },
    destroyed () {
		if(this.$main){
			this.$main.removeEventListener('scroll', this.handleScroll)
		}
    },
}
</script>

<style lang="less" scoped>
@import "../../style/base.less";
#detail_tab {
    height: 100%;
    .detail_tab_wrapper {
        position: relative;
        height: 100%;
        .detail_tab_nav {
            display: inline-block;
            vertical-align: top;
            margin-right: 42px;
            position: fixed;

            .detail_tab_nav_items {
              .detail_tab_nav_item {
                    text-align: center;
                    cursor: pointer;
                    padding: 10px 12px;
                    position: relative;
                    font-size: 12px;
                    color: @textColor;
                    line-height: 16px;

                    &:after {
                        content: "";
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        border: 2px solid @borderColor;
                        background-color: #fff;
                        position: absolute;
                        top: 50%;
                        margin-top: -4px;
                    }

                    &.is-active {
                        color: @mainColor;

                        &:after {
                            border-color: @mainColor;
                        }
                    }
                }
                .detail_tab_nav_item_all:after {
                    right: -5px;
                }
                .detail_tab_nav_item_single:after {
                    left: -5px;
                }
            }
        }
        .detail_tab_nav_single {
            border-left: 2px solid @borderTable;
        }
        .detail_tab_nav_all {
            border-right: 2px solid @borderTable;
        }
        .detail_tab_panes {
            display: inline-block;
            padding-top: 16px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            &.noneNav {
                padding-left: 0;
                width: 100%;
            }
        }
        .detail_tab_panes_single{
            padding-right: 134px;
        }
    }
}
</style>
