<template>
    <view
        v-if="videoMessage.type === 'text'"
        class="c-color-gray c-font-normal video-text"
    >
        {{ videoMessage.text }}
    </view>
    <view v-else>
        <view class="b-feed-video_box">
            <view class="b-feed-video_mask"/>
            <!-- 封面图 -->
            <c-image
                has-compress
                class="b-feed-video_img"
                :src="videoMessage.cover_images"
                :width="videoWidth + 'px'"
                :height="videoWidth / 1.785 + 'px'"
                mode="widthFix"
                :hack-white-stroke="false"
                radius="0.09rem"
                :is-round="false"
                :extra="{column: 5}"
            />
            <!-- 图标 -->
            <c-icon
                name="play"
                font-size="30px"
                class="b-feed-video_icon"
            />
            <!-- 视频时长 -->
            <view v-if="videoMessage.long" class="b-feed-video_time c-font-small">
                {{ videoMessage.long }}
            </view>
        </view>
        <!-- 标题 -->
        <view
            v-if="videoMessage.title"
            class="b-feed-video-title c-line-clamp2 cl-color-1f c-font-normal"
        >
            {{ videoMessage.title }}
        </view>
        <view class="b-feed-video-subtitle c-font-normal c-color-gray">
            <c-image
                v-if="videoDocOrHosImg"
                class="doctor-img c-gap-right-middle"
                :src="videoDocOrHosImg"
                has-compress
                width="0.14rem"
                height="0.14rem"
                :extra="{column: 1}"
                :hack-white-stroke="false"
            />
            <view class="c-line-clamp1">
                <text v-if="videoDocOrHosName" class="c-gap-right-middle"> {{ videoDocOrHosName }} </text>
                <text
                    v-if="videoMessage.expertDepartment"
                    class="c-gap-right-middle"
                > {{ videoMessage.expertDepartment }} </text>
                <text
                    v-if="videoMessage.ctime"
                    class="b-feed-video-subtitle-time c-color-gray c-font-normal"
                >
                    {{ videoMessage.ctime }}
                </text>
            </view>
        </view>
    </view>
</template>

<script>
/**
 *  @file 视频
 *  @author chenhongfan
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
export default {
    config: {
        component: true
    },
    components: {
        CIcon,
        CImage
    },
    props: {
        videoMessage: {
            type: Object,
            default: () => {}
        },
        videoWidth: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            videoDocOrHosName: '',
            videoDocOrHosImg: ''
        };
    },
    mounted() {
        if (this.videoMessage) {
            this.videoDocOrHosName = this.videoMessage.expertName
                ? this.videoMessage.expertName
                : this.videoMessage.hospitalName
                    ? this.videoMessage.hospitalName
                    : '';
            this.videoDocOrHosImg = this.videoMessage.expertPortrait
                ? this.videoMessage.expertPortrait
                : this.videoMessage.hospitalPic
                    ? this.videoMessage.hospitalPic
                    : '';
        }
    }
};
</script>

<style lang="less" scoped>
.b-feed {
    &-video {
        position: relative;

        &_img {
            position: relative;
            border-radius: 9px;

            &::before {
                content: ' ';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background:
                    linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0) 0%,
                        rgba(0, 0, 0, 0.17) 79%,
                        rgba(0, 0, 0, 0.4) 99%
                    );
            }
        }

        &_box {
            position: relative;
        }

        &_icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            color: #fff;
        }

        &_time {
            position: absolute;
            bottom: 8px;
            right: 8px;
            color: #fff;
        }

        &_title {
            height: .44rem;
        }

        &-subtitle {
            display: flex;
            align-items: center;

            &_time {
                position: relative;
                top: -5px;
                height: 24px;
            }
        }
    }
}

.video-subtitle {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 4px;
    left: 8px;
    color: #fff;
    width: 100%;

    &-img {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        border-radius: 50%;
    }
}

.doctor-img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
}

.video-text {
    text-align: center;
}
</style>
