<template>
    <view class="u-subsection" :style="[subsectionStyle]">
        <view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
         v-for="(item, index) in listInfo" :key="index">
            <view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
        </view>
        <view class="u-item-bg" :style="[itemBarStyle]"></view>
    </view>
</template>

<script>
    /**
     * subsection 分段器
     * @description 该分段器一般用于用户从几个选项中选择某一个的场景
     * @tutorial https://www.uviewui.com/components/subsection.html
     * @property {Array} list 选项的数组，形式见上方"基本使用"
     * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
     * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
     * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
     * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
     * @property {String Number} font-size 字体大小，单位rpx（默认28）
     * @property {String Number} height 组件高度，单位rpx（默认70）
     * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
     * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
     * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
     * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
     * @event {Function} change 分段器选项发生改变时触发
     * @example <u-subsection active-color="#ff9900"></u-subsection>
     */
    export default {
        name: "u-subsection",
        props: {
            // tab的数据
            list: {
                type: Array,
                default () {
                    return [];
                }
            },
            // 当前活动的tab的index
            current: {
                type: [Number, String],
                default: 0
            },
            // 激活的颜色
            activeColor: {
                type: String,
                default: '#303133'
            },
            // 未激活的颜色
            inactiveColor: {
                type: String,
                default: '#606266'
            },
            // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
            mode: {
                type: String,
                default: 'button'
            },
            // 字体大小，单位rpx
            fontSize: {
                type: [Number, String],
                default: 28
            },
            // 是否开启动画效果
            animation: {
                type: Boolean,
                default: true
            },
            // 组件的高度，单位rpx
            height: {
                type: [Number, String],
                default: 70
            },
            // 激活tab的字体是否加粗
            bold: {
                type: Boolean,
                default: true
            },
            // mode=button时，组件背景颜色
            bgColor: {
                type: String,
                default: '#eeeeef'
            },
            // mode = button时，滑块背景颜色
            buttonColor: {
                type: String,
                default: '#ffffff'
            },
            // 在切换分段器的时候，是否让设备震一下
            vibrateShort: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                listInfo: [],
                itemBgStyle: {
                    width: 0,
                    left: 0,
                    backgroundColor: '#ffffff',
                    height: '100%',
                    transition: ''
                },
                currentIndex: this.current,
                buttonPadding: 3, // mode = button 时，组件的内边距
                borderRadius: 5, // 圆角值
                firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动
            };
        },
        watch: {
            current: {
                immediate: true,
                handler(nVal) {
                    this.currentIndex = nVal;
                    this.changeSectionStatus(nVal);
                }
            }
        },
        created() {
            // 将list的数据，传入listInfo数组，因为不能修改props传递的list值
            // 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
            this.listInfo = this.list.map((val, index) => {
                if (typeof val != 'object') {
                    let obj = {
                        width: 0,
                        name: val
                    };
                    return obj;
                } else {
                    val.width = 0;
                    return val;
                }
            });
        },
        computed: {
            // 设置mode=subsection时，滑块特有的样式
            noBorderRight() {
                return index => {
                    if (this.mode != 'subsection') return;
                    let classs = '';
                    // 不显示右边的边框
                    if (index < this.list.length - 1) classs += ' u-none-border-right';
                    // 显示整个组件的左右边圆角
                    if (index == 0) classs += ' u-item-first';
                    if (index == this.list.length - 1) classs += ' u-item-last';
                    return classs;
                };
            },
            // 文字的样式
            textStyle() {
                return index => {
                    let style = {};
                    // 设置字体颜色
                    if (this.mode == 'subsection') {
                        if (index == this.currentIndex) {
                            style.color = '#ffffff';
                        } else {
                            style.color = this.activeColor;
                        }
                    } else {
                        if (index == this.currentIndex) {
                            style.color = this.activeColor;
                        } else {
                            style.color = this.inactiveColor;
                        }
                    }
                    // 字体加粗
                    if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
                    // 文字大小
                    style.fontSize = this.fontSize + 'rpx';
                    return style;
                };
            },
            // 每个分段器item的样式
            itemStyle() {
                return index => {
                    let style = {};
                    if (this.mode == 'subsection') {
                        // 设置border的样式
                        style.borderColor = this.activeColor;
                        style.borderWidth = '1px';
                        style.borderStyle = 'solid';
                    }
                    return style;
                };
            },
            // mode=button时，外层view的样式
            subsectionStyle() {
                let style = {};
                style.height = uni.upx2px(this.height) + 'px';
                if (this.mode == 'button') {
                    style.backgroundColor = this.bgColor;
                    style.padding = `${this.buttonPadding}px`;
                    style.borderRadius = `${this.borderRadius}px`;
                }
                return style;
            },
            // 滑块的样式
            itemBarStyle() {
                let style = {};
                style.backgroundColor = this.activeColor;
                style.zIndex = 1;
                if (this.mode == 'button') {
                    style.backgroundColor = this.buttonColor;
                    style.borderRadius = `${this.borderRadius}px`;
                    style.bottom = `${this.buttonPadding}px`;
                    style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
                    style.zIndex = 0;
                }
                return Object.assign(this.itemBgStyle, style);
            }
        },
        mounted() {
            setTimeout(() => {
                this.getTabsInfo();
            }, 10);
        },
        methods: {
            // 改变滑块的样式
            changeSectionStatus(nVal) {
                if (this.mode == 'subsection') {
                    // 根据滑块在最左边和最右边时，显示左边和右边的圆角
                    if (nVal == this.list.length - 1) {
                        this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
                    }
                    if (nVal == 0) {
                        this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
                    }
                    if (nVal > 0 && nVal < this.list.length - 1) {
                        this.itemBgStyle.borderRadius = '0';
                    }
                }
                // 更新滑块的位置
                setTimeout(() => {
                    this.itemBgLeft();
                }, 10);
                if (this.vibrateShort && !this.firstTimeVibrateShort) {
                    // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
                    // #ifndef H5
                    uni.vibrateShort();
                    // #endif
                }
                // 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
                this.firstTimeVibrateShort = false;
            },
            click(index) {
                // 不允许点击当前激活选项
                if (index == this.currentIndex) return;
                this.currentIndex = index;
                this.changeSectionStatus(index);
                this.$emit('change', Number(index));
            },
            // 获取各个tab的节点信息
            getTabsInfo() {
                let view = uni.createSelectorQuery().in(this);
                for (let i = 0; i < this.list.length; i++) {
                    view.select('.u-item-' + i).boundingClientRect();
                }
                view.exec(res => {
                    if (!res.length) {
                        setTimeout(() => {
                            this.getTabsInfo();
                            return;
                        }, 10);
                    }
                    // 将分段器每个item的宽度，放入listInfo数组
                    res.map((val, index) => {
                        this.listInfo[index].width = val.width;
                    });
                    // 初始化滑块的宽度
                    if (this.mode == 'subsection') {
                        this.itemBgStyle.width = this.listInfo[0].width + 'px';
                    } else if (this.mode == 'button') {
                        this.itemBgStyle.width = this.listInfo[0].width + 'px';
                    }
                    // 初始化滑块的位置
                    this.itemBgLeft();
                });
            },
            itemBgLeft() {
                // 根据是否开启动画效果，
                if (this.animation) {
                    this.itemBgStyle.transition = 'all 0.35s';
                } else {
                    this.itemBgStyle.transition = 'all 0s';
                }
                let left = 0;
                // 计算当前活跃item到组件左边的距离
                this.listInfo.map((val, index) => {
                    if (index < this.currentIndex) left += val.width;
                });
                // 根据mode不同模式，计算滑块需要移动的距离
                if (this.mode == 'subsection') {
                    this.itemBgStyle.left = left + 'px';
                } else if (this.mode == 'button') {
                    this.itemBgStyle.left = left + this.buttonPadding + 'px';
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "../../libs/css/style.components.scss";
    
    .u-subsection {
        @include vue-flex;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    .u-item {
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        height: 100%;
        @include vue-flex;
        align-items: center;
        justify-content: center;
        color: $u-main-color;
        padding: 0 6rpx;
    }

    .u-item-bg {
        background-color: $u-type-primary;
        position: absolute;
        z-index: -1;
    }

    .u-none-border-right {
        border-right: none !important;
    }

    .u-item-first {
        border-top-left-radius: 8rpx;
        border-bottom-left-radius: 8rpx;
    }

    .u-item-last {
        border-top-right-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
    }

    .u-item-text {
        transition: all 0.35s;
        color: $u-main-color;
        @include vue-flex;
        align-items: center;
        position: relative;
        z-index: 3;
    }
</style>