<template>
    <div>
        <p>{{ message }}</p>
        <button @click="changeMessage">改变内容</button>
    </div>
</template>

<script>
import { changeContent } from '../utils/changeContent.js'; // 引入 JavaScript 文件

export default {
    data() {
        return {
            message: "初始内容"
        };
    },
    methods: {
        changeMessage() {
            this.message = "内容已被改变！"; // 直接在这里改变内容
        },
        handleChange() {
            changeContent(this.changeMessage.bind(this)); // 传递处理函数
        }
    },
    mounted() {
        this.loadScripts([ // 加载外部脚本
            '/public/static/js/jquery.min.js',
            '/public/static/js/jquery.mobile.custom.min.js',
            '/public/static/js/swiper.min.js',
            '/public/static/js/jquery.rwdImageMaps.min.js',
            '/public/static/js/bootstrap.min.js',
            '/public/static/js/bootstrap-datetimepicker.min.js',
            '/public/static/js/bootstrap-datetimepicker.zh-CN.js',
            '/public/static/js/jquery.qrcode.min.js',
            '/public/static/js/pinchzoom.min.js',
            '/public/static/js/html2canvas.min.js',
            '/public/static/js/index.js',
            '/public/static/js/qfstatH5.js',
            '/public/static/js/posterShare.js',
            '/public/static/js/bigHaiBao.js'
        ]);
    },
    loadScripts(urls) {
        const loadScript = (url) => {
            return new Promise((resolve) => {
                const script = document.createElement('script');
                script.src = url;
                script.type = 'text/javascript';
                script.onload = resolve; // 确保脚本加载完成后再继续
                document.head.appendChild(script);
            });
        };

        // 依次加载所有脚本
        urls.reduce((promise, url) => {
            return promise.then(() => loadScript(url));
        }, Promise.resolve());
    }
}
</script>