<template>
    <view class="video" :class="[dust ? 'dust' : '', hasRadius ? 'has-radius' : '']">
        <video
            :id="id"
            :src="videoData.video || videoData.url"
            :poster="poster"
            :title="videoData.title"
            :style="style"
            :autoplay="isAuto"
            :muted="isMuted"
            :object-fit="objectFit"
            :duration="(videoDuration || '') + ''"
            :showFullscreenBtn="showFullscreenBtn"
            :class="[
                env === 'swan'
                    ? 'video-swan' + ' ' + structuredUbcShowLogClass
                    : 'video-h5' + ' ' + structuredUbcShowLogClass, hasRadius
                    ? 'has-radius' : '', hasGap ? 'gap' : '', needDuration
                    ? '' : 'remove-duration', isIframe ? 'video-iframe-pc' : '']"
            @play="play"
        >
        </video>
        <view
            v-if="!isPlaying
                && env === 'swan'
                && videoData.duration
                && videoData.duration !== '0'"
            class="video-time"
        >
            <view class="video-time-mask"/>
            <view class="video-time-text">{{ videoDuration }}</view>
        </view>
    </view>
</template>
<script>
import {imgCompress} from '@utils/core';
/**
* @file 视频播放
* @author xuyong08
* @categories 通用视频组件
* @tags [component]
*/
export default {
    config: {
        component: true
    },
    props: {
        // id
        id: {
            type: String,
            default: ''
        },
        // 是否圆角
        hasRadius: {
            type: Boolean,
            default: true
        },
        // 视频数据
        videoData: {
            type: Object,
            default: () => {}
        },
        // 是否100%屏幕宽度
        fullWith: {
            type: Boolean,
            default: false
        },
        // 是否自动播放
        isAuto: {
            type: Boolean,
            default: false
        },
        // 高度
        height: {
            type: String,
            default: ''
        },
        // 是否圆角
        hasGap: {
            type: Boolean,
            default: true
        },
        // 是否置灰
        dust: {
            type: Boolean,
            default: false
        },
        // 是否静音
        isMuted: {
            type: Boolean,
            default: false
        },
        // 填充方式
        objectFit: {
            type: String,
            default: 'cover'
        },
        // 是否需要duration
        needDuration: {
            type: Boolean,
            default: true
        },
        // 结构化视频曝光class
        structuredUbcShowLogClass: {
            type: String,
            default: ''
        },
        // 是否为pc iframe
        isIframe: {
            type: Boolean,
            default: false
        },
        // 是否显示全屏按钮
        showFullscreenBtn: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        style() {
            let style = {};
            if (this.height) {
                style = {
                    height: this.height
                };
            }
            return style;
        }
    },
    data() {
        return {
            env: 'swan',
            videoDuration: 0,
            isPlaying: false,
            poster: ''
        };
    },
    watch: {
        'videoData.poster': {
            handler(n) {
                this.poster = imgCompress(n);
                console.log('this.poster1', this.poster);
            }
        }
    },
    created() {
        this.poster = this.videoData && imgCompress(this.videoData.poster);
    },
    mounted() {
        this.env = process.env.MARS_ENV;
        if (this.videoData && this.videoData.duration && this.videoData.duration !== '0') {
            this.videoDuration = this.formateSeconds(this.videoData.duration);
        }
    },
    methods: {
        formateSeconds(time) {
            let secondTime = parseInt(time, 10);
            let min = 0;
            let result = '';
            if (secondTime > 60) {
                min = parseInt(secondTime / 60, 10);
                secondTime = parseInt(secondTime % 60, 10);
            }
            result = `${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
            return result;
        },

        play() {
            this.isPlaying = true;
            // 点击播放
            this.$emit('play', this.isPlaying, this.id);
        }
    }
};
</script>
<style lang="less" scoped>
/* stylelint-disable declaration-block-no-duplicate-properties */
.dust {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    -webkit-filter: grayscale(1);
}
/* stylelint-enable */
.has-radius {
    border-radius: 8px;
    overflow: hidden;
}

.video {
    position: relative;

    .remove-duration {
        /deep/.duration__3XoJw {
            display: none;
        }
    }

    .video-h5 {
        width: 100%;
        height: 1.917rem;
        margin: 0 auto;
        background: #fff !important;

        .video-h5 > div {
            background-size: contain !important;
        }

        /deep/.duration__3XoJw {
            background-color: rgba(0, 0, 0, 0.4);
        }
    }

    .video-swan {
        width: 100%;
        padding-bottom: 0;
        height: 56.22vw;
        margin: 0 auto;

        .video-swan > div {
            background-size: contain !important;
        }
    }

    .gap {
        margin: 20px 0;
    }

    &-time {
        position: absolute;
        right: 7px;
        bottom: 7px;

        &-mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: #000;
            opacity: .3;
            border-radius: 33px;
        }

        &-text {
            position: relative;
            padding: 3px 10px;
            line-height: normal;
            font-size: 10px;
            font-family: 'PingFangSC-Semibold';
            color: #fff;
        }
    }

    .video-iframe-pc {
        height: 422px;
    }
}
</style>
