<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<jsp:include page="../../common.jsp" />
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>交易投诉</title>
    <script src="${resourcePath}/js/My97DatePicker/WdatePicker.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            color: #000;
        }
        .container{
            background-color: #f6f6f65e;
        }
        .header {
            height: 2rem;
            background-color: #ff2d4b;
            color: white;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center
        }
        .content-wrapper {
            margin: 1.25rem 1rem;
            line-height: 2rem;
        }
        .body-item{
            margin-bottom: 1.2rem;
        }
        .title {
            border-left: 4px solid #ff2d4b;
            padding-left: .8rem;
            color: #ff2d4b;
            margin-bottom: .5rem;
        }
        .item {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(163, 162, 162, .5);
        }
        .item-input{
            line-height: 1.5rem;
            font-size: 17px;
        }
        .item-textarea{
            width: 92%;
            font-size: 15px;
            line-height: 1rem;
            padding:.5rem .5rem;
            border: 1px solid #ddd1d1;
            color: #707070;
        }
        .weui-uploader__input-box{
            position: relative;
            height: 135px;
            border: 1px solid #D9D9D9;
            width:  135px;
            margin: 0 0 0 5px;
        }
        .weui-uploader__bd{
            margin-bottom: 0;
            margin-right: 0;
        }
        .footer{
            line-height: 3rem;
        }
        .footer-btn{
            height: 100%;
            text-align: center;
        }
        .footer-submit-btn{
            width: 80%;
            border: 0;
            height: 1.8rem;
            /* height: 100%; */
            border-radius: 20px;
            background-color: #ff2d4b;
            color: #fff;
            font-size: 17px;
            box-shadow: 1px 1px 10px #797979ed;
        }
        .weui-cell{
            padding: 0;
        }

        .weui-uploader__files, .weui-uploader__files li, .weui-uploader__input-box {
            display: inline-block !important;
            margin: 0;
            width: 128px;
            height: 128px;
        }
        .img-box {
            padding-top: 20px;
        }
        .img {
            display: inline-block;
            width: 130px;
            height: 130px;
            /*width: 50%;*/
            position: relative;
        }
        .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .img:nth-child(2n) {
            margin-left: 15px;
        }
        .flex{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .img-max{
            color: #707070;
        }
        .img-count{
            display: flex;
        }
        .title-p{
            color: #ff2d4b;
        }
        .item-input{
            text-align:right;
        }
        .img-del {
            position: absolute;
            z-index: 2;
            top: -10px;
            right: -10px;
            width: 18px !important;
            height: 18px !important;

        }
</style>
</head>
<body>
    <form id="form">
        <input type="hidden" name="merchantCode" value="${merchantCode}">
        <input type="hidden" name="orderNumber" value="${orderNumber}">
        <div class="container">
            <header class="header">交易投诉</header>
            <div class="content-wrapper">
                <div class="body-item">
                    <div class="title">投诉商户信息</div>
                    <div class="item">
                        <div class="item-name">商户名称</div>
                        <div class="item-value">
                            <input type="text" name="merchantName" class="item-input" value="${mercName}" readonly maxlength="15"  autocomplete="off" placeholder="请输入投诉商户名称" >
                        </div>
                    </div>
                    <c:if test="${not empty mercPhone}">
                        <div class="item">
                            <div class="item-name">商户电话</div>
                            <div class="item-value">
                                <input type="text" class="item-input" value="${mercPhone}" readonly placeholder="请输入投诉商家联系方式" autocomplete="off" maxlength="11" >
                            </div>
                        </div>
                    </c:if>
                </div>
                <div class="body-item">
                    <div class="title">订单信息</div>
                    <div class="item">
                        <div class="item-name">订单金额</div>
                        <div class="item-value">
                            <input type="number" name="orderAmt" class="item-input" maxlength="10"  autocomplete="off" placeholder="请输入投诉订单金额">
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-name">交易时间</div>
                        <div class="item-value">
                            <input type="text" name="payTime" readonly id="payTime" class="item-input"  autocomplete="off" onclick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm'})" placeholder="请选择交易时间">
                            <img onclick="WdatePicker({el:'payTime',dateFmt:'yyyy-MM-dd HH:mm'})" src="${resourcePath}/js/My97DatePicker/skin/datePicker.gif" width="16" height="22" style="cursor:pointer" align="absmiddle">
                        </div>
                    </div>
                </div>

                <div class="body-item">
                    <div class="title">投诉人联系方式</div>
                    <div class="item">
                        <div class="item-name">手机号</div>
                        <div class="item-value">
                            <input type="number" name="complaintPhone" class="item-input" placeholder="您的联系方式，方便核实" autocomplete="off" maxlength="11" />
                        </div>
                    </div>
                </div>

                <div class="body-item">
                    <div class="title">投诉内容</div>
                    <div class="item-group">
                        <div class="item-value">
                            <textarea name="remark" cols="20" rows="8" maxlength="500" autocomplete="off" class="item-textarea"></textarea>
                        </div>
                    </div>
                    <div class="title flex">
                        <p class="title-p">上传交易账单及被骗截图</p>
                        <div class="img-count"><span id="uploadCount" class="img-now-count">0</span>/<span id="img-max" class="img-max">8</span></div>
                    </div>
                    <div class="item-group">
                        <div class="item-name"></div>
                        <div class="item-value">
                            <div class="weui-uploader__bd">
                                <ul class="img-box">
                                    <li class="img" id="img-add">
                                        <div class="weui-uploader__input-box">
                                            <input id="uploaderInput" class="weui-uploader__input" type="file"  accept="image/jpg,image/jpeg,image/png,image/gif"  multiple="">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="footer">
                <div class="footer-btn">
                    <button class="footer-submit-btn" id="submit">提交投诉</button>
                </div>
            </footer>
        </div>
    </form>
</body>
<script>
    $(function (){
        let allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        let maxSize = 1024 * 1024*5; //5M
        let maxCount = 8;
        let maxWidth = 1900;  // 图片最大宽度
        let $uploaderFiles = $('#img-add');
        $("#img-max").text(maxCount);
        // let imageArr = [];
        let tmpl = `<li class="img" data-index="#index#">
            <img class="img-li" src="#url#" alt="">
            <img class="img-del" src="${resourcePath}/images/icon-del.png" />
            </li>`
        $("#uploaderInput").on("change", function (e) {
            files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            let nowCount = $("#uploadCount").text();
            if (files.length + parseInt(nowCount) > maxCount) {
                $.alert('最多只能上传' + maxCount + '张图片',"系统提示");
                return;
            }
            for (let i = 0, len = files.length; i < len; ++i) {
                let file = files[i];
                // let imgID = new Date().getTime()+randomNum(1000,9999);
                let reader = new FileReader();
                let fileType = file.type;
                // 如果类型不在允许的类型范围内
                let fileName = file.name;
                let suffix = fileName.substr(fileName.lastIndexOf(".")+1,fileName.length);
                if (allowTypes.indexOf(file.type) === -1) {
                    $.alert('该类型不允许上传' + fileType,"系统提示");
                    continue;
                }

                if (file.size > maxSize) {
                    $.alert("图片太大，不允许上传！","系统提示");
                    continue;
                }
                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        let w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        let h = img.height * (w / img.width);
                        let canvas = document.createElement('canvas');
                        let ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        let base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%
                        $uploaderFiles.before($(tmpl.replace('#url#', base64).replace('#index#', i)));
                        let num = $('.img-li').length;
                        $('#uploadCount').text(num);
                        if($('.img-li').length == maxCount){
                            $("#img-add").hide();
                        }
                        if(suffix == "jpg"){
                            suffix = "jpeg";
                        }
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
        // 删除图片
        $(document).on('click', '.img-del', function () {
            $("#uploadCount").text(parseInt($("#uploadCount").text())-1)
            $(this).parent().remove();
            if($('.img-li').length < maxCount){
                $("#img-add").show();
            }
        })
        $("#submit").on("click",function (){
            let $data = serialize($("#form"));
            if(!$data.orderAmt){
                $.alert("投诉订单金额不能为空！","系统提示");
                return false;
            }
            if(!$data.payTime){
                $.alert("投诉订单交易时间不能为空！","系统提示");
                return false;
            }
            if(!$data.complaintPhone){
                $.alert("投诉人联系方式不能为空！","系统提示");
                return false;
            }
            let flag = checkPhone($data.complaintPhone);
            if(!flag){
                $.alert("手机号码有误，请重填","系统提示");
                return false;
            }
            if(!$data.remark){
                $.alert("投诉内容不能为空！","系统提示");
                return false;
            }
            let imgd = $(".img-li");
            if(imgd.length <= 0){
                $.alert("请上传交易账单以及被骗的相关截图！","系统提示");
                return false;
            }
            let imageArr = [];
            imgd.each(function (){
                let $base64 = $(this).attr("src");
                imageArr.push($base64.replace("data:image/jpeg;base64,","").replace("data:image/png;base64,","").replace("data:image/jpg;base64,",""));
            })
            $data.imageList = imageArr;
            let url = ctx + "/merchant/complaint/save";
            $.showLoading("提交中...");
            $.ajax({
                url:url,
                type:"post",
                dataType:'json',
                traditional:true,
                data:$data,
                success:(res)=>{
                    $.hideLoading();
                    $.alert(res.message,"系统提示");
                }
            })
            return false;
        })
    })
    function randomNum(minNum,maxNum){
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }
    function checkPhone(phone){
        if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
            return false;
        }
        return true;
    }
    function dateClick(){

    }
</script>
</html>