<template>
    <view class="tag">
        <view v-for="(item,index) in newList" :key="index">
            <view
                class="tag-item"
                :class="{'selected': item.selected}"
                @tap="tagClick(index)"
            >
                {{ item.name }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        list: {
            type: Array,
            default: () => ([])
        }
    },
    watch: {
        list: {
            handler (list) {
                this.newList = list;
            },
            immediate: true
        }
    },
    data() {
        return {
            newList: []
        };
    },
    methods: {
        tagClick (index) {
            this.newList.forEach((v, i) => {
                if (index === i) {
                    let selected = this.newList[index]['selected'];
                    v.selected = !selected;
                } else {
                    v.selected = false;
                }
            });
            this.$emit('tabSelect', this.newList);
        }
    }
};
</script>
<style lang="less" scoped>
    .tag {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    .tag-item {
        height: 33px;
        line-height: 33px;
        background: #FFFFFF;
        border-radius: 9px;
        text-align: center;
        padding: 0 12px;
        margin-right: 8px;
        color: #1f1f1f;
        white-space: nowrap;
    }
    .selected {
        background: #00C8C8;
        color: #fff;
        font-weight: 500;
    }
</style>
