<template>
    <view class="tab-container">
        <view class="tab-item-scroller">
            <text
                v-for="(item, index) in tags"
                :class="{'active': index === 0}"
                class="
                    tab-item
                    c-font-normal
                    c-color-title
                    c-gap-right-middle
                    c-gap-inner-left
                    c-gap-inner-right
                "
                @tap.stop="navigateToDoclist(item.url)"
            >
                {{ item.text }}
            </text>
        </view>
    </view>
</template>

<script>
/**
 * @file 医生列表筛选条件
 * @author chenhongfan
 *
 * '0' -- 医院主页
 * '1' -- 科室详情页
 * '2' -- 医生列表页
 */
import {ubcSend} from '@utils/log';

const PAGE_TYPE = {
    '0': 'hos_drlist_wz_clk',
    '1': 'depart_drlist_wz_clk',
    '2': 'drlist_wz_clk'
};

export default {
    config: {
        component: true
    },
    props: {
        tags: {
            type: Array,
            default: () => ([])
        },
        pageSource: {
            type: String,
            default: '0'
        },
        // ubc打点必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        navigateToDoclist(jumpUrl = '') {

            ubcSend(
                {
                    page: this.page,
                    type: 'clk',
                    value: PAGE_TYPE[this.pageSource],
                }
            );
            this.$emit('navigateToDoclist', jumpUrl,);
        }
    }
};

</script>

<style lang="less" scoped>
.tab-container {
    height: 33px;
    overflow: hidden;

    .tab-item-scroller {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 30px;
        overflow-y: hidden;
        overflow-x: auto;

        .tab-item {
            display: inline-block;
            height: 33px;
            line-height: 33px;
            text-align: center;
            background-color: #f5f5f5;
            border-radius: 9px;
            flex: 0 0 auto;

            &.active {
                // font-weight: 700;
                font-family: PingFang-SC-Medium !important;
                background-color: #e5faf8;
                color: #00c8c8;
            }
        }
    }
}
</style>
