<template>
    <b-navigate
        :url="url"
        :extra="extra"
    >
        <view class="spe-topic-directory-wrapper" @tap="onClick($event)">
            <view
                v-if="topLine"
                class="c-line-top spe-topic-directory-line"
            >
            </view>
            <view
                class="spe-topic-directory"
            >
                <view
                    v-if="image"
                    class="spe-topic-directory-image-wrapper"
                >
                    <view
                        class="spe-topic-directory-image"
                    >
                        <c-image
                            has-compress
                            width="100%"
                            height="auto"
                            :src="image"
                            :is-round="false"
                        />
                    </view>
                    <view class="video-play">
                        <c-icon
                            name="play"
                            font-size="24px"
                            :style="{color: '#ffffff'}"
                        >
                        </c-icon>
                    </view>
                    <view class="video-status">
                        <view
                            v-if="statusText"
                            :class="['video-tag',status == 0 ? 'bg-red' : (status == 1 ? 'bg-common' : 'bg-green')]"
                            class="c-gap-right-small"
                        >
                            <view
                                :class="status == 0 ? 'icon-shipin' : (status == 1 ? 'm-icon-huifang' : 'm-icon-yugao')"
                                class="m-icon icon"
                            ></view>
                            {{ statusText }}
                        </view>
                        <view v-if="audience" class="c-gap-right video-status-text">{{ audience }} 万人观看</view>
                    </view>
                    <!-- 浮层 -->
                    <view v-if="title || date || time" class="video-mask">
                        <view class="video-mask-text">
                            <view v-if="title" class="c-line-clamp1">{{ title }}</view>
                            <view
                                v-if="date || time"
                                class="c-line-clamp1 c-font-small"
                            >{{ date }}<text v-if="date" class="c-gap-right-small"></text>{{ time }}开播</view>
                        </view>
                    </view>
                </view>
            </view>
            <view
                v-if="bottomLine"
                class="c-line-bottom spe-topic-directory-line-bottom"
            >
            </view>
        </view>
    </b-navigate>
</template>

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

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        image: {
            type: String,
            default: ''
        },
        outLink: {
            type: String,
            default: ''
        },
        module: {
            type: String,
            default: ''
        },
        url: String,
        topLine: {
            type: Boolean,
            default: true
        },
        bottomLine: {
            type: Boolean,
            default: false
        },
        statusText: {
            type: String,
            default: ''
        },
        status: {
            type: [Number, String],
            default: 0
        },
        audience: {
            type: String,
            default: ''
        },
        bannerHeight: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        date: {
            type: String,
            default: ''
        },
        time: {
            type: String,
            default: ''
        },
        isNaLink: {
            type: Boolean,
            default: false
        },
        livesource: {
            type: String,
            default: 'jiankang'
        }
    },
    data() {
        return {
        };
    },
    computed: {
        extra() {
            return {
                mod: this.module,
                status: this.status
            };
        }
    },
    components: {
        'b-navigate': Navigate,
        'c-icon': Icon,
        CImage
    },
    methods: {
        onClick(e) {
            if (this.outLink) {
                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">
.video-mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .06rem;
    padding: .2rem .15rem .05rem .15rem;
    color: #fff;
    font-size: .15rem;
    font-family: PingFang-SC-Regular;
    line-height: .18rem;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);

    &-text {
        width: 66.7%;
    }
}

.icon {
    display: inline-block;
    margin-left: .01rem;
    vertical-align: bottom;
    font-size: .11rem;

    &-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+QQJAwABACwAAAAACgAKAAACC4xvAIjKD6OctNYCACH5BAkDAAEALAAAAAAKAAoAAAIUjI95AGrMXgtwRgqlvDzjbYWdVAAAIfkECQMAAQAsAAAAAAoACgAAAhSMj3kAahxalAzOVzG2PN/ZbdRYAAAh+QQJAwABACwAAAAACgAKAAACE4yPqQuAbRoMUzp6bcxy78qBWwEAIfkECQMAAQAsAAAAAAoACgAAAhOMj6kLgG3gkY26UK+1sfbOYUABACH5BAkDAAEALAAAAAAKAAoAAAITjI+pC4Bt4JEyutDozbtr+2FAAQAh+QQJAwABACwAAAAACgAKAAACEYyPqcsGgJ6DR4ZnM55Td6oVACH5BAkDAAEALAAAAAAKAAoAAAIRjI+pywaAnoNHBjun3Y9yPhUAIfkEBQMAAQAsAAAAAAoACgAAAhGMj6nLDGAekoFGWB+menvuFQAh+QQFAwABACwAAAAAAQABAAACAkwBACH5BAUDAAEALAEAAwAFAAQAAAIGjAGmG6kFACH5BAUDAAEALAAAAwAKAAQAAAIIjG8AyM3rQgEAIfkEBQMAAQAsBAACAAIAAQAAAgIECgAh+QQFAwABACwJAAIAAQABAAACAkQBACH5BAUDAAEALAgAAgABAAEAAAICRAEAIfkEBQMAAQAsAAABAAYABQAAAgeMA3DLnVsAACH5BAUDAAEALAkAAQABAAEAAAICRAEAIfkEBQMAAQAsCAABAAEAAQAAAgJEAQAh+QQFAwABACwEAAAAAgABAAACAgQKACH5BAkDAAEALAAAAAAKAAYAAAIIjG8AyO0PYygAIfkECQMAAQAsAAAAAAoACgAAAhGMjwhgqxzckbLBGi9MvPt/FAAh+QQJAwABACwAAAAACgAKAAACFIyPeQDI9lYLEc5KL9M2+m11XFYAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pC4Bt4JEyutDozbtr+2FAAQAh+QQJAwABACwAAAAACgAKAAACEoyPqasA5lAMEz7q7sy6b99ZBQAh+QQJAwABACwAAAAACgAKAAACEYyPqcsGgJ6DR4ZnM55Td6oVACH5BAkDAAEALAAAAAAKAAoAAAIRjI+py30AEDTzxQCrzvRmDxYAIfkECQMAAQAsAAAAAAoACgAAAhGMj6nL3QAMRDPAiq+MVvddAAAh+QQJAwABACwAAAAACgAKAAACEIyPqcvtDYCJccpAb8XU2gIAIfkECQMAAQAsAAAAAAoACgAAAhGMj6nL7QmAitHUQCXW2XJQAAAh+QQFAwABACwAAAAACgAKAAACEIyPqcudABg8kdYZIN7a8AIAIfkEBQMAAQAsBAAGAAYAAQAAAgNEDlAAIfkEBQMAAQAsAAAEAAYAAgAAAgQEgolWACH5BAUDAAEALAAAAwAKAAMAAAIHBIKpaOthCgAh+QQFAwABACwEAAMABgACAAACBASCiVYAIfkEBQMAAQAsAAACAAoAAgAAAgUEgqkbVgAh+QQFAwABACwAAAEABgACAAACBASCiVYAIfkEBQMAAQAsAAAAAAoAAwAAAgcEgqlo62EKACH5BAkDAAEALAAAAAAKAAIAAAIFjI95AAUAIfkECQMAAQAsAAAAAAoACgAAAg2MA3CobLminLTai2kBACH5BAkDAAEALAAAAAAKAAoAAAITjG8AqKkbWnzOyUunhRjvOnlTAQAh+QQJAwABACwAAAAACgAKAAACFIyPeQDR/hgzE9YracxQY7+BmlYAACH5BAkDAAEALAAAAAAKAAoAAAIUjI+pB2DdngtwRgqlvDzjbYWdVAAAIfkECQMAAQAsAAAAAAoACgAAAhOMj6kLgG0aDFM6em3Mcu/KgVsBACH5BAkDAAEALAAAAAAKAAoAAAISjI+pywaAnnswSEvnvDzjXXUFACH5BAkDAAEALAAAAAAKAAoAAAISjI+pyw0G4gsRSmsrnZJ7DQIFACH5BAkDAAEALAAAAAAKAAoAAAISjI+py30AEDRwBlvj1Zny6nkFACH5BAkDAAEALAAAAAAKAAoAAAIRjI+py+0HAIom0nCtxFvXDhQAIfkECQMAAQAsAAAAAAoACgAAAhCMj6nL7W+ABJGGaWXVN4MCACH5BAUDAAEALAAAAAAKAAoAAAIQjI+py+0JAIuGhmgzrvKCAgA7);
    }
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -24px;
    margin-left: -24px;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, .5);
    border-radius: 100%;
}

.bg-red {
    background: #fa463f;
    opacity: 1;
}

.bg-common {
    // background: rgba(0,0,0,.4);
    background: #999;
    opacity: 1;
}

.bg-green {
    background: #00c8c8;
    opacity: 1;
}

.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';
    padding: 0 3px;
}

.video-status {
    position: absolute;
    // top: 5px;
    // left: 5px;
    bottom: 15px;
    right: 5px;
    height: 26px;
    // background: rgba(0,0,0,.4);
    border-radius: 12px;
    text-align: center;
    // transform: scale(0.83, 0.83);
    z-index: 1;

    &-text {
        font-family: 'PingFang-SC-Regular';
        display: inline-block;
        line-height: normal;
        font-size: 12px;
        color: #fff;
    }
}

.spe-topic-directory {
    padding: 15px 17px 10px;

    &-wrapper {
        background: #fff;
    }

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

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

    &-image {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: calc(60.22vw - 34px);
        background: #effdff;
        border-radius: 6px;

        &-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
    }
}
</style>
