<template>
    <b-navigate
        :url="url"
        :extra="extra"
    >
        <view class="spe-topic-v-wrapper" @tap="onClick($event)">
            <view
                v-if="topLine"
                class="c-line-top spe-topic-directory-line"
            />
            <view
                class="spe-topic-directory"
            >
                <view class="c-row">
                    <view
                        class="spe-topic-directory-content c-span8"
                        :class="{
                            'spe-topic-directory-content-has-img': !!image,
                        }"
                    >
                        <view
                            v-if="title"
                            class="spe-topic-directory-content-title c-line-clamp2"
                        >
                            {{ title }}
                        </view>
                        <view class="spe-topic-directory-content-statusText">
                            <view class="c-line-clamp1 spe-topic-directory-content-statusText-text">
                                <view
                                    v-if="statusText"
                                    :style="{background: status == 0 ? '#FA463F' : (status == 1 ? '#999' : (themeColor ? themeColor : '#00C8C8'))}"
                                    class="video-tag c-gap-right-small"
                                >
                                    <view
                                        :class="status == 0 ? 'icon-shipin' : (status == 1 ? 'm-icon-huifang' : 'm-icon-yugao')"
                                        class="m-icon icon"
                                    />
                                    {{ statusText }}
                                </view>
                                <view v-if="audience" class="c-gap-right spe-topic-directory-content-statusText-audience">{{ audience }} 万人观看</view>
                                <view  
                                    v-if="date"
                                    :class="{'c-gap-right': !time}"
                                    class="spe-topic-directory-content-statusText-audience"
                                >{{ date }}</view>
                                <view v-if="time" class="c-gap-right spe-topic-directory-content-statusText-audience">
                                    <text v-if="date">/</text>
                                    {{ time }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view
                        v-if="image"
                        class="spe-topic-directory-image-wrapper c-span4"
                    >
                        <view
                            class="spe-topic-directory-image"
                            :style="{
                                backgroundImage: 'url(' + image + ')',
                                paddingTop: isBaijiahao ? '56.25%' : '66.67%',
                            }"
                        >
                            <view class="spe-topic-directory-image-hack-white-stroke"/>
                            <view class="video-play">
                                <c-icon
                                    name="play"
                                    font-size="13.5px"
                                    :style="{color: '#ffffff'}"
                                />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="bottomLine"
                class="c-line-bottom spe-topic-directory-line-bottom"
            />
        </view>
    </b-navigate>
</template>

<script>
import Navigate from '../../../components/common/navigate';
import {navToBdBoxH5} from '../../../utils/navigate';
import {send} from '../../../utils/log';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import * as core from '../../../utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        title: String,
        image: {
            type: String,
            default: ''
        },
        outLink: {
            type: String,
            default: ''
        },
        url: String,
        topLine: {
            type: Boolean,
            default: true
        },
        bottomLine: {
            type: Boolean,
            default: false
        },
        module: {
            type: String,
            default: ''
        },
        statusText: {
            type: String,
            default: ''
        },
        status: {
            type: [Number, String],
            default: 0
        },
        audience: {
            type: String,
            default: ''
        },
        date: {
            type: String,
            default: ''
        },
        time: {
            type: String,
            default: ''
        },
        isBaijiahao: {
            type: Boolean,
            default: false
        },
        isNaLink: {
            type: Boolean,
            default: false
        },
        livesource: {
            type: String,
            default: 'jiankang'
        },
        themeColor: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            imgHeight: '',
        };
    },
    created() {
        const systemInfoSync = getSystemInfo();
        this.imgHeight = (systemInfoSync.screenWidth - 34) * 0.3333 * 0.5617 + 'px';
    },
    computed: {
        extra() {
            return {
                mod: this.module,
                status: this.status
            };
        }
    },
    components: {
        'b-navigate': Navigate,
        'c-icon': Icon,  
    },
    methods: {
        onClick(e) {
            if (this.outLink) {
                this.$emit('liveItem');
                if (process.env.MARS_ENV === 'h5') {
                    e.stopPropagation();
                }
                navToBdBoxH5(this.outLink, this.isNaLink ? {
                    module: 'live',
                    action: 'enterRoom',
                    parameters: {
                        params: {
                            roomId: core.getQueryObject(this.outLink)['room_id'],
                            source: {
                                livesource: this.livesource
                            }
                        }
                    }
                } : {
                    module: 'browser',
                    action: 'open',
                    parameters: {
                        simple: '1'
                    }
                });
                send({
                    type: 't',
                    action: 'click',
                    extra: this.extra
                });
            }
        }
    }
};
</script>

<style lang="less">
.icon {
    display: inline-block;
    margin-left: .01rem;
    vertical-align: bottom;
    font-size: .12rem;
    &-shipin {
        width: 10px;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(data:image/gif;base64,R0lGODlhCgAKAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEQ3QkM1NDcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEQ3QkM1NTcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4RDdCQzUyNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4RDdCQzUzNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQMAAQAsAAAAAAoACgAAAhCMj6nLnQAYNPPUC2PAmIICACH5BAUDAAEALAAABAAKAAMAAAIHBIKpaOthCgAh+QQFAwABACwIAAUAAgABAAACAgQKACH5BAUDAAEALAAAAwAKAAIAAAIGBIKpaAkFACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpYetQAAAh+QQFAwABACwEAAIABgACAAACBASCiVYAIfkEBQMAAQAsAAABAAoAAgAAAgUEgqkbVgAh+QQJAwABACwAAAAABgACAAACBASCiVYAIfkEBQMAAQAsAAAAAAoACgAAAg2MA3CobLminLTai2kBACH5BAkDAAEALAAAAAAKAAIAAAIFjG8AyFEAIfkECQMAAQAsAAAAAAoACgAAAgyMbwCouQijnLTaKwsAIfkECQMAAQAsAAAAAAoACgAAAhSMjwkGe82ag0HOS7OMUff7cRVQAAAh+QQJAwABACwAAAAACgAKAAACFIyPqQdgHVyUDc5XMbY839lt1FgAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB2CNYGiy0ufm1dj2bHlaAQAh+QQJAwABACwAAAAACgAKAAACEoyPqasA5lAMbtoKH8U7X69dBQAh+QQJAwABACwAAAAACgAKAAACEYyPqbvA4AJEU8JYL96ZbwMVACH5BAkDAAEALAAAAAAKAAoAAAIRjI+pywxgHpLh0WsjrJlrrBUAIfkECQMAAQAsAAAAAAoACgAAAhCMj6nLDOBgeIjOJy3OXPMCACH5BAkDAAEALAAAAAAKAAoAAAIRjI+py90ADEQzwIqvjFb3XQAAIfkEBQMAAQAsAAAAAAoACgAAAhGMj6nL3QAQNDPAii+NVvddAAAh+QQFAwABACwEAAQAAgABAAACAgQKACH5BAUDAAEALAEABQABAAEAAAICRAEAIfkEBQMAAQAsAAADAAoAAwAAAgeMA3DLpo0KACH5BAUDAAEALAQAAgAFAAQAAAIFBIKpi1AAIfkEBQMAAQAsAAAEAAIAAQAAAgIECgAh+QQFAwABACwEAAEAAgABAAACAgQKACH5BAUDAAEALAAAAwACAAEAAAICBAoAIfkECQMAAQAsAAAAAAoABQAAAgiMA3DL7Q9TAQAh+QQJAwABACwAAAAACgAKAAACD4wDcIvKlh50szaJs96sAAAh+QQJAwABACwAAAAACgAKAAACFIyPCJC3bZ5jQS5Lb944Xu91FVAAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB7DRkoOzRWps3bfbzG1gAQAh+QQJAwABACwAAAAACgAKAAACEoyPqQew0V5kDtY2MzZa8219BQAh+QQJAwABACwAAAAACgAKAAACEYyPqasA7FAM09VHrbl36+wVACH5BAUDAAEALAAAAAAKAAoAAAIRjI+pywzgYHjP1EmtpLvfDxQAIfkECQMAAQAsBAAEAAYAAgAAAgOMj1YAIfkECQMAAQAsAAAAAAoACgAAAgqMj6nL3QCcnLIAACH5BAkDAAEALAAAAAAKAAoAAAIQjI+py+0NgIlxykBvxdTaAgAh+QQFAwABACwAAAAACgAKAAACD4yPqcvtjwAwksoZar7WFgAh+QQFAwABACwAAAYAAgABAAACAgQKACH5BAUDAAEALAAABQAGAAIAAAIEBIKJVgAh+QQFAwABACwAAAQACgADAAACBgSCqctrBQAh+QQFAwABACwEAAUABgABAAACAwQSVgAh+QQFAwABACwAAAMACgACAAACBQSCqYtQACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpu4ZQAAAh+QQFAwABACwIAAMAAgABAAACAgQKACH5BAUDAAEALAAAAQAKAAMAAAIHBIKpG6aeCgAh+QQJAwABACwAAAAAAgABAAACAgQKACH5BAUDAAEALAAAAAAKAAoAAAILjI95AMgKo5y00gIAIfkECQMAAQAsAAAAAAoAAgAAAgWMbwDIUQAh+QQJAwABACwAAAAACgAKAAACC4xvAIjKD6OctNYCACH5BAkDAAEALAAAAAAKAAoAAAIUjI95AGrMXgtwRgqlvDzjbYWdVAAAIfkECQMAAQAsAAAAAAoACgAAAhSMj3kAahxalAzO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);
    }
}
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -13.5px;
    margin-left: -13.55px;
    width: 27px;
    height: 27px;
    background: rgba(0,0,0,.5);
    border-radius: 100%;
}
.bg-red {
    background: #FA463F;
}
.bg-common {
    background: #999;   
}
.bg-green {
    background: #00C8C8;
}
.video-tag {
    display: inline-block;
    width: 60px;
    height: 26px;
    color: #fff;
    border-radius: 30px;
    text-align: center;
    line-height: 26px;
    font-size: 12px;
    font-family: 'PingFang-SC-Medium';
    // transform: scale(0.83, 0.83);
    padding: 0 3.5px;
    opacity: 1;    
}
.spe-topic-directory {
    padding: 15px 17px 15px;

    &-wrapper {
        background: #FFF;
    }

    &-line {
        margin: 0 17px;
        border-top: 1px solid #f1f1f1;
    }

    &-line-bottom {
        margin: 0 17px;
    }

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

        &-title {
            // font-size: .18rem;
            // color: #333;
            // font-family: 'PingFang-SC-Regular';
            // line-height: .26rem;
            font-size: .19rem;
            line-height: 25px;
            color: #333;
        }

        &-statusText {
            display: flex;
            align-items: center;
            font-size: .12rem;
            &-text {
                height: 26px;
                line-height: 26px;
                background: #F8F8F8;
                border-radius: 12px;
                text-align: center;
            }
            &-audience {
                font-family: 'PingFang-SC-Regular';
                display: inline-block;
                font-size: .12rem;
            }
        }
    }

    &-image {
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        width:100%;
        padding-top:66.67%;
        background-size: auto 100%;
        background-position: center;

        &-wrapper {
            border-radius: 3px;
            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: 3px;
        }
    }

    .c-row {
        align-items: stretch;
    }
}
</style>
