<template>
    <view class="video-item-wrap">
        <view v-if="mode === 'bottom' && statusText" class="bottom-cover" :class="status === 0 ? 'red' : (status === 1 ? 'black' : 'green')">
            {{ statusText }}
        </view>
        <view
            v-else-if="statusText || duration"
            :class="['video-tag',status == 0 ? 'bg-red' : 'bg-common',  bigTag ? 'big-tag' : '']">
            {{statusText || duration}}</view>
        <view class="video-play">
            <c-icon
                name="play"
                font-size="12px"
                :style="{color: '#ffffff'}">
            </c-icon>
        </view>
        <image
        class="video-img"
        :src="img"
        />
    </view>
</template>
<script>
import Icon from '@baidu/med-ui/components/Icon/Icon';
export default {
    config: {
        component: true
    },
    props: {
        img: String,
        status: {
            type: [Number, String]
        },
        statusText: String,
        duration: String,
        bigTag: {
            type: Boolean,
            default: false
        },
        mode: {
            'type': String,
            'default': 'rightBottom' // bottom 底部横条
        }
    },
    components: {
        'c-icon': Icon
    }
};
</script>
<style lang="less" scoped>
.video-item-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.bottom-item {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-weight: bold;
    &.red {
        background-color: #FB3834;
    }
    &.green {
        background-color: #00c8c8;
    }
    &.black {
        background-color: rgba(0, 0, 0, .6);
    }
}
.bg-red {
    background: #FB3834;
}
.bg-common {
    background: rgba(0,0,0,.5);
}
.video-img {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}
.video-tag {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 38px;
    height: 15px;
    color: #fff;
    border-radius: 30px;
    text-align: center;
    line-height: 15px;
    font-size: 10px;
}
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    margin-left: -12px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,.5);
    border-radius: 100%;
}
.big-tag {
    width: 45.78px;
    height: 21.69px;
    line-height: 22.1px;
    font-size: 12px;
    transform:scale(0.83,0.83);
}
</style>