<!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="/static/postcard/css/style.css">
    <script src="/static/js/jquery.2.1.3.min.js"></script>
    <script src="/static/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="/static/postcard/images/img_border.png" class="img-border" alt="">
                @if($jobImg == '')
                    <img src="/static/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="/static/postcard/images/img1.png" class="img1" alt="">
            <div id="bNum" class="b-num"></div>
            <img src="/static/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="/static/postcard/images/img_add.jpg" class="img img-add" alt=""> <input type="file" id="file"> @endif
        @if($userImgStatus == 0)  <img src="/static/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="/static/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>
<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="/static/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').click(function(){
            $(this).fadeOut();
            $('.btn-save,.btn-share').show();
            $('.postcard-container').removeClass('fixed');
        });

        function wxShare(){
            var data = res.response.sign;
            var appId = data.appId;
            var timestamp = data.timestamp;
            var nonceStr = data.nonceStr;
            var signature = data.signature;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'hideMenuItems']// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function () {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
                // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
                // 则须把相关接口放在ready函数中调用来确保正确执行。
                // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            });
        }

    });
</script>
</body>
</html>