<template>
    <view
        class="c-gap-bottom c-gap-inner-bottom-large"
        :class="{'c-line-bottom': showBorder}"
        @tap="onNavtoH5(item.url, 'dynamic')"
    >
        <view class="c-line-clamp2">
            <view v-if="item.ctime" class="publish-time">
                <text>{{ item.ctime }}</text>
            </view>
            <rich-text
                :nodes="item.title"
                class="dynamics-title c-gap-bottom"
            />
        </view>
        <view
            v-if="item.picUrls"
            class="c-row c-gap-top-small"
            :style="{justifyContent: 'flex-start'}"
        >
            <view
                v-for="(pic, picIndex) in item.picUrls"
                :key="picIndex"
                class="cl-flex-box"
                :class="[item.picUrls.length > 1 ? 'c-span4' : 'c-span6']"
            >
                <view
                    :style="{
                        width: '100%',
                        maxHeight: '40vw',
                        overflow: 'hidden',
                        borderRadius: '5px',
                    }"
                >
                    <c-image
                        has-compress
                        :src="pic"
                        width="100%"
                        height="auto"
                        mode="widthFix"
                        :is-round="false"
                        :hack-white-stroke="false"
                    />
                </view>
            </view>
        </view>
        <view v-if="item.viewers" class="c-color-gray c-font-normal c-gap-top-mini">
            {{ item.viewers }}
        </view>
    </view>
</template>

<script>
/**
 * @file 核酸检测卡片
 * @author chenshuo04
 * @categories 业务组件
 * @tags [component]
 */
import CImage from '@components/common/image';
import {navigate, navToBdBoxH5} from '../../utils/navigate';
import * as Log from '../../utils/log';
import * as core from '../../utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CImage
    },
    props: {
        /* 数据 */
        item: {
            type: Object,
            required: true
        },
        /* 底部边距 */
        showBorder: {
            type: Boolean,
            default: false
        },
        extra: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        onJump(data) {
            navigate({url: data.unifiUrl || data.url || data});
        },
        onNavtoH5(url, type) {
            if (!url) {
                return;
            }
            Log.send({
                type: 'l',
                action: 'navigate',
                extra: Object.assign({}, {
                    tabname: type
                }, this.extra)
            });
            let nid = core.getQueryObject(url).nid;
            let params = {
                module: 'easybrowse',
                action: 'open',
                parameters: {
                    context: {
                        nid: nid
                    },
                    url: url,
                    style: {
                        menumode: '2',
                        showtoolbar: '1',
                        showtitlebar: 1,
                        toolbaricons: {
                            toolids: ['4']
                        }
                    },
                    newbrowser: 1
                }
            };
            navToBdBoxH5(url, params);
        }
    }
};
</script>
<style lang="less" scoped>
.dynamics-title {
    display: inline;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1f1f1f;
    line-height: 24px;
}

.video-title {
    font-family: PingFangSC-Regular;
    font-size: 19px;
    color: #1f1f1f;
    line-height: 29px;
}

.dynamics-video-cover {
    margin-top: 5px;
    width: 100%;
    height: 213px;
    position: relative;
}

.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%;
}

.video-img {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    border-radius: 3px;
}

.video-time {
    padding: 0 9px;
    height: 20px;
    position: absolute;
    bottom: 4px;
    right: 4px;
    font-size: 10px;
    color: #fff;
    line-height: 20px;
    background: rgba(0, 0, 0, .4);
    border-radius: 20px;
}

.publish-time {
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #999;
    line-height: 24px;
    margin-right: 8px;
}

.color-topic {
    color: #4b78b2;
}

.dynamics-img {
    width: 44vw;
    border-radius: 5px;
}

.pic-wrap {
    width: 44vw;
    position: relative;
}

.cl-flex-box {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
</style>
