<template>
    <view class="spe-topic-activity">
        <head-line
            :title="lives.title"
            :moreUrl="lives.moreUrl"
            :moreText="lives.moreTitle">
        </head-line>
        <view>
            <view
                v-for="(live, liveIndex) in lives.list"
                :key="liveIndex"
                :class="{
                    'c-gap-top-large': liveIndex !== 0
                }"
                @tap="onClickLives(live.url)"
                class="spe-topic-activity-list">
                <view
                    :class="[live.status !== 0 ? 'red' : 'gray']"
                    class="spe-topic-activity-list-status">
                    <view
                        :class="live.status !== 0 ? 'm-icon-shipin shipin' : (live.status === 2 ? 'm-icon-huifang huifang' : 'm-icon-yugao yugao')"
                        class="m-icon icon"></view>
                    <view
                    :class="live.status !== 0 ? 'shipin' : (live.status === 2 ? 'huifang' : 'yugao')"
                    class="c-font-small txt">{{ live.statusText }}</view>
                </view>
                <view class="spe-topic-activity-list-time">
                    <view>{{ live.time }}</view>
                    <view>{{ live.date }}</view>
                </view>
                <view class="spe-topic-activity-list-info c-line-clamp1">
                    <view
                        :class="[live.name ? 'c-line-clamp1' : 'c-line-clamp2']"
                        class="spe-topic-activity-list-info-title">
                        {{ live.title }}
                    </view>
                    <!-- 医生信息 -->
                    <view v-if="live.name" class="c-line-clamp1">
                        <text class="spe-topic-activity-list-info-name">{{ live.name }}</text>
                        <text v-if="live.level" class="c-gap-left-small spe-topic-activity-list-info-name">{{ live.level }}</text>
                        <text v-if="live.hospital" class="c-gap-left-small spe-topic-activity-list-info-name">{{ live.hospital }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @author xuyong08
 * @file 专家直播日历
 */
import HeadLine from './headLine';
import {navToBdBoxH5} from '../../../utils/navigate';

export default {
    config: {
        component: true
    },
    components: {
        'head-line': HeadLine
    },
    props: {
        lives: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {

        };
    },
    mounted() {

    },
    methods: {

        onClickLives(url) {
            navToBdBoxH5(url, {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });
        },

        onClickLivesMore(url) {
            navToBdBoxH5(url, {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.spe-topic-activity {
    padding: 0 .17rem;

    &-content {
        position: relative;
        border-radius: 15px 15px 0 0;
        padding: 17px;
        margin-top: -4.83%;
        background: #FFF;
        z-index: 1;
        margin-bottom: .45rem;

        &-header {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;

            &-title {
                display: flex;
                align-items: center;
                font-size: .19rem;
                color: #333;

                &-icon {
                    color: #00cfa3;
                    font-size: .22rem;
                }
            }

            &-more {
                font-size: .16rem;
                color: #999;
            }

            &.padding-top-zero {
                padding: 0 0 15px;
            }
        }
    }

    &-list {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        color: #333;
        font-size: 13px;
        line-height: 23px;
        box-shadow: 0 3.3px 16.7px 0 rgba(0, 0, 0, .08);
        background: #fff;
        border-radius: 6px;

        &-status {
            flex: none;
            white-space: nowrap;
            background: #fafafa;
            padding-top: 7px;
            padding-bottom: 7px;
            width: 60px;
            text-align: center;
            font-family: PingFang-SC-Regular;
            font-size: 10px;
            color: #00c8c8;
            letter-spacing: 0;
            text-align: center;
            line-height: 12px;

            &.red {
                color: #f86b62;
            }

            &.gray {
                color: #00C8C8;
                background: #FAFAFA;
                border-radius: 6px 0 0 6px;
            }

            .icon {
                font-size: 22px;
                line-height: 26px;
                padding-top: 1px;
            }

            .txt {
                line-height: 1;
                padding-top: 6px;
            }
        }

        &-time {
            flex: none;
            white-space: nowrap;
            margin-top: 7px;
            margin-bottom: 7px;
            border-right: 1px solid #f6f6f6;
            margin-right: 10px;
            width: 54px;
            text-align: center;
        }

        &-info {
            flex: 1;
            padding-top: 7px;
            padding-bottom: 7px;
            padding-right: .15rem;
            font-weight: bold;
            font-family: PingFang-SC-Medium;
            font-size: 14px;
            color: #333;
            letter-spacing: 0;
            line-height: 21px;

            &-name {
                font-size: 12px;
                color: #999;
            }

            &-title {
                margin: .03rem 0 0 0;
                font-family: PingFang-SC-Medium;
                font-size: 14px;
                color: #333333;
                letter-spacing: 0;
            }
        }
    }
}
</style>
