<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('会员订单详情')" />
    <style type="text/css">.user-info-head{position:relative;display:inline-block;}.user-info-head:hover:after{content:'\f030';position:absolute;left:0;right:0;top:0;bottom:0;color:#eee;background:rgba(0,0,0,0.5);font-family:FontAwesome;font-size:24px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;line-height:110px;border-radius:50%;}</style>
</head>

<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<section class="section-content">
    <div class="row">
        <div class="col-sm-4 pr5">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header gray-bg">
                    <h5>会员信息（[[${orderDetailsVo.adamMemberOrderVo.memberName}]]）</h5>
                </div>
                <div class="ibox-content">
                    <div class="text-center">
                        <p class="user-info-head"><img class="img-circle img-sm" th:src="${orderDetailsVo.adamUserInfoVo.avatar}" ></p>
                    </div>
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item"><i class="fa fa-user"></i>
                            <b class="font-noraml">昵称：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamUserInfoVo.nickname}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-id-card"></i>
                            <b class="font-noraml">用户ID：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamUser.uid}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-diamond"></i>
                            <b class="font-noraml">会员ID：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamUserMemberVo.memberNo}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-birthday-cake"></i>
                            <b class="font-noraml">会员生日：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamUserInfoVo.birthday}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-paw"></i>
                            <b class="font-noraml">地区：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamUserInfoVo.area}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-phone"></i>
                            <b class="font-noraml">手机号码：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamUser.mobile}]]</p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-plane"></i>
                            <b class="font-noraml">会员地址：</b>
                            <p class="pull-right">
                                [[${orderDetailsVo.adamMemberOrderExtVo.expressReceiver}]]
                            </p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-crosshairs"></i>
                            <p class="pull-right">
                                [[${orderDetailsVo.adamMemberOrderExtVo.expressAddress}]]
                            </p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-heart"></i>
                            <b class="font-noraml">会员状态：</b>
                            <p class="pull-right">
                                <span class='badge badge-primary' th:if="${orderDetailsVo.adamUserMemberVo.state == 1}">正常 / [[${#temporals.format(orderDetailsVo.adamUserMemberVo.expiryAt, 'dd-MM-yyyy')}]]</span>
                                <span class='badge badge-danger' th:if="${orderDetailsVo.adamUserMemberVo.state != 1}">到期 / [[${#temporals.format(orderDetailsVo.adamUserMemberVo.expiryAt, 'dd-MM-yyyy')}]]</span>
                            </p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-calendar-check-o"></i>
                            <b class="font-noraml">创建时间：</b>
                            <p class="pull-right">[[${#temporals.format(orderDetailsVo.adamUserMemberVo.createdAt, 'yyyy-MM-dd HH:mm')}]]</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-8 about">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>订单信息</h5>
                </div>
                <div class="ibox-content">
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item">
                            <b class="font-noraml">订单编号：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamMemberOrderVo.orderNo}]]</p>
                        </li>
                        <li class="list-group-item">
                            <b class="font-noraml">支付编号：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamMemberOrderVo.payNo}]]</p>
                        </li>
                        <li class="list-group-item">
                            <b class="font-noraml">创建时间：</b>
                            <p class="pull-right">[[${#temporals.format(orderDetailsVo.adamMemberOrderVo.createdAt, 'yyyy-MM-dd HH:mm:ss')}]]</p>
                        </li>
                        <li class="list-group-item">
                            <b class="font-noraml">支付时间：</b>
                            <p class="pull-right">[[${#temporals.format(orderDetailsVo.adamMemberOrderVo.paymentAt, 'yyyy-MM-dd HH:mm:ss')}]]</p>
                        </li>
                        <li class="list-group-item">
                            <b class="font-noraml">支付方式：</b>
                            <p class="pull-right">[[${#strings.toUpperCase(orderDetailsVo.adamMemberOrderVo.deviceFrom)}]][[${#strings.toUpperCase(orderDetailsVo.adamMemberOrderVo.payType)}]]</p>
                        </li>
                        <li class="list-group-item">
                            <b class="font-noraml">支付价格：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamMemberOrderVo.pricePaid}]]</p>
                        </li>
                        <li class="list-group-item">
                            <b  class="font-noraml">订单状态：</b>
                            <p class="pull-right">
                                <span class='badge badge-white' th:if="${orderDetailsVo.adamMemberOrderVo.state == 0}">未支付</span>
                                <span class='badge badge-success' th:if="${orderDetailsVo.adamMemberOrderVo.state == 1}">已支付</span>
                                <span class='badge badge-disable' th:if="${orderDetailsVo.adamMemberOrderVo.state == 2}">已关闭</span>
                                <span class='badge badge-danger' th:if="${orderDetailsVo.adamMemberOrderVo.state == 4}">退款中</span>
                                <span class='badge badge-inverse' th:if="${orderDetailsVo.adamMemberOrderVo.state == 5}">已退款</span>
                            </p>
                        </li>
                        <li class="list-group-item">
                            <b class="font-noraml">来源信息：</b>
                            <p class="pull-right">[[${orderDetailsVo.adamMemberOrderVo.source}]] / [[${orderDetailsVo.adamMemberOrderVo.clientIp}]] / [[${orderDetailsVo.adamMemberOrderVo.version}]]</p>
                        </li>
                    </ul>
                </div>

                <div class="text-center" id="toolbar" role="group" style="margin-top: -15px;margin-bottom: 10px;">
                    <a class="btn btn-danger" href="#" onclick="closeItem()">
                        <i class="fa fa-reply-all"></i> 关&nbsp;&nbsp;&nbsp;闭
                    </a>
                    <a class="btn btn-primary" style="margin-left: 15px;" href="#member-refund-form" data-toggle="modal" shiro:hasPermission="adam:order:orderlist:refund" th:if="${orderDetailsVo.adamMemberOrderVo.state == 1 && orderDetailsVo.adamUserMemberVo.state == 1}">
                        申请退款
                    </a>
                </div>

                <div id="member-refund-form" class="modal fade" aria-hidden="true">
                    <div class="modal-dialog" style="width:33%;">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row">
                                    <div>
                                        <h3 class="m-t-none m-b text-center">会员退款</h3>

                                        <form role="form" id="form-member-order-refund">
                                            <input name="orderNo" id="id" type="hidden" th:value="${orderDetailsVo.adamMemberOrderVo.orderNo}" readonly>
                                            <div class="form-group">
                                                <label class="pull-left"><i class="fa fa-cny"></i>&nbsp;支付金额：</label>
                                                <!--                                                <span>[[${orderDetailsVo.adamMemberOrderVo.pricePaid}]]元</span>-->
                                                <input type="number" name="pricePaid" th:value="${orderDetailsVo.adamMemberOrderVo.pricePaid}" class="form-control" style="width: 30%;height: 20px;" readonly>
                                            </div>
                                            <div class="form-group">
                                                <label class="pull-left"><i class="fa fa-cny"></i>&nbsp;退款金额：</label>
                                                <input type="number" name="refundAmt" th:value="${orderDetailsVo.adamMemberOrderVo.pricePaid}" class="form-control" style="width: 30%;height: 20px;">
                                            </div>
                                            <div class="form-group">
                                                <!--                                                <label>退款原因：</label>-->
                                                <textarea rows="3" name="reason" placeholder="请输入退款原因" class="form-control"></textarea>
                                            </div>
                                            <div>
                                                <label>是否能继续购买会员：</label>
                                                <div class="radio check-box">是
                                                    <input type="radio" value="1" name="renewable">
                                                </div>
                                                <div class="radio check-box">否
                                                    <input type="radio" checked="" value="2" name="renewable">
                                                </div>
                                            </div>
                                            <div class="text-center" style="margin-bottom: -15px;margin-top: 10px;">
                                                <button class="btn btn-sm btn-primary m-t-n-xs" type="button" onclick="memberOrderRefund()">
                                                    <strong>确认退款</strong>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>
</section>

<th:block th:include="include :: footer" />
<script>
    var pricePaid = [[${orderDetailsVo.adamMemberOrderVo.pricePaid}]];

    $(function(){
        //键盘按下ESC时关闭窗口!
        $(document).keypress(function(e){
            if(e.keyCode==27){
                //关闭窗口的方法
                window.opener = null;
                window.close();
            }
        });
    });

    $("#form-member-order-refund").validate({
        onkeyup: false,
        rules:{
            refundAmt: {
                required: true,
                number: true,
                min: 0.01,
                max: pricePaid
            },
            reason: {
                required: true,
                minlength: 2,
                maxlength: 100
            }
        },
        messages: {
            refundAmt: {
                required: "请输入退款金额",
                number: "退款金额必须为数字",
                min: "退款金额必须不得小于0.01",
                max: "退款金额不能大于支付金额"
            },
            reason: {
                required: "请输入退款原因",
                minlength: "退款原因不能大于100个字符",
                maxlength: "退款原因不能小于2个字符"
            }

        },
        focusCleanup: true
    });
    function memberOrderRefund () {
        if ($.validate.form("form-member-order-refund")) {
            $.operate.saveModal(ctx + "adam/order/orderList/refund", $('#form-member-order-refund').serialize());
        }
    }
</script>
</body>
</html>
