<template>
    <view class="header-tab c-font-normal">
        <view
            v-for="(item, index) in data"
            :key="index"
            class="c-tac c-font-medium-less"
            :class="item.checked ? 'checked' : 'uncheck'"
            @tap="onTap(item)"
        >
            {{ item.text }}
        </view>
    </view>
</template>

<script>
import {navigate} from '@utils/navigate';
/**
 * @file 顶部tab切换
 * @author yinlejia
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
        };
    },
    components: {
    },
    props: {
        // 数据
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        // 日志前缀
        logValue: {
            type: String,
            default: '618_topbar_search'
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onTap(data) {
            if (data.targetUrl && !data.checked) {
                navigate({
                    url: data.targetUrl,
                    log: {
                        page: this.page,
                        type: 'clk',
                        value: this.logValue,
                        ext: {
                            pd: 'act'
                        }
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.header-tab {
    display: flex;
    align-items: center;
    width: 36vw;
    height: 32px;
    border-radius: 333px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.10);
}

.checked {
    width: 50%;
    height: 100%;
    line-height: 32px;
    border-radius: 333px;
    background-color: #fff;
    color: #dd1f2f;
}

.uncheck {
    width: 50%;
    height: 100%;
    line-height: 32px;
    color: #fff;
}
</style>
