<template>
    <view v-if="video" class="psy-vd">
        <scroll-view
            scroll-x
            class="psy-vd-scroll">
            <view class="psy-vd-div"></view>
            <view
                v-for="(item, i) in video"
                class="psy-vd-item c-font-normal"
                :class="i < video.length - 1 ? 'c-gap-right-middle' : ''"
                @tap="onJump(item, 'btn_vd')">
                <view class="psy-vd-item-img">
                    <video-cover
                        :img="item.img"
                        :status="item.status"
                        :duration="item.duration"/>
                </view>
                <view
                    v-if="item.title"
                    class="c-color-333 c-line-clamp2 c-gap-top-small"
                    :class="['c-line-clmap' + clamp]"
                    :style="{height: 22 * clamp + 'px'}"
                >
                    {{ item.title }}
                </view>
                <view class="c-color-gray c-line-clamp1">
                    <text v-if="item.name">{{ item.name }}</text>
                    <text
                        v-if="item.level"
                        class="c-gap-left-small">{{ item.level }}</text>
                </view>
                <view
                    v-if="item.hospital"
                    class="c-color-gray c-line-clamp1">{{ item.hospital }}</view>
            </view>
            <view class="psy-vd-div"></view>
        </scroll-view>
    </view>
</template>

<script>
/**
* @file  视频横滑
* @author chenshuo04
*/
import videoCover from '../common/video-cover';
import {send} from '../../utils/log';
import {navigate, navToH5} from '../../utils/navigate';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        videoCover
    },
    props: {
        video: {
            type: Array,
            required: true
        },
        clamp: {
            type: Number,
            default: 2
        }
    },
    methods: {
        onJump(data, log) {
            if (data && data.toast) {
                this.$api.showToast({
                    icon: 'none',
                    title: data.toast
                });
                return;
            }
            if (data && data.urltype === 'outer') {
                navToH5(data.url);
                send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        name: log
                    }
                });
            }
            else {
                navigate({
                    url: data.url || data,
                    extra: {
                        name: log
                    }
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.psy-vd {
    &-scroll {
        white-space: nowrap;
    }
    &-item {
        width: calc(45% - .04rem);
        display: inline-block;

        &-img {
            height: 103px;
            border-radius: 3px;
            overflow: hidden;
        }
    }
    &-div {
        height:10px;
        width:17px;
        display:inline-block;
    }
}
</style>
