<?= $this->doctype() ?>
<html lang="en">
<head>
    <meta charset="utf-8">
<?php
echo $this->headTitle($title);

echo $this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1.0');
?>
    <link rel="stylesheet" type="text/css" href="/css/weui.min.css">
</head>
<body>
    <div class="container" style="height: 100vh">
        <?= $this->content ?>
    </div>
<!--    <div class="weui-footer weui-footer_fixed-bottom">-->
<!--        <p class="weui-footer__text">技术支持 北京安捷讯科技有限公司</p>-->
<!--        <p class="weui-footer__text">Copyright © 2008-2022</p>-->
<!--        <a href="//beian.miit.gov.cn/" class="page_copyright">-->
<!--            京ICP备20021033号-4-->
<!--        </a>-->
<!--    </div>-->
    <?= $this->inlineScript() ?>
</body>
<script>
    let isTopTips = false;

    function topTips(message, level = 'error') {
        if (isTopTips === true) {
            return
        }

// #06ae56
        // #fa5151
        let bgColor = level === 'error' ? '#fa5151' : '#06ae56'
        const tipsHtml = '<div role="alert" class="weui-toptips weui-toptips_warn" id="topTips" style="display: none; opacity: 0;transition: opacity 0.5s linear 0s;background-color: ' + bgColor + '">' + message + '</div>';
        document.querySelector('.container').insertAdjacentHTML('afterend', tipsHtml)
        let ele = document.getElementById('topTips');

        isTopTips = true;
        ele.style.display = 'block';
        ele.style.opacity = '1';
        ele.textContent = message;
        setTimeout(() => {
            console.log('hide')
            ele.style.opacity = '0';
            ele.remove()
            isTopTips = false;
        }, 2000)
    }
</script>
</html>
