<template>
    <view class="pcr-hot">
        <view>
            <view
                v-for="(hot, hotIndex) in data.list"
                :key="hotIndex"
                class="pcr-hot-i"
                :style="{
                    borderBottom: hideBorder && 'none',
                    paddingBottom: hotIndex === data.list.length - 1 && 0,
                }"
                @tap.stop="onJump(hot, hotIndex)"
            >
                <view class="pcr-hot-i-left" style="width: calc(100% - 50px);">
                    <view :class="['hot-tag-' + (hotIndex > 2 ? 'gray' : (hotIndex + 1)), 'hot-tag']">{{ hotIndex + 1 }}</view>
                    <view
                        v-if="hot.text"
                        class="c-gap-left-small c-font-normal c-line-clamp1"
                        style="max-width: calc(100% - 36px);"
                    >{{ hot.text }}</view>
                    <c-label
                        v-if="hot.tagText"
                        :text="hot.tagText"
                        :color="hot.tagColor"
                        class="c-gap-left-small"
                    />
                </view>
                <view class="c-color-gray c-font-small" style="width: 48px;text-align: right;">{{ hot.num }}</view>
            </view>
        </view>
        <view
            v-if="data.more"
            style="text-align: center;"
            class="c-gap-top-small"
            @tap.stop="onJump(data.more)"
        >
            <text class="c-font-normal" :style="{color: moreColor}">{{ data.more.text }}</text>
            <c-icon
                name="right"
                font-size="14px"
                class="c-gap-left-small"
                :style="{color: moreColor}"
            />
        </view>
    </view>
</template>

<script>
/**
* @file 机构
* @author chenshuo04
*/
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import {ubcSend} from '../../../utils/log';
import Label from '@baidu/med-ui/components/Label/LabelOld';
import Icon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        'c-label': Label,
        'c-icon': Icon
    },
    props: {
        data: {
            type: Object,
            required: true
        },
        hideBorder: {
            type: Boolean,
            default: false
        },
        moreColor: {
            type: String,
            default: '#ff6161'
        },
        topic: {
            type: String,
            default: ''
        },
        pageTopic: {
            type: String,
            default: ''
        },
        /* 城市 */
        city: {
            type: String,
            default: ''
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onJump(data, index) {
            if (data.tcUrl) {
                ubcSend({
                    page: this.page,
                    type: 'clk',
                    value: 'hot',
                    ext: {
                        pd: 'bx',
                        city: this.city,
                        value_id: index,
                        value_type: 'list',
                        page_type: this.pageTopic || ''
                    }
                });
                navToBdBoxH5(data.tcUrl);
            }
            else {
                navigate({
                    url: data.url || data.path,
                    log: {
                        page: this.page,
                        type: 'clk',
                        value: 'hot',
                        ext: {
                            pd: 'bx',
                            city: this.city,
                            value_id: index,
                            value_type: 'list',
                            page_type: this.pageTopic || ''
                        }
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.pcr-hot {
    &-i {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f1f1;
        &-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        &:last-child {
            border-bottom-width: 0;
        }
        &:first-child {
            padding-top: 0;
        }
    }
    .hot-tag {
        width: 17px;
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        border-radius: 6px;
        color: #fff;
        text-align: center;
        &-1 {
            background: #f33;
        }
        &-2 {
            background: #f60;
        }
        &-3 {
            background: #faa90e;
        }
        &-gray {
            background: #F2F2F2;
            color: #1F1F1F;
        }
    }
}
</style>
