<template>
    <scroll-view
        v-if="styleType === 'normal'"
        scroll-x
        class="m-scroll"
        scroll-with-animation
        :scroll-into-view="'mtab' + scrollIndex"
    >
        <view
            v-for="(item, index) in tabs"
            :id="'mtab' + index"
            :key="index"
            :style="{
                display: 'inline-block',
                padding: padding
            }"
        >
            <view
                class="m-tab-i"
                :class="{
                    'c-gap-left-large': !index,
                    'm-tab-select': index === scrollIndex,
                    'c-font-wb': index === scrollIndex && selectedBold
                }"
                :style="{
                    color: index === scrollIndex ? selectedFontColor : labelFontColor,
                    background: index === scrollIndex ? selectedColor : labelColor,
                    borderColor: showBorder && 'rgba(255, 255, 255, .6)',
                    fontSize: fontSize / 100 + 'rem',
                    marginRight: labelGap / 100 + 'rem',
                    marginLeft: !index ? firstTagLeft / 100 + 'rem' : ''
                }"
                @tap.stop="onTap(item, index)"
            >
                <text>{{ item.text }}</text>
                <text v-if="item.tip" class="m-tab-i_tip">{{ item.tip }}</text>
            </view>
        </view>
    </scroll-view>
    <view v-else-if="styleType === 'spread'" class="m-scroll-spread">
        <view
            v-for="(item, index) in tabs"
            :id="'mtab' + index"
            :key="index"
            class="m-tab-i"
            :class="{
                'm-tab-select': index === scrollIndex,
                'c-font-wb': index === scrollIndex && selectedBold
            }"
            :style="{
                color: index === scrollIndex ? selectedFontColor : labelFontColor,
                background: index !== scrollIndex ? labelColor : selectedColor,
                borderColor: showBorder && 'rgba(255, 255, 255, .6)',
                fontSize: fontSize / 100 + 'rem',
                marginRight: labelGap / 100 + 'rem'
            }"
            @tap.stop="onTap(item, index)"
        >
            {{ item.text }}
        </view>
    </view>
    <view
        v-else-if="styleType === 'fullColumn'"
        scroll-x
        class="full-column"
        scroll-with-animation
        :scroll-into-view="'mtab' + scrollIndex"
    >
        <view
            v-for="(item, index) in tabs"
            :id="'mtab' + index"
            :key="index"
        >
            <view
                class="m-tab-i border"
                :class="{
                    'c-gap-left-large': !index,
                    'm-tab-select': index === scrollIndex,
                    'c-font-wb': index === scrollIndex && selectedBold,
                    'border--selected': index === scrollIndex
                }"
                @tap.stop="onTap(item, index)"
            >
                <text>{{ item.text }}</text>
                <text v-if="item.tip" class="m-tab-i_tip">{{ item.tip }}</text>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file tab横滑切换模块
 * @author chenshuo04
 * @categories tab组件
 * @tags [component]
 */

import {send} from '../../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /* tab数据 */
        tabs: {
            type: Array,
            default: () => []
        },
        /* 样式类型 */
        styleType: {
            type: String,
            default: 'normal'
        },
        /* 颜色 */
        labelColor: {
            type: String,
            default: '#00a886'
        },
        /* 字体颜色 */
        labelFontColor: {
            type: String,
            default: '#ffffff'
        },
        /* 选中颜色 */
        selectedColor: {
            type: String,
            default: '#ffffff'
        },
        /* 选中字体颜色 */
        selectedFontColor: {
            type: String,
            default: '#00a886'
        },
        /* topic */
        topic: {
            type: String,
            default: 'none'
        },
        /* 是否显示边框 */
        showBorder: {
            type: Boolean,
            default: true
        },
        /* 字体大小 */
        fontSize: {
            type: Number,
            default: 15
        },
        /* tab间隔 */
        labelGap: {
            type: Number,
            default: 12
        },
        /* 第一个tag左侧间距 */
        firstTagLeft: {
            type: Number,
            default: 15
        },
        /* 选中文字是否加粗 */
        selectedBold: {
            type: Boolean,
            default: false
        },
        /* 默认 padding */
        padding: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            scrollIndex: 0
        };
    },
    watch: {
        tabs(n, o) {
            n.forEach((item, index) => {
                if (item.isSelect) {
                    this.scrollIndex = index;
                }
            });
        }
    },
    created() {
        this.tabs.forEach((item, index) => {
            if (item.isSelect) {
                this.scrollIndex = index;
            }
        });
    },
    methods: {
        onTap(data, index) {
            this.scrollIndex = index;
            send({
                type: 'b',
                action: 'tabclick',
                extra: {
                    type: 'toptab',
                    index,
                    topic: this.topic,
                    title: data.text
                }
            });
            /**
             * 点击事件
             */
            this.$emit('onTap', {...data, index});
        }
    }
};
</script>

<style lang="less" scoped>
.m-scroll {
    white-space: nowrap;
    // min-height: 30px;
}

.m-tab-i {
    position: relative;
    display: inline-block;
    line-height: 0.21rem;
    font-size: 0.15rem;
    padding: 0.015rem 0.1rem;
    border-radius: 0.33rem;
    border: 0.02rem solid transparent;

    &_tip {
        position: absolute;
        top: -0.1rem;
        right: -0.2rem;
        color: #fff;
        background: #ff6050;
        border-radius: 0.12rem;
        border-bottom-left-radius: 0.03rem;
        font-size: 0.12rem;
        line-height: 0.16rem;
        padding: 0 0.05rem;
    }

    &.border {
        font-size: 0.15rem;
        font-family: PingFangSC-Regular;
        color: #1f1f1f;

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            margin-left: -0.09rem;
            top: 100%;
            margin-top: 0.08rem;
            height: 0.04rem;
            border-radius: 0.02rem;
            width: 0.18rem;
            background-color: transparent;
        }

        &--selected {
            font-family: PingFangSC-Medium;

            &::after {
                background-color: #6897ff;
            }
        }
    }
}

.m-scroll-spread {
    .m-tab-i {
        margin-left: 0.12rem;
        margin-right: 0;
        margin-bottom: 0.08rem;
    }
}

.full-column {
    display: flex;
    justify-content: space-between;
    padding: 0.18rem 0.6rem 0.08rem 0.6rem;
    margin-bottom: 0.09rem;

    .m-tab-i_tip {
        right: -0.4rem;
    }
}
</style>
