<template>
    <view class="weak-card-list">
        <view
            v-for="(item,index) in list"
            :key="'weakItem' + index"
            class="weak-card-name"
            :class="item.moreWords ? 'weak-card-name-padd' : ''"
        >
            <b-navigate
                :url="item.url"
                :extra="{
                    mod: mod,
                }"
                :log="{type: 'clk', value: dotProp.dotValue || '', ext: {value_id: dotProp.dotExt || ''}}"
            >
                {{ item.name }}
            </b-navigate>
        </view>
    </view>
</template>

<script>
    /**
     * @author yumingzhi
     * @file 模板弱卡
     */
import Navigate from '../../../common/navigate';

export default {
    config: {
        component: true
    },
    components: {
        'b-navigate': Navigate
    },
    props: {
        list: {
            type: Array,
            default: () => []
                
        },
        mod: {
            type: String,
            default: 'theme-weak-card'
        },
        dotProp: {
            type: Object,
            default: () => ({})
        }
    },
};
</script>
<style lang="less" scoped>
    .weak-card-list {
        overflow-y: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        padding: 0 17px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: 20px;

        .weak-card-name {
            display: inline-block;
            background: #f8f8f8;
            width: 93px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            color: #555555;
            font-size: .14rem;
            border-radius: 6px;
            margin-left: 12px;

            &:nth-child(1) {
                margin-left: 0;
            }
        }

        .weak-card-name-padd {
            width: auto;
            padding: 0 12px;
        }
    }

    .weak-card-list::-webkit-scrollbar {
        display: none;
    }
</style>
