<template>
    <div :class="classStr">
        <div :class="{y_tabs_header:1,y_tabs_main:topic=='main',y_tabs_light:topic=='light'}">
            <span class="y_tabs_cursor" :style="styleStr"></span>
            <div :class="'y_tabs_headerItem ' + (selectIndex == index ? 'y_tabs_selected' : '')" v-for="(item,index) in  headerList"
                 :key="index"
                 @click="fnSelect(index,item.index)">
                {{item.title}}
            </div>
        </div>
        <div :class="contentClassStr"
             @touchstart="fnTouchStart" @touchmove="fnTouchMove" @touchend="fnTouchEnd">
            <div :style="styleContent" :class="{y_tabs_swipeable:swipeable}">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
    const childrenName = "yTabItem";
    export default {
        name: "yTabs",
        computed: {
            classStr() {
                return "y_tabs "
                    + (this.fixed ? "y_tabs_fixed " : "")
                    + (this.rollContent ? "y_tabs_rollContent " : "")
                    + (this.size == 'normal' ? "y_tabs_normal " : "")
                    + (this.size == 'small' ? "y_tabs_small " : "")
                    + (this.size == 'mini' ? "y_tabs_mini " : "")
                    + (this.type == 'normal' ? "y_tabs_type_normal " : "")
                    + (this.type == 'switch' ? "y_tabs_type_switch " : "")
                    + (this.type == 'gradient' ? "y_tabs_type_gradient " : "")
                    + (this.topic == 'gray' ? "y_tabs_topic_gray " : "")
                    + (this.split ? "" : "y_tabs_noSplit")
                    + (this.customClass ? this.customClass : "");
            },
            contentClassStr() {
                return "y_tabs_content "
                    + (this.contentClass ? this.contentClass : "")
            },
            styleContent() {
                let percent = 0 - (this.selectIndex * 100);
                return this.swipeable ? "transform:translateX(" + percent + "%);" : "";
            },
            styleStr() {
                let left = (this.selectIndex * 2 + 1) / (this.headerList.length * 2);
                left = Math.round(left * 10000) / 100
                return "left:" + left + "%;";
            }
        },
        data() {
            return {
                endX: 0,
                endY: 0,
                headerList: [],
                selectIndex: this.selected || 0,
                startX: 0,
                startY: 0,
                isEmitMove:false,
            }
        },
        methods: {
            addItem(index, title) {
                this.headerList.push({
                    index,
                    title,
                })
            },
            fnSelect(index, childIndex) {
                this.selectIndex = index;
            },
            fnTouchStart(event) {
                this.startX = event.touches[0].clientX;
                this.startY = event.touches[0].clientY;
                this.endX = this.startX;
                this.isEmitMove = false;
            },
            fnTouchMove(event) {
                if(!this.isEmitMove){
                    this.$emit("scrollstart");
                }
                this.isEmitMove = true;
                this.endX = event.touches[0].clientX;
                this.endY = event.touches[0].clientY;
            },
            fnTouchEnd(event) {
                this.$emit("scrollend");
                this.isEmitMove = false;
                if (Math.abs(this.endY - this.startY) > 20) {
                    return;
                }
                let distance = this.endX - this.startX;
                if (distance > 3) {
                    this.selectIndex--;
                } else if (distance < -3) {
                    this.selectIndex++;
                }
            },
            isSelect(title) {
                return this.swipeable || title == this.headerList[this.selectIndex].title;
            }
        },
        props: {
            customClass: String,
            contentClass: String,
            fixed: Boolean,
            isFixed:Boolean,
            rollContent:Boolean,
            selected: "",
            size: {
                default: "normal"
            },
            split:Boolean,
            swipeable: Boolean,
            type:{
                default:"normal"
            },
            topic: {
                default: "main"
            },
        },
        watch: {
            selectIndex() {
                if (this.selectIndex < 0) this.selectIndex = 0;
                else if (this.selectIndex > this.headerList.length - 1) {
                    this.selectIndex = this.headerList.length - 1;
                }
                this.$emit("update:selected",this.selectIndex);
            },
            selected(){
                this.selectIndex = this.selected;
            }
        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";

    .y_tabs {
        overflow: hidden;

        &.y_tabs_noSplit{
            .y_tabs_headerItem{
                &:after{
                    border-right:none !important;
                }
            }
        }

        &.y_tabs_topic_gray{
            .y_tabs_header{
                padding: 5px;
                height: 35px;
                border-radius: 35px;
                font-size: $font_size_t4;
                background: #F2F2F2;
            }
            .y_tabs_headerItem{
                line-height: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-weight: bold;
                &.y_tabs_selected{
                    background: #fff;
                    border-radius: 35px;
                }
            }
        }
    }



    .y_tabs_rollContent{
        height: 100%;
        box-sizing:border-box;
        position: relative;
        &.y_tabs_normal {
            padding-top: $tabbar_normal_height;
        }
        .y_tabs_header {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 2;
        }
        .y_tabs_swipeable{
            position: relative;
            height: 100%;
        }
    }



    .y_tabs_fixed {
        &.y_tabs_normal {
            padding-top: $tabbar_normal_height;
        }

        .y_tabs_header {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 2;
        }
    }

    .y_tabs_header {
        display: flex;
        position: relative;

        & > .y_tabs_headerItem {
            flex: 1;
            text-align: center;
            position: relative;

            &:after {
                content: ' ';
                display: block;
                position: absolute;
                right: 0;
                transform: scaleX(.5);
            }

            &:last-child {
                &:after {
                    content: '';
                    display: none;
                }

            }
        }

        & > .y_tabs_cursor {
            content: "";
            position: absolute;
            display: block;
            height: 0;
            width: 0;
            left: 50%;
            bottom: 0;
            border-left-width: 6px;
            border-right-width: 6px;
            border-bottom-width: 7px;
            border-style: solid;
            border-color: transparent;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            z-index: 10;
            transition: left .2s;
        }
    }

    .y_tabs_type_switch{
        .y_tabs_header {
            position: relative;
            border:1px solid $color_topic_main;
            border-radius: 9999px;
            overflow: hidden;

            & > .y_tabs_headerItem {
                flex: 1;
                text-align: center;
                position: relative;
                background: #fff;
                color:$color_topic_main;

                &.y_tabs_selected{
                    background: $color_topic_main;
                    color:#fff;
                }


                &:after {
                    content: '';
                    display: none;
                }
            }

            & > .y_tabs_cursor {
                content: "";
                display: none;
            }
        }
    }

    .y_tabs_type_gradient{
        .y_tabs_main{
            background: $color_topic_gradient;
        }
    }

    .y_tabs_main {
        background: $color_topic_main;
        color: #fff;

        & > .y_tabs_headerItem {
            &:after {
                border-right: 1px solid #fff;
            }
        }

        & > .y_tabs_cursor {
            border-bottom-color: #fff;
        }
    }



    .y_tabs_normal {
        .y_tabs_header {
            font-size: $font_size_t4;
            height: $tabbar_normal_height;
            line-height: $tabbar_normal_height;

            & > .y_tabs_headerItem {
                &:after {
                    height: $tabbar_normal_height * 0.4;
                    top: $tabbar_normal_height*0.3;
                }
            }
        }

        .y_tabs_light{
            color: #fff;

            &.y_tabs_header{
                font-size:14px;
                margin-top: 5px;
                height: $tabbar_light_height;
                line-height: 1;
                background: #9E86FF;
                border-radius: $border_radius;
            }

            & > .y_tabs_headerItem {
                font-weight: bold;
                padding-top: $tabbar_light_height / 2  - 6px;
                &:after {
                    border-right: 1px solid #fff;
                    top:$tabbar_light_height*0.4;
                    height: $tabbar_normal_height * 0.25;
                }

                &.y_tabs_selected{
                    height: $tabbar_light_height +5px;
                    margin-top: -5px;
                    background: #fff;
                    border-radius: 5px 5px 0 0;
                    color:#9E86FF;
                    padding-top: $tabbar_light_height / 2  - 6px + 4px;
                    margin-left: -1px;
                }

                &:nth-child(2){
                    &.y_tabs_selected{
                        border-radius: 5px 5px 0 5px;
                    }
                }
                &:last-child{
                    &.y_tabs_selected{
                        border-radius: 5px 5px 5px 0;
                    }
                }
            }

            & > .y_tabs_cursor {
                display: none;
            }
        }
    }
    .y_tabs_small {
        .y_tabs_header {
            font-size: $font_size_t4;
            height: 30px;
            line-height: 30px;

            & > .y_tabs_headerItem {
                &:after {
                    height: 30px * 0.4;
                    top: 30px*0.3;
                }
            }
        }
    }
    .y_tabs_mini {
        .y_tabs_header {
            font-size: $font_size_t5;
            height: 30px;
            line-height: 30px;

            & > .y_tabs_headerItem {
                &:after {
                    height: 30px * 0.4;
                    top: 30px*0.3;
                }
            }
        }
    }

    .y_tabs_swipeable {
        display: flex;
        position: relative;
        transition: all .3s;
        width: 100%;

        .y_tabItem {
            width: 100%;
            flex-shrink: 0;
        }
    }
</style>
