<!--
 **@Description: 相关推荐大图样式
 * @Author: yantingxi
 -->
<template>
    <b-navigate
        :url="url"
        :extra="extra"
    >
        <view
            v-if="show"
            class="spe-topic-recommend-wrapper"
            @tap="onClick($event)"
        >
            <view
                v-if="topLine"
                class="c-line-top spe-topic-recommend-line"
            />
            <view
                class="spe-topic-recommend"
            >
                <view class="spe-topic-recommend-title c-line-clamp2">{{ title }}</view>
                <view class="spe-topic-recommend-image-warpper c-gap-top-small">
                    <view v-if="imgType === 'multiple'" class="c-row spe-topic-recommend-images-row">
                        <view
                            v-for="(img, imgIndex) in image"
                            :key="imgIndex"
                            class="c-span4 spe-topic-recommend-images-span"
                        >
                            <view
                                class="spe-topic-recommend-images"
                                :style="{
                                    'background-image': 'url(' + img + ')',
                                } | imgCompress('background-image', {column: 1})"
                            />
                        </view>
                    </view>
                    <view
                        v-else-if="showPlay"
                        class="spe-topic-recommend-videoimage"
                        :style="{
                            'background-image': 'url(' + image + ')',
                        } | imgCompress('background-image', {column: 1})"
                    >
                        <view class="spe-topic-recommend-videoimage-icon--wrapper">
                            <c-icon
                                name="play"
                                class="spe-topic-recommend-videoimage-icon"
                                font-size="24px"
                            />
                        </view>
                        <view v-if="duration" class="spe-topic-recommend-videoimage-duration">{{ videoTime }}</view>
                    </view>
                    <c-image
                        v-else
                        class="spe-topic-recommend-image"
                        :src="image"
                        :is-round="false"
                        :hack-white-stroke="false"
                        radius="5px"
                        width="100%"
                        height="71px"
                        hack-bg="radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%)"
                    />
                </view>
                <view class="spe-topic-recommend-doctor">
                    <view class="c-line-clamp1 spe-topic-recommend-doctor-hospital-text">
                        <text v-if="doctor.name" class="c-gap-right">{{ doctor.name }}</text>
                        <text v-if="doctor.rank" class="c-gap-right">{{ doctor.rank }}</text>
                        <text v-if="doctor.hospital" class="c-gap-right">{{ doctor.hospital }}</text>
                    </view>
                    <c-label
                        v-if="doctor.label"
                        :text="doctor.label"
                        color="gray"
                        class="spe-topic-recommend-doctor-hospital-label"
                    />
                    <view class="spe-topic-recommend-doctor-feedback">
                        <feedback
                            v-if="feedback"
                            :feedback="feedback"
                            @feedbackSure="feedbackSure"
                        />
                    </view>
                </view>
            </view>
        </view>
    </b-navigate>
</template>

<script>
/**
 *  @file index
 *  @author yantingxi
 */
import Label from '@baidu/med-ui/components/Label/LabelOld';
import image from '../../../components/common/image';
import Navigate from '../../../components/common/navigate';
import {navToBdBoxH5} from '../../../utils/navigate';
import {send} from '../../../utils/log';
import {formatDate} from './../../../utils/core';
import Feedback from './../Feeds/Feedback';
import CIcon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        title: String,
        doctor: {
            type: Object,
            default: () => {}
        },
        image: {
            type: [String, Array],
            default: ''
        },
        url: String,
        imgType: {
            type: String,
            default: 'one'
        },
        outLink: {
            type: String,
            default: ''
        },
        topLine: {
            type: Boolean,
            default: true
        },
        showPlay: {
            type: Boolean,
            default: false
        },
        duration: {
            type: String,
            default: ''
        },
        module: {
            type: String,
            default: ''
        },
        feedback: {
            type: Object,
            default: () => {}
        },
        log: String,
        page: String,
        logUrl: String
    },
    data() {
        return {
            show: true
        };
    },
    computed: {
        extra() {
            return {
                mod: this.module,
                page: this.page,
                logStr: encodeURIComponent(this.log),
                logUrl: this.logUrl
            };
        },
        videoTime() {
            return this.duration && formatDate(this.duration * 1000, 'mm:ss');
        }
    },
    components: {
        Feedback,
        'c-label': Label,
        'b-navigate': Navigate,
        'c-image': image,
        CIcon
    },
    methods: {
        onClick(e) {
            if (this.outLink) {
                if (process.env.MARS_ENV === 'h5') {
                    e.stopPropagation();
                }
                navToBdBoxH5(this.outLink, {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
                send({
                    type: 't',
                    action: 'click',
                    extra: this.extra
                });
            }
        },
        feedbackSure() {
            this.show = false;
            this.$emit('feedback-sure');
        }
    }
};
</script>

<style lang="less">
.spe-topic-recommend {
    padding: 15px 17px 15px;

    &-wrapper {
        background: #fff;
    }

    &-line {
        margin: 0 17px;
        border-top: 1px solid #f1f1f1;
        transform: scaleY(.5);
    }

    &-title {
        font-size: .19rem;
        color: #333;
        line-height: 25px;
    }

    &-images {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 66.67%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .02) inset;
        border-radius: 9px;

        &-row {
            justify-content: flex-start;
        }

        &-span {
            border-radius: 9px;
            flex: 0 0 auto !important;

            &:first-child {
                overflow: hidden;
            }

            &:last-child {
                overflow: hidden;
            }
        }
    }

    &-image {
        background-size: 100%;
        border-radius: 5px;
        overflow: hidden;
        background-position: center;
        background-repeat: no-repeat;

        &-warpper {
            position: relative;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 8px;
        }
    }

    &-videoimage {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .02) inset;
        border-radius: 9px;
        overflow: hidden;

        &-icon {
            margin-left: 3px;
            // font-size: 24px !important;
            &--wrapper {
                position: absolute;
                left: 50%;
                top: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: translate(-50%, -50%);
                border-radius: 100%;
                width: 48px;
                height: 48px;
                background: rgba(0, 0, 0, 0.40);
                color: #fff;
            }
        }

        &-duration {
            position: absolute;
            bottom: 5px;
            right: 5px;
            padding-left: 10px;
            padding-right: 10px;
            height: .2rem;
            line-height: .2rem;
            text-align: right;
            box-sizing: border-box;
            color: #fff;
            font-size: .1rem;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 10px;
        }
    }

    &-doctor {
        position: relative;
        display: flex;
        align-items: center;
        font-size: .12rem;
        color: #999;
        padding-right: 25px;

        &-avatar {
            margin-right: .07rem;
            box-sizing: border-box;
            flex: 0 0 auto;
        }

        &-hospital {
            display: flex;
            align-items: center;
            font-size: .12rem;

            &-text {
                height: 17px;
                line-height: 17px;
            }

            &-label {
                position: relative;
                top: -1px;
                flex: 0 0 auto;
            }
        }

        &-feedback {
            position: absolute;
            right: 0;
        }
    }
}
</style>
