<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('提交订单退款')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-post-add">
        <input hidden="hidden" type="text" name="orderTicketsId" id="orderTicketsId">
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">订单编号：</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="orderCode" id="orderCode" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">演出名称：</label>
            <div class="col-sm-10">
                <span id="performanceTitle"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">快递费：</label>
            <div class="col-sm-10">
                <input class="form-control" type="number" min="0" name="RefundPriceExpress">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">入场人：</label>
            <div class="col-sm-10">
                <div class="col-sm-12 select-table table-bordered">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label layui-required is-required">退款原因：</label>
            <div class="col-sm-10">
                <select name="reasonId" id="reasonId" class="form-control layui-required" required>
                    <option value="">请选择退款原因</option>
                </select>
            </div>
        </div>
        <div class="form-group" id="reasonDetailGroup" style="display:none;">
            <label class="col-sm-2 control-label layui-required is-required">补充说明：</label>
            <div class="col-sm-10">
                <textarea name="reasonDetail" id="reasonDetail" maxlength="200" class="form-control" rows="3"></textarea>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "kylin/refund";
    var reasonPrefix = ctx + "kylin/refundReasons";

    function loadAppliedReasons() {
        $.ajax({
            url: reasonPrefix + "/appliedList",
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.code == 0 && result.data) {
                    var $sel = $("#reasonId");
                    $sel.find("option:not(:first)").remove();
                    for (var i = 0; i < result.data.length; i++) {
                        var item = result.data[i];
                        $sel.append('<option value="' + item.reasonId + '" data-need-detail="' + item.needDetail + '" data-placeholder="' + (item.placeholder || '') + '">' + item.name + '</option>');
                    }
                }
            }
        });
    }

    function onReasonChange() {
        var $opt = $("#reasonId option:selected");
        var needDetail = $opt.data("need-detail");
        var placeholder = $opt.data("placeholder") || "请填写补充说明";
        if (needDetail == 1) {
            $("#reasonDetailGroup").show();
            $("#reasonDetail").attr("placeholder", placeholder);
        } else {
            $("#reasonDetailGroup").hide();
            $("#reasonDetail").val("");
        }
    }

    $("#form-post-add").validate({
        onkeyup: false,
        rules: {
            orderCode: {
                submitHandler: function (form) {
                    var config = {
                        url: prefix + "/applyOrder",
                        type: "post",
                        dataType: "json",
                        data: {
                            "orderCode": function () {
                                return $.common.trim($("#orderCode").val());
                            }
                        },
                        beforeSend: function () {
                            $.modal.loading("正在查询订单，请稍后...");
                        },
                        success: function (result) {
                            if (result.code > 0) {
                                $.modal.closeLoading();
                                layer.msg(result.msg);
                                return false;
                            } else {
                                $("#orderTicketsId").val(result.data.orderTicketVo.orderTicketsId);
                                $('input[name="RefundPriceExpress"]').val(result.data.orderTicketVo.priceExpress);
                                $('input[name="RefundPriceExpress"]').attr("max", result.data.orderTicketVo.priceExpress);
                                $("#performanceTitle").text(result.data.kylinPerformanceVo.title);
                                var options = {
                                    data: result.data.kylinOrderTicketEntitiesDao,
                                    pagination: false,
                                    columns: [{
                                        checkbox: true
                                    },
                                        {
                                            field: 'orderTicketEntitiesId',
                                            title: '入场人表id',
                                            ignore: false
                                        },
                                        {
                                            field: 'title',
                                            title: '票种名称'
                                        },
                                        {
                                            field: '',
                                            title: '适用时间',
                                            formatter: function (value, row, index) {
                                                return row.useStart + "<br>" + row.useEnd;
                                            }
                                        },
                                        {
                                            field: 'enterName',
                                            title: '入场人'
                                        },
                                        {
                                            field: '',
                                            title: '票状态',
                                            formatter: function (value, row, index) {
                                                var isPayment = "";
                                                switch (row.isPayment) {
                                                    case 0:
                                                        isPayment = "未支付";
                                                        break;
                                                    case 1:
                                                        isPayment = "已支付";
                                                        break;
                                                    case 2:
                                                        isPayment = "退款中";
                                                        break;
                                                    case 3:
                                                        isPayment = "已退款";
                                                        break;
                                                    case 4:
                                                        isPayment = "部分退款";
                                                        break;
                                                }
                                                return isPayment;
                                            }
                                        },
                                        {
                                            field: 'price',
                                            title: '价格'
                                        },
                                        {
                                            field: '',
                                            title: '取票方式',
                                            formatter: function (value, row, index) {
                                                if (row.getTicketType == "electronic") {
                                                    return "电子票";
                                                } else {
                                                    return "快递票";
                                                }
                                            }
                                        },
                                        {
                                            field: '',
                                            title: '是否出票',
                                            formatter: function (value, row, index) {
                                                if (row.isOut == 1) {
                                                    return "已出票";
                                                } else {
                                                    return "未出票";
                                                }
                                            }
                                        },
                                        {
                                            field: '',
                                            title: '退款金额',
                                            formatter: function (value, row, index) {
                                                var canRefundedPrice = row.canRefundedPrice;
                                                var orderTicketEntitiesId = row.orderTicketEntitiesId;
                                                var html = '<input style="width: 100px;" id="' + orderTicketEntitiesId + '" class="form-control" type="number" min="0.01" max="' + canRefundedPrice + '" value="' + canRefundedPrice + '">';
                                                return html;
                                            }
                                        },
                                    ]
                                };
                                $.table.init(options);
                            }
                            $.modal.closeLoading();
                        }
                    };
                    $.ajax(config)
                }
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        var reasonId = $('#form-post-add').find("[name='reasonId']").val();
        var reasonDetail = $('#form-post-add').find("[name='reasonDetail']").val();
        var orderTicketsId = $('#form-post-add').find("[name='orderTicketsId']").val();
        var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
        if (!orderTicketsId) {
            layer.msg("订单id有误");
            return false;
        }
        if (rows.length <= 0) {
            layer.msg("请选择需要退款的入场人订单");
            return false;
        }
        if (!reasonId) {
            layer.msg("请选择退款原因");
            return false;
        }
        var $opt = $("#reasonId option:selected");
        if ($opt.data("need-detail") == 1 && !$.common.trim(reasonDetail)) {
            layer.msg("请填写补充说明");
            return false;
        }
        if ($.validate.form()) {
            var data = $('#form-post-add').serializeArray();
            data.push({"name": "ticketEntityIds", "value": rows});
            var entitiesPriceArray = [];
            for (i in rows) {
                var idname = rows[i];
                var entitiesPrice = $("#"+idname).val();
                entitiesPriceArray.push(entitiesPrice);
            }
            data.push({"name": "entitiesPrice", "value": entitiesPriceArray});

            $.operate.save(prefix + "/apply", data);
        }
    }

    $(function () {
        loadAppliedReasons();
        $("#reasonId").on("change", onReasonChange);
    });

</script>
</body>
</html>
