<template>
    <!-- :style="{width: yidianLiveFloat.isStrong === 1 ? '78%' : '32%'}" -->
    <view
        :class="yidianLiveFloat.IP && yidianLiveFloat.IP * 1 === 3 ? 'live-room-wrapper-nobg' : ''"
        class="live-room-wrapper"
        @tap="onTapUrl(yidianLiveFloat.jumpType, yidianLiveFloat.jumpUrl)"
    >
        <view v-if="yidianLiveFloat.IP && yidianLiveFloat.IP * 1 === 3" class="live-room-wrapper-normal">
            <image src="https://med-fe.cdn.bcebos.com/yd%2Fyd-live-right.png" class="live-room-wrapper-normal-image"/>
            <view class="live-close" @tap.stop="closeEntry">
                <image
                    src="https://medical-cms.cdn.bcebos.com/pic/pic_1603435814122PU1zE0x5.png"
                    class="live-close-icon"
                />
            </view>
        </view>
        <view v-else class="live-room-wrapper-inner">
            <view v-if="yidianLiveFloat.doctorList" class="live-doctor-head">
                <swiper
                    :duration="300"
                    :interval="3000"
                    autoplay
                    :style="{
                        height: '100%',
                        width: '100%',
                    }"
                >
                    <swiper-item v-for="(item, index) in yidianLiveFloat.doctorList" :key="index">
                        <image
                            :src="item.vator + '?x-bce-process=image/resize,m_fill,w_200,h_200,align_0,limit_0'"
                            class="live-doctor-head-image"
                        />
                    </swiper-item>
                </swiper>
                <!-- <view class="live-doctor-head-play">
                    <view class="msui-iconfont icon ms-icon-play live-doctor-head-play-icon"></view>
                </view> -->
            </view>
            <view v-if="yidianLiveFloat.isStrong * 1 === 1" class="live-desc">
                <view class="live-desc-title c-font-wb c-line-clamp1">
                    {{ yidianLiveFloat.title }}
                </view>
                <view class="live-desc-subtitle c-line-clamp1">
                    {{ yidianLiveFloat.subTitle }}
                </view>
            </view>
            <view v-else class="live-desc">
                <view class="live-desc-title1 c-font-wb"> 权威专家 </view>
                <view class="live-desc-title1 c-font-wb"> 正在直播 </view>
            </view>
            <view
                v-if="yidianLiveFloat.isStrong * 1 === 0"
                class="live-close"
                @tap.stop="closeEntry"
            >
                <image
                    src="https://medical-cms.cdn.bcebos.com/pic/pic_1603435814122PU1zE0x5.png"
                    class="live-close-icon"
                />
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 词条右下角直播
 * @author yumingzhi
 * @categories
 * @tags
 */
import {navToBdBoxH5, navigate} from '@utils/navigate';
import {send} from '@utils/log';
import * as core from '@utils/core';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {},
    props: {
        /**
         * 数据
         */
        yidianLiveFloat: {
            type: Object,
            default: () => ({})
        },
        /**
         * 日志参数
         */
        module: {
            type: String,
            default: ''
        },
        /**
         * 数据
         */
        page: {
            type: String,
            default: ''
        }
    },
    methods: {
        onTapUrl(jumpType, jumpUrl) {
            // 兼容直播间跳转
            if (jumpUrl.indexOf('mbd.baidu.com') > -1 && jumpUrl.indexOf('room_id') > -1) {
                navToBdBoxH5(jumpUrl, {
                    module: 'live',
                    action: 'enterRoom',
                    parameters: {
                        params: {
                            roomId: core.getQueryObject(jumpUrl)['room_id'],
                            source: {
                                livesource: 'health_yd'
                            }
                        }
                    }
                });
            } else if (jumpType === 'tcUrl') {
                navToBdBoxH5(jumpUrl);
            } else if (jumpType === 'unifiUrl') {
                navigate({url: jumpUrl});
            }
            send({
                type: 't',
                action: 'click',
                extra: {
                    mod: this.module,
                    page: this.page
                }
            });
        },
        closeEntry() {
            /**
             * 关闭弹唱
             */
            this.$emit('closeEntry', true);
        }
    }
};
</script>
<style lang="less" scoped>
.live-room-wrapper {
    position: fixed;
    right: 0;
    bottom: 225px;
    // overflow: hidden;
    max-width: 78%;
    background: rgb(0, 200, 200);
    box-shadow: 0 0 10px 0 rgba(0, 200, 200, 0.16);
    border-radius: 27px 0 0 27px;
    .live-room-wrapper-inner {
        position: relative;
        height: 54px;
        padding: 0 8px 0 4px;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        align-items: center;
    }
    .live-doctor-head {
        width: 45px;
        height: 45px;
        position: relative;
        flex-shrink: 0;
        .live-doctor-head-image {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 50%;
        }
        .live-doctor-head-play {
            width: 45px;
            height: 45px;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            &-icon {
                font-size: 18px;
                margin: 13.4px;
            }
        }
    }
    .live-desc {
        overflow: hidden;
        flex: 1;
        margin-left: 7px;
    }
    .live-desc-title {
        font-size: 15px;
        line-height: 21px;
    }
    .live-desc-title1 {
        font-size: 13px;
        line-height: 15px;
    }
    .live-desc-subtitle {
        font-size: 12px;
        line-height: 17px;
    }
    .live-close {
        position: absolute;
        right: 8px;
        top: -22px;
        .live-close-icon {
            width: 16px;
            height: 16px;
            display: block;
        }
    }
    .live-room-wrapper-normal {
        position: relative;
        .live-room-wrapper-normal-image {
            width: 100px;
            height: 88px;
        }
    }
}
.live-room-wrapper-nobg {
    background: transparent;
    box-shadow: none;
}
</style>
