<template>
    <view>
        <view class="cardWrap" @tap="cardClick(liveCardInfo)">
            <!-- poster -->
            <view class="cardWrap__poster">
                <view
                    class="cardWrap__poster__bg"
                    :style="{
                        'background-image': 'url(' + liveCardInfo.cover + ')'
                    } | imgCompress('background-image', {column: 6})"
                />
                <view class="cardWrap__poster__mask"/>
                <c-label
                    label-type="live"
                    :live-status="liveCardInfo.status"
                    :live-time-text="liveCardInfo.time"
                    font-size="12"
                    class="cardWrap__poster__labelStatus"
                />
                <view v-if="liveCardInfo.playNum" class="cardWrap__poster__num c-font-13">
                    <c-icon name="hot"/>
                    {{ liveCardInfo.playNum }}人观看
                </view>
                <view
                    v-if="liveCardInfo.tag"
                    class="cardWrap__poster__rightTypeLabel"
                    :style="{
                        'background-image': liveCardInfo.tagColor,
                        'text-shadow': liveCardInfo.textShadow,
                    } | imgCompress('background-image')"
                >
                    {{ liveCardInfo.tag }}
                </view>
            </view>
            <!-- doctor info -->
            <view class="cardWrap__intro">
                <view
                    class="c-font-medium-less c-line-clamp2 c-color-1f c-gap-bottom-3"
                >{{ liveCardInfo.title }}</view>
                <view class="c-font-13 c-color-85 c-lh-19">
                    <text class="c-gap-right-small">{{ liveCardInfo.name }}</text>
                    <text>{{ liveCardInfo.expertLevel }}</text>
                </view>
                <view class="c-font-13 c-color-85 c-lh-19 c-line-clamp1 c-flex">
                    <view class="c-line-clamp1">{{ liveCardInfo.expertHospital }}</view>
                    <view v-if="liveCardInfo.hospitalLevel" class="c-gap-left-small c-flex-shrink">
                        <c-label text="三甲"/>
                    </view>
                </view>
                <!-- operate btn -->
                <login-btn
                    v-if="(liveCardInfo.subLiveStatus === 1 || liveCardInfo.subLiveStatus === 2)"
                    :disabled="isLogin"
                    @onLoginSuccess="btnClick(liveCardInfo)"
                    @onTapEndH5="btnClick(liveCardInfo)"
                >
                    <view
                        class="cardWrap__poster__op"
                    >
                        <view
                            class="c-inline-block cardWrap__poster__op__btn"
                            :class="liveCardInfo.subLiveStatus === 2
                                ? 'cardWrap__poster__op__btn-notreserve' : 'cardWrap__poster__op__btn-reserved'"
                            @tap.stop="btnClick(liveCardInfo)"
                        >
                            {{ liveCardInfo.subLiveStatus === 2 ? '预约' : '已预约' }}
                        </view>
                    </view>
                </login-btn>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 直播卡片
 * @author shizhongwei02
 * @categories 业务组件
 * @tags [component]
 */
import CLabel from '@baidu/med-ui/components/Label/Label';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import LoginBtn from '@commonComponents/login-btn';
import {navToBdBoxH5} from '@utils/navigate';
import {request} from '@utils/request';
import {toLoginPage} from '@utils/login';
import {ubcSend} from '@utils/log';
import * as Conf from '@utils/conf';
export default {
    config: {
        component: true
    },
    props: {
        liveCard: {
            type: Object,
            default: () => ({})
        },
        logIndex: {
            type: Number
        },
        logSrc: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            liveCardInfo: {},
            isLogin: false
        };
    },
    components: {
        CLabel,
        CIcon,
        LoginBtn
    },
    created() {
        this.liveCardInfo = Object.assign(this.liveCard);
    },
    methods: {
        btnClick(btn) {
            const btnStatus = btn.subLiveStatus;
            request({
                /* eslint-disable max-len */
                url: Conf.goJianKangApiHost
                    + (btnStatus === 2 ? '/hbdlive/v1/live/subscribe' : '/hbdlive/v1/live/unsubscribe'),
                /* eslint-enable max-len */
                method: 'GET',
                data: Object.assign({roomId: btn.roomId, cuid: this.cuid || ''}),
                isFirstScreen: false
            }).then(({data}) => {
                this.isLogin = data.isLogin;
                if (!this.isLogin) {
                    toLoginPage();
                    return;
                }
                this.$set(this.liveCardInfo, 'subLiveStatus', (btnStatus === 1 ? 2 : 1));
                this.$api.showToast({
                    icon: 'none',
                    title: btnStatus === 2 ? '预约成功' : '取消预约成功'
                });
            });
        },
        cardClick(info) {
            const isSwan = process.env.MARS_ENV === 'swan';
            navToBdBoxH5(info.h5Url, (info.status === '0' && isSwan) ? {
                module: 'live',
                action: 'enterRoom',
                parameters: {
                    params: {
                        roomId: info.roomId,
                        source: {
                            livesource: 'sbjkzbpd-xcx'
                        }
                    }
                }
            } : {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });

            ubcSend({
                type: 'clk',
                value: 'live',
                ext: Object.assign({
                    pd: 'live',
                    value_type: this.logSrc,
                    value_id: info.roomId,
                    pos: this.logIndex,
                    status: info.status
                })
            });
        }
    }
};
 /* eslint-disable */
</script>

<style lang="less" scoped>
.cardWrap {
    background: #fff;
    border-radius: .09rem;
    width: calc((100vw - 28px) / 2);

    &__poster {
        position: relative;

        &__bg {
            border-top-left-radius: .09rem;
            border-top-right-radius: .09rem;
            width: 100%;
            height: 1.09rem;
            background-size: cover;
        }

        &__mask {
            position: absolute;
            left: 0;
            top: 0;
            // height: 0;
            bottom: 0;
            width: calc((100vw - 28px) / 2);
            height: 1.09rem;
            /* eslint-disable max-len */
            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.17) 79%, rgba(0, 0, 0, 0.40) 99%);
            /* eslint-enable max-len */
        }

        &__labelStatus {
            position: absolute;
            top: .03rem;
            left: .06rem;
        }

        &__num {
            position: absolute;
            bottom: .05rem;
            left: .08rem;
            color: #fff;
        }

        &__rightTypeLabel {
            position: absolute;
            right: 0;
            bottom: .05rem;
            padding: .03rem .05rem .03rem .06rem;
            font-family: PingFangSC-Medium;
            font-size: .12rem;
            line-height: .12rem;
            text-shadow: 0 .02rem .04rem #ff6100;
            color: #fff;
            background-image: linear-gradient(-7deg, #ff9500 3%, #ffd36c 100%);
            border-radius: .15rem 0 0 .15rem;
        }

        &__op {
            margin-top: .09rem;

            &__btn {
                width: 100%;
                text-align: center;
                box-sizing: border-box;
                border-radius: .45rem;
                font-size: .14rem;
                line-height: .14rem;
                padding: .07rem;

                &-reserved {
                    background-color: #f5f5f5;
                    color: #525252;
                }

                &-notreserve {
                    background-color: #00c8c8;
                    color: #fff;
                }
            }
        }
    }

    &__intro {
        padding: .08rem .1rem .12rem;
    }
}

.c-color-1f {
    color: #1f1f1f;
}

.c-color-85 {
    color: #858585;
}

.c-lh-19 {
    line-height: .19rem;
}

.c-gap-bottom-3 {
    margin-bottom: 0.03rem;
}

.c-flex {
    display: flex;

    &-shrink {
        flex-shrink: 0;
    }
}
</style>
