<!--  -->
<template>
    <div class="video-containe">
        <video ref="myVideo" playsinline muted loop @loadedmetadata="handleMetadata">
            <source src="../../assets/img/card_bind.mp4" type="video/mp4">
        </video>
        <!-- 播放/暂停按钮 -->
        <div class="btn-con">
            <van-button @click="togglePlay" :color="btnColor">
                {{ btnText }}
            </van-button>
            <van-button @click="goToWebApp" color="#ee3399">
                智能名片
            </van-button>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            isPlaying: null
        }
    },
    computed: {
        btnText() {
            let text = '讲解模式';
            if (this.isPlaying == null) {
                return text;
            } else if (this.isPlaying == false) {
                text = '继续讲解'
            } else {
                text = '暂停讲解'
            }
            return text
        },
        btnColor() {
            let color = '';
            if (this.isPlaying == null) {
                // 默认
                color = '#ee3399'
            } else if (this.isPlaying == false) {
                color = 'green'
            } else {
                color = 'orange'
            }
            return color
        }
    },
    created() {

    },
    mounted() {
        window.document.title = '人工智能月子中心介绍';
    },
    methods: {
        handleMetadata(event) {
            const videoElement = event.target;
            this.aspectRatio = videoElement.videoWidth / videoElement.videoHeight;
        },
        togglePlay() {
            const videoPlayer = this.$refs.myVideo;

            if (videoPlayer.paused) {
                videoPlayer.play(); // 开始播放
                this.isPlaying = true;
            } else {
                videoPlayer.pause(); // 暂停播放
                this.isPlaying = false;
            }
        },
        goToWebApp() {
            let jumpUrl = 'https://hao-yun666-5g407x0f9e513af8-1325200810.tcloudbaseapp.com/jump-mp.html?sign=02240d77ff8df94a035322d647ac7196&t=1711071109';
            /* window.location.href = jumpUrl; */
            // replace,表明新窗口加载的内容是否替换浏览历史中的当前条目
            window.open(jumpUrl, 'replace = true');
        }
    },
}
</script>
<style scoped lang="scss">
.video-containe {
    position: relative;
    width: 100%;
    height: 100%;
    /* 动态计算padding-bottom保持宽高比 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;

    video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;

        /* 或者 object-fit: cover 根据需求选择 */
    }

    .btn-con {
        position: absolute;
        bottom: 3%;

        .van-button {
            margin: 0 5px;
        }
    }


    /* 当视口宽度小于等于600px时应用以下样式 */
    @media screen and (max-width: 600px) {
        .btn-con {

            left: 20%;

        }
    }

    /* 当视口宽度大于600px时应用另一组样式 */
    @media screen and (min-width: 601px) {
        .btn-con {


            left: 45%;
        }
    }

}

/* @import url(); 引入css类 */
</style>