<template>
    <view class="pannel">
        <view class="pannel__head">
            <text class="pannel__head__title c-font-big-less">{{ module.module_name }}</text>
            <text class="pannel__head__subtitle c-gap-left-middle">大家都在读的科普，不可错过</text>
        </view>
        <view class="pannel__cont">
            <scroll-view
                :scroll-x="true"
                style="height: .94rem;"
            >
                <view class="pannel__cont__scroll">
                    <view
                        v-for="(item, idx) in module.item_list"
                        :key="idx"
                        class="pannel__cont__scroll__item c-gap-right-middle"
                        @tap="detailTap(item.field_value)"
                    >
                        <view class="c-line-clamp2">
                            <img
                                v-if="item.field_value.type === '2'"
                                height="14px"
                                src="https://med-fe.cdn.bcebos.com/specialDisease/%20tuberculosis/video.png"
                                class="c-img-align pannel__cont__scroll__item__video"
                            >
                            <text class="c-font-normal c-text-middle">{{ item.field_value.title }}</text>
                        </view>
                        <view class="pannel__cont__scroll__item__hot">
                            <img
                                v-if="item.field_value.isHot === '1'"
                                width="13px"
                                height="13px"
                                class="c-img-align"
                                src="https://med-fe.cdn.bcebos.com/specialDisease/%20tuberculosis/hot.png"
                            >
                            <text
                                class="c-font-normal c-color-gray pannel__cont__scroll__item__hot__text"
                            >{{ item.field_value.readNum | formatReadNum }}阅读</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="pannel__cont__mask left"/>
            <view class="pannel__cont__mask right"/>
        </view>
    </view>
</template>

<script>
/**
 * @file 热门在读
 * @author shizhognwei02
 * @categories 业务组件
 * @tags [component]
 */
import {navigate} from '@baidu/med-utils/lib/Mars';
import {ubcSend} from '@utils/log';
export default {
    config: {
        component: true
    },
    props: {
        module: {
            type: Object,
            default: () => ({})
        },
        topicId: {
            type: [Number, String],
            default: ''
        }
    },
    methods: {
        detailTap(detail) {
            if (detail.link) {
                navigate({url: detail.link, urlType: '2'});
                ubcSend({
                    type: 'clk',
                    value: 'hot_content',
                    ext: Object.assign({
                        page_source_id: this.topicId,
                        page_source_key: 'id'
                    })
                });
            }
        }
    },
    filters: {
        formatReadNum(num) {
            let numStr = num.toString();
            if (numStr.length >= 5 && numStr.length <= 8) {
                let decimal = numStr.substring(numStr.length - 4, numStr.length - 3);
                return parseFloat(parseInt(num / 10000, 10) + '.' + decimal) + 'w';
            } else if (numStr.length > 8) {
                let decimal = numStr.substring(numStr.length - 8, numStr.length - 7);
                return parseFloat(parseInt(num / 100000000, 10) + '.' + decimal) + '亿';
            }
            return num;

        }
    }
};
/* eslint-disable */
</script>
<style lang="less" scoped>
.pannel {
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    background: #fff;
    background-repeat: no-repeat;
    background-size: contain;
    // background-image: url(https://med-fe.cdn.bcebos.com/specialDisease/%20tuberculosis/titlebg.png);
    &__head {
        padding: .06rem 0 .1rem .17rem;

        &__title {
            font-family: PingFangSC-Medium;
            color: #1f1f1f;
        }

        &__subtitle {
            font-family: PingFangSC-Regular;
            font-size: .14rem;
            color: #b8b8b8;
        }
    }

    &__cont {
        position: relative;
        background-color: #fff;
        padding-bottom: .15rem;

        &__mask {
            position: absolute;
            top: 0;
            bottom: 0;
            width: .17rem;
            height: .94rem;

            &.left {
                background-image: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.90) 39%, rgba(255, 255, 255, 0.00) 100%);
                left: 0;
            }

            &.right {
                right: 0;
                background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0.90) 39%, rgba(255, 255, 255, 0.00) 100%);
            }
        }

        &__scroll {
            display: flex;
            margin-left: .13rem;
            width: fit-content;
            padding-right: 0.05rem;

            &__item {
                width: 2.11rem;
                padding: .1rem .12rem;
                position: relative;
                height: .94rem;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                &__video {
                    margin-right: .04rem;
                }

                &__hot {
                    margin-bottom: .01rem;

                    &__text {
                        vertical-align: middle;
                        margin-left: .03rem;
                    }
                }

                &::after {
                    content: " ";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 200%;
                    height: 200%;
                    transform: scale(0.5);
                    transform-origin: left top;
                    box-sizing: border-box;
                    border: .01rem solid #eee;
                    border-radius: .2rem;
                }
            }
        }
    }
}

.c-img-align {
    vertical-align: middle;
    padding-left: 0;
}

.c-text-middle {
    vertical-align: middle;
}
</style>
