<template>
    <view
        class="navs"
        :style="[{
            paddingTop: paddingTop,
        }]"
    >
        <!-- 等分样式 -->
        <view
            v-if="!scroll"
            :class="{
                'c-line-bottom': borderBottom
            }"
            class="flex">
            <view
                v-for="(item, index) in options"
                :key="index"
                :style="[
                    {
                        color: mSelectedIndex === index ? selectedColor : color,
                        fontWeight: mSelectedIndex === index ? selectedFontWeight : '',
                        fontSize: fontSize + 'px',
                        lineHeight: fontSize + 10 + 'px',
                        paddingLeft: '17px',
                        paddingRight: '17px',
                        backgroundColor: mSelectedIndex === index ? selectedBackgroundColor : backgroundColor,
                        borderRadius: borderRadius,
                        marginRight: index < options.length -1 ? '10px': '0px'
                    }
                ]"
                class="item"
                @tap="handleItemTap({
                    item,
                    index
                })">
                <view
                    class="item-text">
                    {{ item.text }}
                    <!-- 底部指示线 -->
                    <view
                        v-if="bottomLine"
                        v-show="mSelectedIndex === index"
                        class="bottom-line-wrapper">
                        <view
                            :style="{
                                'background-color': selectedColor,
                                'height': bottomLineHeight
                            }"
                            class="bottom-line">
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 横滑样式 -->
        <view
            v-else
            :class="{
                'c-line-bottom': borderBottom
            }">
            <scroll-view
                :scroll-into-view="'marsUINavItem' + (mSelectedIndex - 1)"
                scroll-with-animation
                scroll-x
                class="scroll-view"
                @scroll="handleScroll"
                @scrolltoupper="handleScrollToUpper"
                @scrolltolower="handleScrollToLower">
                <!-- scroll-into-view 需要加 id，不得不加 -->
                <view
                    v-for="(item, index) in options"
                    :key="index"
                    :style="[
                        {
                            color: mSelectedIndex === index ? selectedColor : color,
                            fontWeight: mSelectedIndex === index ? selectedFontWeight : '',
                            fontSize: fontSize + 'px',
                            lineHeight: fontSize + 10 + 'px',
                            paddingLeft: '17px',
                            paddingRight: '17px',
                            backgroundColor: mSelectedIndex === index ? selectedBackgroundColor: backgroundColor,
                            borderRadius: scrollBorderRadius,
                        }
                    ]"
                    :id="'marsUINavItem' + index"
                    class="item"
                    @tap="handleItemTap({
                        item,
                        index
                    })">
                    {{ item.text }}
                    <!-- 底部指示线 -->
                    <view
                        v-if="bottomLine"
                        v-show="mSelectedIndex === index"
                        class="bottom-line-wrapper">
                        <view
                            :style="{
                                'background-color': selectedColor,
                                'height': bottomLineHeight
                            }"
                            class="bottom-line">
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view v-if="addIcon" class="icon" @tap="handleIconTap">
            <view class="add-icon">+</view>            
        </view>
    </view>
</template>
<script>
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 导航数据列表
         *
         * @property {string} text 显示文案
         */
        options: {
            type: Array
        },
        /**
         * 是否滚动
         */
        scroll: {
            type: Boolean,
            default: false
        },
        /**
         * 底部线条
         */
        bottomLine: {
            type: Boolean,
            default: true
        },
        /**
         * 底部线条的高度
         */
        bottomLineHeight: {
            type: String,
            default: '2px'
        },
        /**
         * 选中的索引
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
        /**
         * 选中的颜色
         */
        selectedColor: {
            type: String,
            default: '#00C8C8'
        },
        /**
         * 选中的 font-weight
         */
        selectedFontWeight: {
            type: String,
            default: 'bold'
        },
        /**
         * 文字颜色
         */
        color: {
            type: String,
            default: '#555555'
        },
        /**
         * 文字字号，单位为 px
         */
        fontSize: {
            type: Number,
            default: 14
        },
        /**
         * 背景色
         */
        backgroundColor: {
            type: String,
            default: '#F6F6F6'
        },
        /**
         * 选中的背景色
         */
        selectedBackgroundColor: {
            type: String,
            default: 'rgba(3, 208, 191, 0.1)'
        },
        /**
         * 底部边线
         */
        borderBottom: {
            type: Boolean,
            default: false
        },
        env: {
            type: String,
            default: 'swan'
        },
        /**
         * 是否有按钮
         */
        addIcon: {
            type: Boolean,
            default: false
        },
        borderRadius: {
            type: String,
            default: '3px'
        },
        scrollBorderRadius: {
            type: String,
            default: '45px'
        },
        paddingTop: {
            type: String,
            default: '15px'
        },
    },
    data() {
        return {
            // 内部维护的选中项索引
            mSelectedIndex: -1,
            scrollEndTimeOut: null
        };
    },
    watch: {
        selectedIndex(newVal, oldVal) {
            this.mSelectedIndex = newVal;
        }
    },
    created() {
        this.mSelectedIndex = this.selectedIndex;
    },
    methods: {
        handleItemTap(obj) {
            this.mSelectedIndex = obj.index;
            /**
             * 项点击事件
             *
             * @event itemtap
             * @property {object} param1.item 点击项
             * @property {number} param1.index 点击项索引
             */
            this.$emit('itemtap', obj);
        },
        handleScroll(e) {
            /**
             * 滚动事件，滚动时触发
             *
             * @event scroll
             * @property {object} param1.detail 当前滚动位置详细位置数据，参考：http://smartprogram.baidu.com/docs/develop/component/view/#scroll-view/
             * @property {number} param1.detail.deltaX X 轴偏移量
             * @property {number} param1.detail.deltaY X 轴偏移量
             * @property {number} param1.detail.scrollHeight 滚动区域高度
             * @property {number} param1.detail.scrollWidth 滚动区域宽度
             * @property {number} param1.detail.scrollLeft 当前位置距离滚动区域最左边的距离
             * @property {number} param1.detail.scrollTop 当前位置距离滚动区域最上边的距离
             */
            this.$emit('scroll', e);
            this.handleScrollEnd();
        },
        // 滚动结束方法，触发 scroll 的 500ms 内未再次触发 scroll 事件，则认为是 scrollend
        handleScrollEnd() {
            if (this.scrollEndTimeOut) {
                clearTimeout(this.scrollEndTimeOut);
                this.scrollEndTimeOut = null;
            }
            this.scrollEndTimeOut = setTimeout(() => {
                /**
                 * 滚动结束事件
                 *
                 * @event scrollend
                 */
                this.$emit('scrollend');
                this.scrollEndTimeOut = null;
            }, 500);
        },
        handleScrollToUpper() {
            /**
             * 滚动到顶部/左边触发
             *
             * @event scrolltoupper
             */
            this.$emit('scrolltoupper');
        },
        handleScrollToLower() {
            /**
             * 滚动到底部/右边触发
             *
             * @event scrolltolower
             */
            this.$emit('scrolltolower');
        },
        handleIconTap() {
            this.$emit('icontap');
        }
    }
};
</script>
<style lang="less" scoped>
.flex {
    display: flex;
    .item {
        flex: 1;
        text-align: center;
        box-sizing: border-box;
        .item-text {
            position: relative;
            display: inline-block;
            padding-top: 2px;
            padding-bottom: 2px;
        }
        .bottom-line-wrapper {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
        }
    }
}
.scroll-view {
    white-space: nowrap;
    font-size: 0;
    box-sizing: border-box;
    .item {
        position: relative;
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
        text-align: center;
        box-sizing: border-box;
        margin-right: 10px;
        .bottom-line-wrapper {
            position: absolute;
            padding-left: 17px;
            padding-right: 17px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
        }
    }
}
.navs {
    padding: 15px 0 10px 0;
    position: relative;
    .icon {
        width: 25px;
        height: 32px;
        margin: 15px 0 0 0;
        position: absolute; 
        z-index: 10;
        text-align: center;
        top: 0px;
        right: 0px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;      
    }
    .add-icon {
        font-size: 15px;
        width: 15px;
        height: 15px;
        line-height: 15px;
        border-radius: 15px;
        color: #333;
        border: 1px solid #333;
    }
}
</style>