<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="token" value="{{ csrf_token() }}">
    <title>阿拉德之怒</title>
    <script>
        function reSizeRem() {
            var ClientWidth = document.documentElement.clientWidth > 540 ? 540 : document.documentElement.clientWidth,
                UiWidth = 1080,
                FontSize = ClientWidth / UiWidth * 100;
            document.documentElement.style.fontSize = FontSize + 'px';
        }

        reSizeRem();
        window.onresize = function () {
            reSizeRem();
        }
        window.onerror = function (e) {
            alert(e)
        }
    </script>
    <link rel="stylesheet" href="{{ asset('postcard/css/style.css') }}">
    <script src="{{ asset('js/jquery.2.1.3.min.js') }}"></script>
    <script src="{{ asset('postcard/js/html2canvas.js') }}"></script>
</head>
<body>
<div class="container postcard-container" id="test">
    <!--角色信息-->
    <div class="role-container">
        <span class="icon-red"></span>
        <div class="left">
            <div class="role-avatar">
                <img src="{{ asset('postcard/images/img_border.png') }}" class="img-border" alt="">
                @if($jobImg == '')
                    <img src="{{ asset('postcard/images/default_img.png') }}" class="img-header" alt="">
                @else
                    <img src="{{ $jobImg }}" class="img-header" alt="">
                @endif
            </div>
            <ul>
                <li class="role1"><span>{{ $info->role_name ?? '' }}</span></li>
                <li class="role2"><span>{{ $info->server_name ?? '' }}</span></li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li class="role3"><span>{{ $info->job ?? '' }}</span></li>
                <li class="role4"><span>{{ $info->guild ?? '' }}</span></li>
                <li class="role5"><span>
                    @if($info->online_time > 0)
                            {{ ceil($info->online_time / 3600) }}
                        @else
                            0
                        @endif
                小时</span></li>
            </ul>
        </div>
        <div class="bottom">
            <img src="{{ asset('postcard/images/img1.png') }}" class="img1" alt="">
            <div id="bNum" class="b-num"></div>
            <img src="{{ asset('postcard/images/img2.png') }}" class="img2" alt="">
        </div>
    </div>
    <!--角色等级-->
    <div class="range-container">
        <div id="rangeNums" class="range-num">

        </div>
    </div>
    <!--武器信息-->
    <div class="arms-container">
        <div class="arms">
            <em class="name1">{{ $armsStrongName }}</em>
            <div id="wq1"></div>
            <em class="name2">{{ $armsExcitingName }}</em>
            <div id="wq2"></div>
            <em class="name3">{{ $armsScoreName }}</em>
            <div id="wq3"></div>
        </div>
    </div>
    <!--佣兵团信息-->
    <div class="mr-container">
        <div class="mr">
            <span class="{{ $ybImg }}"></span>
        </div>
    </div>
    <!--勇者之塔-->
    <div class="yzzt-container">
        <span class="num1">{{ $info->brave_num }}</span>
        <span class="num2">{{ $braveTime }}</span>
    </div>
    <!--战斗生涯-->
    <div class="zdsy-container">
        <span class="num1">{{ $info->duel_total }}</span>
        <span class="num2">
            @if($info->duel_total > 0 && $info->duel_win > 0)
                {{ sprintf('%.2f',($info->duel_win * 100)/$info->duel_total) }}%
            @else
                00%
            @endif
        </span>
    </div>
    <!--最高段位-->
    <div class="zgdw-container">
        <span class="num1">{{ $rank }}</span>
    </div>

    <!--高光时刻-->
    <div class="ggsk-container">
        @if($userImgStatus == -1) <img src="{{ asset('postcard/images/img_add.jpg') }}" class="img img-add" alt="">
        <input type="file" id="file"> @endif
        @if($userImgStatus == 0)  <img src="{{ asset('postcard/images/img_sh.jpg') }}" class="img img-sh" alt=""> @endif
        @if($userImgStatus == 1)  <img src="{{ $userImg }}" class="img img-sh" alt=""> @endif
        @if($userImgStatus == 2)  <img src="{{ asset('postcard/images/sh_fail.jpg') }}" class="img img-sh" alt="">
        <input type="file" id="file"> @endif
    </div>
    <div class="bottom-container">
        <!--分享-->
        <a href="javascript:" class="btn-share"></a>
        <!--本地保存-->
        <a href="javascript:" class="btn-save"></a>
    </div>

</div>
<div class="dialog dialog-img hide">
    <div class="dialog-img-content">
        <div class="img-scroll">
            <img src="" alt="">
        </div>
    </div>
</div>
<div class="loading hide">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="share-img hide">
    <img src="{{ asset('postcard/images/share_img.png') }}" alt="">
</div>
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

    $(function () {
        function renderHtml(dom, num) {
            var str = num.toString();
            var arr = str.split("");
            var html = ''
            $(arr).each(function (index, item) {
                html += '<span>' + item + '</span>';
            })
            $(dom).html(html);
        }

        @if($info->online_time > 0)
        renderHtml('#bNum',{{ ceil($info->online_time / 86400 ) }});
        @else
        renderHtml('#bNum', 0);
        @endif
        renderHtml('#rangeNums', '{{ (string)$roleScore }}');
        renderHtml('#wq1', '{{ $armsStrong }}');
        renderHtml('#wq2', '{{ $armsExciting }}');
        renderHtml('#wq3', '{{ $armsScore }}');
        // 上传图片
        $(document).on('change', '#file', function (e) {
            var formData = new FormData();
            var file = $("#file")[0].files[0];
            var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
            //文件类型判断
            if (file.type.length && !acceptFileTypes.test(file.type)) {
                alert('请上传gif、jpg、jpeg或png格式的文件');
                return false;
            }
            //文件大小判断
            if (file.size > (2 * 1024 * 1024)) {
                alert('请上传不超过2M的文件');
                return false;
            }
            formData.append("imgFile", file);
            formData.append("_token", "{{ csrf_token() }}")
            $.ajax({
                url: "/upload/img",
                type: "post",
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    $('.img-add').hide();
                    $('.ggsk-container').html('<img src="{{ asset('postcard/images/img_sh.jpg') }}" class="img img-sh" alt=""><input type="file" id="file">');
                },
                error: function (data) {

                }
            });
        });

        function baseImageUrl() {
            setTimeout(function () {
                html2canvas(document.querySelector("#test"), {  //关键在于new
                    useCORS: true,
                    removeContainer: true,
                    allowTaint: false,
                    width: window.screen.availWidth,
                    windowWidth: document.body.scrollWidth,
                    x: 0,
                    y: 0,
                }).then(canvas => {
                    var image = canvas.toDataURL('image/jpeg', 1.0);
                    var img = '<img src="' + image + '">';
                    $('.dialog-img-content .img-scroll').html(img);
                    $('.dialog-img').show();
                    $('.loading').hide();
                });
                $('.postcard-container').addClass('fixed');
            }, 2000)
        }

        $('.btn-save').click(function () {
            $('.loading').show();
            $('.btn-save,.btn-share').hide();
            $('html,body').animate({
                scrollTop: 0
            }, 0);
            baseImageUrl();
        });
        $('.dialog-img,.share-img').click(function () {
            $(this).fadeOut();
            $('.btn-save,.btn-share').show();
            $('.postcard-container').removeClass('fixed');
        });


        $.ajax({
            url: "/wx/config",
            data: {
                url: location.href.split('#')[0]
            },
            type: 'GET',
            dataType: "json",
            async: false,
            timeout: 5000,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") { // 请求超时
                } else {
                }
            },
            success: function (res) {
                var data = res.data;
                wx.config({
                    debug: true,
                    appId: data.appId,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    url: location.href.split('#')[0],
                    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
                });

                wx.ready(function () {
                    wx.onMenuShareAppMessage({
                        title: '阿拉德之怒', // 分享标题
                        desc: '阿拉德之怒', // 分享描述
                        link: 'http://uc-signin2.srccwl.com', // 分享链接，该链接域名或路径必须与当前页面对应// 分享图标的公众号JS安全域名一致
                        imgUrl: 'https://static-platform.srccwl.com/ucSign/ald/sign/images/wx.png',
                    });
                });

            }
        });
        $('.btn-share').click(function () {
            $('.share-img').show();
        });
    });
</script>
</body>
</html>