<template>
    <view class="topic-scroll-wrap">
        <scroll-view
            :style="{
                height: 'auto',
            }"
            scroll-x
            class="topic-scroll"
        >
            <view
                class="topic-scroll-list"
                :class="[
                    isTopicNew ? 'new-topic-scroll-list' : '',
                    isZhuanLanNew ? 'new-zhuanlan-scroll-list' : '',
                    hotTopicItemUbcClass, bigDoctorItemUbcClass,
                ]"
            >
                <!-- :class="[hotTopicItemUbcClass, bigDoctorItemUbcClass]" -->
                <view
                    v-for="(topic, index) in topics.list"
                    :id="'topic-' + index"
                    :key="index"
                    class="topic-scroll-item"

                    @tap="tapUrl(topic, topics.type || topics.moduleDisPlayName || topics.status)"
                >
                    <view
                        v-if="topic.imgUrl"
                        class="topic-scroll-item-image"
                    >
                        <c-image
                            has-compress
                            :src="topic.imgUrl"
                            :is-round="false"
                            :radius="isTopicNew || isZhuanLanNew ? '6px' : '6px 6px 0 0'"
                            width="100%"
                            :height="isTopicNew ? '31vw' : '24vw'"
                            hack-bg="radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%)"
                        />
                    </view>
                    <view class="topic-scroll-item-wrap">
                        <view
                            v-if="topic.name && !topic.content"
                            class="topic-scroll-item-text"
                            :class="isZhuanLanNew ? 'c-line-clamp2' : 'c-line-clamp1'"
                        >{{ topic.name }}</view>
                        <view
                            v-if="topic.statusText"
                            class="intro-text c-line-clamp1"
                        >
                            <view
                                class="label"
                                :class="topic.statusColor === '#999999'
                                    ? 'gray'
                                    : (topic.statusColor === '#FE7C6C' ? 'orange' : 'blue')"
                            >
                                {{ topic.statusText }}
                            </view>
                            <view v-if="topic.timeStr" class="date">{{ topic.timeStr }}</view>
                        </view>
                        <view v-if="topic.content && topic.content.length">
                            <view
                                v-for="(item, index) in topic.content"
                                :key="index"
                                class="c-line-clamp1 topic-scroll-item-topic-question"
                            >{{ item.name }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
/**
 * @author xuyong08
 * @file 专题
 */
import CImage from '../../common/image';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';

export default {
    config: {
        component: true
    },
    components: {
        CImage
    },
    props: {
        // 是否为热点专题新样式
        isTopicNew: {
            type: Boolean,
            default: false
        },
        // 是否为大医生专栏新样式
        isZhuanLanNew: {
            type: Boolean,
            default: false
        },
        // 标题
        topics: {
            type: Object,
            default: () => {}
        },
        // 热点专题单个曝光
        hotTopicItemUbcClass: {
            type: String,
            default: ''
        },
        // 你好大医生单个曝光
        bigDoctorItemUbcClass: {
            type: String,
            default: ''
        }
    },
    methods: {
        tapUrl(data, topicsType) {
            let eventName = '';
            switch (topicsType) {
                case '2':
                    eventName = 'seeTopicDetail';
                    break;
                case '4':
                    eventName = 'seeDocDetail';
                    break;
                case '往期专题':
                    eventName = 'yetTopicsItem';
                    break;
                case '0':
                    eventName = 'ydSelectItem';
                    break;
                default:
                    eventName = '';
                    break;
            }
            this.$emit(eventName);
            switch (data.jumpType) {
                case 'xcx':
                    this.$api.navigateToSmartProgram({
                        appKey: data.xcx.appKey,
                        path: data.xcx.url
                    });
                    break;
                case 'h5Url':
                    if (data.duWord) {
                        this.$api.setClipboardData({
                            data: data.duWord,
                            complete: () => {
                                window.location.href = data.jumpUrl;
                            }
                        });
                    }
                    else {
                        window.location.href = data.jumpUrl;
                    }
                    break;
                case 'tcUrl':
                    if (process.env.MARS_ENV === 'h5') {
                        window.location.href = data.jumpUrl;
                    }
                    else if (process.env.MARS_ENV === 'swan') {
                        navToBdBoxH5(data.jumpUrl);
                    }
                    break;
                case 'unifiUrl':
                    navigate({url: data.jumpUrl});
                    break;
                case 'unifiUrlxcx':
                    navigate({url: data.jumpUrl});
                    break;
                default:
                    navigate({url: data.jumpUrl});
                    break;
            }
        },
        onClickMore(url) {
            navToBdBoxH5(url, {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.topic-scroll {
    white-space: nowrap;

    .topic-scroll-list {
        padding: 0 17px;
    }

    &-item {
        display: inline-block;
        width: 64%;
        padding: 0 0 14px 0;
        background: #fff;
        vertical-align: top;
        margin-right: 8px;

        &:nth-last-child(1) {
            margin-right: 17px;
        }

        &-wrap {
            box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.08);
            border-radius: 0 0 6px 6px;
            padding: 10px;
        }

        &-text {
            font-size: 15px;
            color: #333;
        }

        .intro-text {
            display: flex;
            align-items: center;
            color: #999;
            margin-top: 3px;

            .label {
                margin-right: 4px;
                padding: 3px 5px;
                font-size: 10px;
                border-radius: 20px;
                line-height: 1;
            }

            .gray {
                color: #999;
                border: 1px solid #f2f2f2;
            }

            .orange {
                color: #fe7c6c;
                border: 1px solid rgba(254, 124, 108, 0.3);
            }

            .blue {
                color: #00d1c8;
                border: 1px solid rgba(0, 209, 200, 0.3);
            }

            .date {
                font-size: 12px;
            }
        }
    }

    .new-topic-scroll-list {
        padding: 0;

        .topic-scroll-item {
            width: 80%;
            margin-right: 8px;
            padding-bottom: 0;
            vertical-align: top;
        }

        .topic-scroll-item-wrap {
            box-shadow: none;
            padding: 8px 0;
        }

        .topic-scroll-item-topic-question {
            position: relative;
            font-size: 15px;
            color: #1f1f1f;
            line-height: 30px;
            padding: 0 10px;
            font-family: PingFangSC-Regular;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                transform: translateY(-50%);
                background: #ccc;
            }
        }
    }

    .new-zhuanlan-scroll-list {
        padding: 0;

        .topic-scroll-item-wrap {
            padding: 7px 0 0 0;
            box-shadow: none;
        }

        .topic-scroll-item-text {
            font-size: 15px;
            color: #1f1f1f;
            line-height: 23px;
            margin-bottom: 0;
        }
    }
}
</style>
