<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="favicon.ico">
    <title>é’æ²³åŽ¿è¨å°”æ‰˜æµ·æ™ºæ…§æ°´åŠ¡ç³»ç»Ÿ</title>

    <link rel="stylesheet" href="css/main.css" />

    <link rel="stylesheet" href="js/lib/element-plus/index.css" />
    <script src="js/lib/vue.global.js"></script>
    <script src="js/lib/element-plus/element-plus.js"></script>
    <script src="js/lib/element-plus/icons-vue.js"></script>

    <script src="js/lib/axios.min.js"></script>
    <script src="js/lib/httpVueLoader.js"></script>
</head>
<body>
    <div id="app">
        <div id="loader-wrapper" v-if="loading">
            <div id="loader"></div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
            <div class="load_title">æ£åœ¨åŠ è½½ç³»ç»Ÿèµ„æºï¼Œè¯·è€å¿ƒç‰å¾…</div>
        </div>


    </div>
<script>
    const { createApp, ref, onMounted, h } = Vue
    const loading = ref(true)

    const Http = axios.create({
        baseURL: location.pathname.substr(0, location.pathname.lastIndexOf('/')),
        timeout: 1000,
        headers: {'X-Custom-Header': 'foobar'}
    });
    const $message = ElementPlus.ElMessage;
    const $confirm = ElementPlus.ElMessageBox;

    var app = Vue.createApp({
        el: '#app',
        data() {
            return {
                ddd: true
            }
        },
        methods: {
            funcA() {
                console.log(this.ddd);
                $message('è¿™æ˜¯ä¸€æ¡æ™®é€šinfoæ¶ˆæ¯');
                $message.success('æå–œä½ ï¼Œè¿™æ˜¯ä¸€æ¡æˆåŠŸæ¶ˆæ¯');
                $message.warning('è¦å‘Šå“¦ï¼Œè¿™æ˜¯ä¸€æ¡è¦å‘Šæ¶ˆæ¯');
                $message.error('é”™äº†å“¦ï¼Œè¿™æ˜¯ä¸€æ¡é”™è¯¯æ¶ˆæ¯');
                $message({
                    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
                        h('span', null, 'è¿™æ˜¯ä¸€æ¡è‡ªå®šä¹‰æ ·å¼çš„æ¶ˆæ¯ '),
                        h('i', { style: 'color: teal' }, 'VNode'),
                    ])
                });
            }
        },

        mounted: () => {
            //$message('è¿™æ˜¯ä¸€æ¡æ™®é€šinfoæ¶ˆæ¯');

            Http.post('/quartz/listTask', {
                limit: 10,
                page: 1
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        },

        setup() {
            const testNum1 = ref(123456);

            const funB = () => {
                alert('bbb');
            }

            onMounted(() => {
                loading.value = false
            })
            return { testNum1, funB }
        }
    })
    app.use(ElementPlus)
    app.mount("#app")
</script>
</body>
</html>