<!--
 * @Description: 相关推荐左文右图
 * @Author: yantingxi
 -->
<template>
    <view>
        <view
            v-if="show"
            class="spe-topic-recommend-wrapper"
            :class="releReadUbcClass"
            @tap.stop="onClick"
        >
            <view
                v-if="topLine"
                class="c-gap-top-small c-line-superfine-after"
            />
            <view
                class="spe-topic-recommend"
                :style="{
                    padding: padding,
                }"
            >
                <view class="c-row">
                    <view
                        class="spe-topic-recommend-content c-span8"
                        :class="{
                            'spe-topic-recommend-content-has-img': !!image,
                        }"
                    >
                        <view class="spe-topic-recommend-content-headline">
                            <!-- 标题 -->
                            <view
                                v-if="title"
                                :style="{
                                    fontSize,
                                }"
                                :class="isYd ? 'spe-topic-recommend-content-title-yd' : ''"
                                class="spe-topic-recommend-content-title c-line-clamp2"
                            >
                                {{ title }}
                            </view>
                            <view
                                v-if="labelsMap['1'] && labelsMap['1'].length > 0"
                                class="spe-topic-recommend-content-title-labels"
                            >
                                <view
                                    v-for="(label, index) in labelsMap['1']"
                                    :key="index"
                                    class="spe-topic-recommend-content-title-label c-gap-left-small"
                                >
                                    <span
                                        v-if="label.src"
                                        :style="{
                                            backgroundImage: 'url(' + label.src + ')',
                                        }"
                                        class="spe-topic-recommend-content-title-label-icon"
                                    ></span>
                                </view>
                            </view>
                        </view>
                        <view
                            v-if="brief"
                            :class="['c-line-clamp' + clamp]"
                            class="spe-topic-recommend-content-brief"
                        >
                            {{ brief }}
                        </view>
                        <view v-if="twoLines && doctor">
                            <view class="spe-topic-recommend-content-doctor">
                                <c-image
                                    v-if="doctor.image"
                                    class="spe-topic-recommend-content-doctor-avatar"
                                    :src="doctor.image"
                                    :is-round="true"
                                    :has-border="true"
                                    width="24px"
                                    height="24px"
                                    hack-bg="radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.05) 100%)"
                                />
                                <view
                                    v-if="doctor.name || doctor.rank"
                                    class="c-line-clamp1 spe-topic-recommend-content-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>
                                </view>
                            </view>
                            <view
                                v-if="doctor.hospital || doctor.intro"
                                class="spe-topic-recommend-content-doctor"
                            >
                                <view class="c-line-clamp1 spe-topic-recommend-content-hospital-text">
                                    <text v-if="doctor.hospital" class="c-gap-right">{{ doctor.hospital }}</text>
                                    <text v-if="doctor.intro" class="c-gap-right">{{ doctor.intro }}</text>
                                </view>
                                <c-label
                                    v-if="doctor.label"
                                    :text="doctor.label"
                                    color="gray"
                                    class="spe-topic-recommend-content-hospital-label"
                                />
                            </view>
                        </view>
                        <view v-else-if="doctor" class="spe-topic-recommend-content-doctor">
                            <view
                                v-if="doctor.image"
                                :style="{
                                    'background-image': 'url(' + doctor.image + ')',
                                } | imgCompress('background-image', {column: 4})"
                                class="spe-topic-recommend-content-doctor-avatar"
                            />
                            <view class="spe-topic-recommend-content-hospital-text article-text">
                                <image
                                    v-if="docOrHosImg"
                                    :src="docOrHosImg"
                                    class="doctor-img c-gap-right-middle"
                                />
                                <view class="c-line-clamp1 c-font-normal">
                                    <text v-if="docOrHosName" class="c-gap-right-middle">{{ docOrHosName }}</text>
                                    <text
                                        v-if="doctor.expertDepartment"
                                        class="c-gap-right-middle"
                                    >{{ doctor.expertDepartment }}</text>
                                    <text v-if="doctor.name" class="c-gap-right-middle">{{ doctor.name }}</text>
                                    <text v-if="doctor.rank" class="c-gap-right-middle">{{ doctor.rank }}</text>
                                    <text v-if="doctor.intro" class="c-gap-right-middle">{{ doctor.intro }}</text>
                                </view>
                            </view>
                            <c-label
                                v-if="doctor.label"
                                :text="doctor.label"
                                color="gray"
                                class="spe-topic-recommend-content-hospital-label"
                            />
                            <view class="spe-topic-recommend-content-feedback">
                                <feedback
                                    v-if="feedback"
                                    :feedback="feedback"
                                    :auto-left="!!image"
                                    @feedbackSure="feedbackSure"
                                />
                            </view>
                        </view>
                    </view>
                    <view
                        v-if="image"
                        class="spe-topic-recommend-image-wrapper c-span4"
                        :class="dust ? 'dust' : ''"
                    >
                        <view
                            class="spe-topic-recommend-image"
                            :style="{
                                'background-image': 'url(' + image + ')',
                            } | imgCompress('background-image', {column: 3})"
                        >
                            <view class="spe-topic-recommend-image-hack-white-stroke"/>
                            <view v-if="duration && duration !== '0'" class="video-time">
                                <view class="video-time-mask"/>
                                <view class="video-time-text">{{ videoDuration }}</view>
                            </view>
                            <view v-if="showPlay" class="spe-topic-recommend-image-video-play">
                                <c-icon name="play" class="spe-topic-recommend-image-video-play-icon"/>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="bottomLine"
                class="c-line-superfine-after"
            />
        </view>
    </view>
</template>

<script>

/**
 *  @file index
 *  @author yantingxi
 */
import Label from '@baidu/med-ui/components/Label/LabelOld';
import image from '../../../components/common/image';
import {navToBdBoxH5, navigate} from '../../../utils/navigate';
import {ubcSend} from '../../../utils/log';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
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,
            default: ''
        },
        duration: {
            type: String,
            default: '0'
        },
        outLink: {
            type: String,
            default: ''
        },
        url: String,
        topLine: {
            type: Boolean,
            default: true
        },
        bottomLine: {
            type: Boolean,
            default: false
        },
        isYd: {
            type: Boolean,
            default: false
        },
        module: {
            type: String,
            default: ''
        },
        page: String,
        dust: {
            type: Boolean,
            default: false
        },
        twoLines: {
            type: Boolean,
            default: false
        },
        log: String,
        brief: String,
        clamp: String,
        showPlay: {
            type: Boolean,
            default: false
        },
        fontSize: {
            type: String,
            default: '0.17rem'
        },
        feedback: {
            type: Object,
            default: () => {}
        },
        labels: {
            type: Array,
            default: () => []
        },
        logUrl: String,
        padding: {
            type: String,
            default: '15px 17px 15px'
        },
        logExtra: {
            type: Object,
            default: () => ({})
        },
        releReadUbcClass: {
            type: String,
            default: ''
        },
        /**
         * 卡片类型 article or video
         */
        cardType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            videoDuration: 0,
            imgHeight: '',
            show: true,
            docOrHosName: '',
            docOrHosImg: ''
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.imgHeight = (systemInfoSync.screenWidth - 34) * 0.41667 * 0.5617 + 'px';
    },
    computed: {
        extra() {
            return {
                mod: this.module,
                page: this.page,
                logStr: encodeURIComponent(this.log),
                logUrl: this.logUrl
            };
        },
        labelsMap() {
            const labelsMapTemp = {};
            if (this.labels && this.labels[0]) {
                this.labels.map(label => {
                    if (!labelsMapTemp[label.position]) {
                        labelsMapTemp[label.position] = [].concat([label]);
                    } else {
                        labelsMapTemp[label.position] = labelsMapTemp[label.position].concat([label]);
                    }
                });
            }
            return labelsMapTemp;
        }
    },
    components: {
        Feedback,
        'c-label': Label,
        'c-image': image,
        CIcon
    },
    mounted() {
        if (this.duration && this.duration !== '0') {
            this.videoDuration = this.formateSeconds(this.duration);
        }

        if (this.doctor) {
            this.docOrHosImg = this.doctor.expertPortrait
                ? this.doctor.expertPortrait
                : this.doctor.hospitalPic
                    ? this.doctor.hospitalPic
                    : '';
            this.docOrHosName = this.doctor.expertName
                ? this.doctor.expertName
                : this.doctor.hospital
                    ? this.doctor.hospital
                    : '';
        }
    },
    methods: {
        onClick(e) {
            const contentid = this.extra.contentid;
            this.$emit('articlesDetailDot', contentid);
            if (this.outLink) {
                e.stopPropagation && e.stopPropagation();
                navToBdBoxH5(this.outLink, {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
                ubcSend({
                    type: 'clk',
                    value: this.cardType
                });
            } else {
                const __params = Object.assign({}, {url: this.url, urlType: this.urlType}, {
                    log: {
                        type: 'clk',
                        value: this.cardType
                    }
                });
                navigate(__params);
            }
        },
        formateSeconds(time) {
            let secondTime = parseInt(time, 10);
            let min = 0;
            let result = '';
            if (secondTime > 60) {
                min = parseInt(secondTime / 60, 10);
                secondTime = parseInt(secondTime % 60, 10);
            }
            result = `${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
            return result;
        },
        feedbackSure() {
            this.show = false;
            this.$emit('feedback-sure');
        }
    }
};
</script>

<style lang="less">
.dust {
    /* stylelint-disable declaration-block-no-duplicate-properties */
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    /* stylelint-enable declaration-block-no-duplicate-properties */
}

.spe-topic-recommend {
    padding: 15px 17px 15px;

    &-wrapper {
        background: #fff;
    }

    &-content {
        color: #999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &-headline {
            display: flex;
            flex-direction: row;
        }

        &-title {
            font-size: .19rem;
            line-height: 27px;
            color: #1f1f1f;

            &-labels {
                display: flex;
                flex: 0 0 auto;
                position: relative;
                top: -2px;
            }

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

                &-icon {
                    width: .17rem;
                    height: .17rem;
                    background-size: 100%;
                }
            }
        }

        &-title-yd {
            font-size: .17rem;
            line-height: .25rem;
        }

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

            &-avatar {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background-size: cover;
                background-repeat: no-repeat;
                border: 1px solid #f1f1f1;
                margin-right: .07rem;
                box-sizing: border-box;
                flex: 0 0 auto;
            }
        }

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

            &-text {
                height: 22px;
                line-height: 22px;
                display: flex;
                align-items: center;
            }

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

        &-feedback {
            position: absolute;
            right: 0;
        }

        &-brief {
            color: #555;
            margin-bottom: 6px;
            line-height: 24px;
        }
    }

    &-image {
        position: relative;
        border-radius: 4px;
        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;

        &-wrapper {
            border-radius: 9px;
            overflow: hidden;
        }

        &-hack-white-stroke {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            background: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.08) 100%);
            border-radius: 5px;
        }

        &-video-play {
            position: absolute;
            left: 50%;
            top: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translate(-50%, -50%);
            border-radius: 100%;
            width: 28px;
            height: 28px;
            background: rgba(0, 0, 0, 0.40);
            color: #fff;

            &-icon {
                margin-left: 3px;
                font-size: 16px !important;
            }
        }
    }

    .c-row {
        align-items: stretch;
    }

    .video-time {
        position: absolute;
        right: 4px;
        bottom: 4px;

        &-mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: #000;
            opacity: .3;
            border-radius: 6px;
        }

        &-text {
            position: relative;
            padding: 2px 6px;
            line-height: normal;
            font-size: 6px;
            font-family: 'PingFangSC-Semibold';
            color: #fff;
        }
    }
}

.doctor-img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 25px;
    background-size: 100% 100%;
}

.article-text {
    overflow: hidden;
}
</style>
