<template>
    <view
        class="live-calendar"
        @tap="onClickLives({
            url: live.outLink,
            xcxUrl: live.xcxUrl,
            extra: {
                mod: page + '-calendar-' + index,
            },
            isNaLink: live.status * 1 !== -1,
        })"
    >
        <view
            :class="[live.status * 1 === 0 ? 'red' : 'gray']"
            class="live-calendar-status"
        >
            <view
                :class="live.status * 1 === 0 ? 'm-icon-shipin shipin' : (live.status * 1 === 1 ? 'm-icon-huifang huifang' : 'm-icon-yugao yugao')"
                class="m-icon icon"
            />
            <view
                :class="live.status * 1 === 0 ? 'shipin' : (live.status * 1 === 1 ? 'huifang' : 'yugao')"
                class="c-font-small txt"
            >{{ live.statusText }}</view>
        </view>
        <view class="live-calendar-time">
            <view>{{ live.time }}</view>
            <view>{{ live.formatDate }}</view>
        </view>
        <view class="live-calendar-info c-line-clamp1">
            <view 
                :class="[live.doc_info ? 'c-line-clamp1' : 'c-line-clamp2']"
                class="live-calendar-info-title"
            >
                {{ live.title }}
            </view>
            <!-- 医生信息 -->
            <view v-if="live.doc_info" class="c-line-clamp1">
                <text 
                    v-for="(name, i) in live.doc_info"
                    :key="i"
                    class="live-calendar-info-name"
                >
                    {{ name }}
                </text>
            </view>
        </view>
    </view>
</template>

<script>

/**
 *  @file 直播日历单条
 *  @author yumingzhi
 */
/* eslint-disable */ 
import {send} from '../../../utils/log';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import * as core from '../../../utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        page: {
            type: String,
            default: 'feed'
        },
        live: {
            type: Object,
            default: () => {}
        },
        index: {
            type: Number,
            default: 0
        },
        livesource: {
            type: String,
            default: 'jiankang'
        }
    },
    data() {
        return {
            timer: null
        };
    },
    methods: {
        onClickLives(params) {
            this.$emit('liveListTap');
            if (params.xcxUrl) {
                navigate({url: params.xcxUrl, extra: params.extra});
            } else if (params.url) {
                navToBdBoxH5(params.url, params.isNaLink ? {
                    module: 'live',
                    action: 'enterRoom',
                    parameters: {
                        params: {
                            roomId: core.getQueryObject(params.url)['room_id'],
                            source: {
                                livesource: this.livesource
                            }
                        }
                    }
                } : {});
                send({
                    type: 'l',
                    action: 'navigate2h5',
                    extra: params.extra
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.shipin {
    color: #FA463F;
}
.huifang {
    color: #999999;    
}
.yugao {
    color:  #00C8C8;
}
.live-calendar {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    color: #333;
    font-size: 13px;
    line-height: 18px;
    box-shadow: 0 3.3px 16.7px 0 rgba(0,0,0,.08);
    background: #FFFFFF;
    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;
    }
    &-time {
        flex: none;
        white-space: nowrap;
        margin-top: 13px;
        margin-bottom: 7px;          
        border-right: 1px solid #f6f6f6;
        margin-right: 10px;
        width: 59px;
        text-align: center;
    }
    &-info {
        flex: 1;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-right: .15rem;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        line-height: 21px;
        display: flex;
        align-items: center;
        &-name {
            font-size: 12px;
            color: #999;
        }
        &-title {
            margin: 0.03rem 0 0 0;
            font-family: PingFang-SC-Regular;
            font-size: 14px;
            color: #333333;
            letter-spacing: 0;
        }
    }
}
</style>

<style lang="stylus">
.live-calendar {
    &-status {
        &.red {
            color: #f86b62;
        }
        &.gray {
            color: #00C8C8;
            background: #FAFAFA;
            border-radius: 6px 0px 0px 6px;
        }
        .icon {
            font-size: 18px;
            line-height: 26px;
            padding-top: 1px;
        }
        .txt {
            line-height: 1;
            padding-top: 3px;
        }
    }
}
</style>