<template>
    <view class="video-player-popup">
        <uni-popup ref="videoPopup" type="center" :mask-click="true" @change="onVideoPopupChange">
            <view class="video-popup-content">
                <view class="video-popup-header">
                    <text class="video-popup-title">{{ videoTitle }}</text>
                    <text class="iconfont icon-close" @click="close"></text>
                </view>
                <view class="video-popup-body">
                    <video 
                        v-if="videoUrl" 
                        :src="videoUrl"
                        controls 
                        autoplay 
                        class="video-player"
                    ></video>
                    <view v-else class="video-error">视频地址不存在</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    name: 'ns-video-player-popup',
    props: {
        /**
         * 当前播放的视频信息
         * @type {Object}
         * @property {string} title - 视频标题
         * @property {string} videoUrl - 视频地址
         */
        currentVideo: {
            type: Object,
            default: null
        }
    },
    computed: {
        videoUrl() {
            return this.currentVideo?.videoUrl || '';
        },

        videoTitle() {
            return this.currentVideo?.title || '';
        },
        /**
         * 视频弹窗是否显示
         * @type {boolean}
         */
        isVisible() {
            return this.$refs.videoPopup?.visible || false;
        }
    },
    methods: {
        /**
         * 打开视频弹窗
         */
        open() {
            if (this.$refs.videoPopup) {
                this.$refs.videoPopup.open();
            }
        },

        /**
         * 关闭视频弹窗
         */
        close() {
            if (this.$refs.videoPopup) {
                this.$refs.videoPopup.close();
            }
        },

        /**
         * 视频弹窗状态变化
         * @param {Object} e - 弹窗状态变化事件
         */
        onVideoPopupChange(e) {
            this.$emit('popup-change', e);
        }
    }
};
</script>

<style lang="scss" scoped>
/* 视频播放弹窗样式 */
.video-player-popup {
    .video-popup-content {
        width: 90%;
        max-width: 600rpx;
        background-color: #fff;
        border-radius: 12rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
    }

    .video-popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f0f0f0;
        background-color: #fafafa;

        .video-popup-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .icon-close {
            font-size: 32rpx;
            color: #999;
            padding: 0 10rpx;
        }
    }

    .video-popup-body {
        padding: 20rpx;

        .video-player {
            width: 100%;
            height: 400rpx;
            background-color: #000;
            border-radius: 8rpx;
        }

        .video-error {
            width: 100%;
            height: 400rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f5f5f5;
            border-radius: 8rpx;
            color: #999;
            font-size: 28rpx;
        }
    }
}
</style>