<template>
    <view class="pannel">
        <img
            height="30px"
            class="pannel__img"
            src="https://med-fe.cdn.bcebos.com/specialDisease/%20tuberculosis/scienceNavis.png"
        >
        <scroll-view
            scroll-x
            :scroll-left="scrollLeft"
            :scroll-with-animation="true"
        >
            <view class="pannel__scroll">
                <view
                    v-for="(item, index) in list"
                    :id="`nav_${index}`"
                    :key="index"
                    class="pannel__scroll__item c-gap-right-middle c-font-normal"
                    :class="navFixed ? 'pannel__scroll__item--fixed' : ''"
                    :style="{
                        'color': navFixed && curNavSelected === index ? '#00c8c8' : '',
                        'background': navFixed && curNavSelected === index ? 'rgba(0,200,200,0.10)' : ''
                    }"
                    @tap="tagClick(index)"
                >
                    {{ item.text }}
                </view>
            </view>
        </scroll-view>
        <view class="pannel__mask"/>
    </view>
</template>

<script>
/**
 * @file 科普导航
 * @author shizhognwei02
 * @categories 业务组件
 * @tags [component]
 */
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
export default {
    config: {
        component: true
    },
    data() {
        return {
            scrollLeft: 0,
            windowWidth: 0,
        };
    },
    created() {
        this.windowWidth = getSystemInfo().screenWidth;
    },
    mounted() {
        this.setScollLeft(this.curNavSelected);
    },
    props: {
        list: {
            type: Array,
            default: () => ([])
        },
        navFixed: {
            type: Boolean,
            default: false
        },
        curNavSelected: {
            type: Number,
            default: 0
        }
    },
    watch: {
        // 选择不同tab 横向滚动
        curNavSelected(nval, oval) {
            if (nval !== oval) {
                this.setScollLeft(nval);
            }
        }
    },
    methods: {
        tagClick(id) {
            this.$emit('onTagClick', id);
        },
        setScollLeft(index) {
            let w = this.windowWidth;
            let leng = this.list.length;
            let disX = (((((index - 1) * w) / leng) * 3)).toFixed(0);
            this.scrollLeft = disX;
        }
    }
};
</script>

<style lang="less" scoped>
.pannel {
    display: flex;
    position: relative;

    &__scroll {
        display: flex;
        width: fit-content;
        padding-right: 0.05rem;
        // margin-left: .11rem;
        &__item {
            flex-shrink: 0;
            padding: .06rem .12rem;
            background: #fff;
            border-radius: .06rem;
            text-align: center;

            &--fixed {
                background: #f5f5f5;
            }
        }
    }

    &__img {
        margin-top: .02rem;
        margin-right: .11rem;
    }

    &__mask {
        position: absolute;
        right: -.3rem;
        top: 0;
        bottom: 0;
        width: .17rem;
        box-shadow: 0 0 .2rem .2rem #fff;
    }
}
</style>
