<template>
    <view class="search-labels c-gap-inner-bottom-ll">
        <view class="search-labels-title c-font-17 c-tac c-color-title">{{ title }}</view>
        <view class="search-labels-item c-row">
            <view 
                v-for="(item, index) in list" 
                :key="'searchLabel_' + index"
                class="search-labels-item-btn c-span4 c-tac c-gap-bottom-middle"
            >
                <text
                    class="search-labels-item-text c-color-title c-inline-block c-gap-inner-top-small c-gap-inner-bottom-small"
                    @tap="onJump(item)"
                >{{ item.text }}</text>
            </view>
        </view>
    </view>
</template>
<script>
/**
* @file 搜索标签列表
* @author tanjia01
* @categories 业务组件
* @tags [component]
*/
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 标题
         */
        title: {
            type: String
        },
        /**
         * 标签列表
         */
        list: {
            type: Array
        }
    },
    methods: {
        onJump(val) {
            this.$emit('searchByLabel', val);
        }
    }
};
</script>
<style lang="less" scoped>
.search-labels {
    padding-top: .17rem;
    &-title {
        font-family: PingFangSC-Medium;
        margin-bottom: .16rem;
    }
    &-item {
        flex-wrap: wrap;
        justify-content: flex-start; 
        &-btn {
            flex-grow: 0;
            &:nth-last-of-type(-n+3) {
                margin-bottom: 0; 
            }
        }
        &-text {
            border-radius: .09rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #F5F5F5;
            width: 100%;
        }
    }
}
</style>
