<template>
    <scroll-view
        scroll-x
        class="swiper-nav"
        :scroll-left="scrollLeft"
        :scroll-with-animation="true"
        :style="scrollComponentStyle"
    >
        <view class="swiper-nav-flex" :style="boxStyle">
            <view
                v-for="(item, index) in list"
                :key="index"
                class="swiper-nav-item-nav"
                :style="mIndex === index ? __selectedItemStyle : itemStyle"
                @tap="swiperNav(index)"
            >
                <text 
                    :style="mIndex === index ? selectedFontStyle : fontStyle"
                    class="swiper-nav-item-nav-text text-background"
                >{{ item.text }}</text>
            </view>
        </view>
    </scroll-view>
</template>
<script>
/**
 * @file 活动Navs定制化
 * @author mayifan02
 * @categories
 * @tags
 */
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import {send} from '@utils/log';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 数据
         * @property text 
         */
        list: {
            type: Array,
            default: () => ([])
        },
        /**
         * scroll组件样式
         */
        scrollComponentStyle: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 内部容器样式
         */
        boxStyle: {
            type: Object,
            default: () => {
                return {
                    padding: '9px 13px'
                };
            }
        },
        /**
         * 选中项
         */
        selectedIndex: {
            type: Number,
            default: 0
        },
        /**
         * 选中tab样式
         */
        selectedItemStyle: {
            type: Object,
            default: () => {
                return {
                    'box-shadow': '-0.122px -0.993px 2px 0px rgba(253, 201, 188, 0.004),inset 0px 2px 3px 0px rgba(232, 148, 5, 0.71),inset 0px 1px 1px 0px rgba(232, 148, 5, 0.52)',
                    'background-image': 'linear-gradient(to top, #fec871, #fee5b3)',
                    'font-weight': 'bold'
                };
            }
        },
        /**
         * tab样式
         */
        itemStyle: {
            type: Object,
            default: () => {
                return {
                    'line-height': '30px',
                    'padding': '0 11px',
                    'font-size': '18px',
                    'display': 'inline-block',
                    'border-radius': '333px'
                };
            }
        },
        /**
         * 选中文字样式
         */
        selectedFontStyle: {
            type: Object,
            default: () => {
                return {
                    'background-image': 'linear-gradient(to top, #f3410d, #ff7b52)'
                };
            }
        },
        /**
         * 文字样式
         */
        fontStyle: {
            type: Object,
            default: () => {
                return {
                    'background-image': 'linear-gradient(0 , #ffefcf, #ffefcf)'
                };
            }
        },
        /**
         * 日志参数
         */
        extra: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            windowWidth: 0,
            scrollLeft: 0,
            mIndex: 0
        };
    },
    computed: {
        __selectedFontStyle() {
            return Object.assign({}, this.fontStyle, this.selectedFontStyle);
        },
        __selectedItemStyle() {
            return Object.assign({}, this.itemStyle, this.selectedItemStyle);
        }
    },
    created() {
        this.windowWidth = getSystemInfo().windowWidth;
        this.mIndex = this.selectedIndex;
    },
    mounted() {
        this.setScollLeft(this.selectedIndex);
    },
    watch: {
        // 选择不同tab 横向滚动
        mIndex(nval, oval) {
            if (nval !== oval) {
                this.setScollLeft(nval);
            }
        },
        selectedIndex(nval, oval) {
            if (nval !== oval) {
                this.mIndex = nval;
            }
        }
    },
    methods: {
        setScollLeft(index) {
            let w = this.windowWidth;
            let leng = this.list.length;
            let disX = ((index - 1) * w) / leng;
            this.scrollLeft = disX;
        },
        swiperNav(index) {
            if (index !== this.mIndex) {
                this.mIndex = index;
                /**
                 * 点击按钮
                 */
                this.$emit('swiperNav', index);
                send({
                    type: 't',
                    action: 'click_act_tab',
                    extra: Object.assign({tabName: this.list[index].text}, this.extra)
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.swiper-nav {
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    white-space: nowrap;
    &-flex {
        display: flex;
        justify-content: space-between;
    }
}
.text-background {
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
}
</style>
