@using CRM.Core.Model.Entity
@using Core.Web.WebHelper
@model Core.Web.Controllers.OrderRefundApplyController.OrderRefundDto
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var read = (bool)ViewBag.Readonly;
}
<style>
    .layui-form-label {
        width: 150px
    }
    .layui-input-block {
        margin-left: 0;
    }
    .layui-laydate-content > .layui-laydate-list {
        padding-bottom: 0px;
        overflow: hidden;
    }

    .layui-laydate-content > .layui-laydate-list > li {
        width: 50%
    }

    .merge-box .scrollbox .merge-list {
        padding-bottom: 5px;
    }
    .layui-form-item .layui-input-inline {
        float: left;
        width: auto !important;
        margin-right: 10px;
    }
</style>

<div class="x-body">
    <form class="layui-form" action="" lay-filter="formTest">
        <input type="hidden" id="id" name="id" value="@ViewBag.Id" />
        <input type="hidden" id="OperatorEid" name="OperatorEid" value="@ViewBag.Eid" />
        <input type="hidden" id="operator" name="operator" value="@ViewBag.userName" />
        <input type="hidden" id="deptid" name="deptid" value="" />
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>客户ID：</label>
            <div class="layui-input-inline">
                <input type="text" name="resid" id="resid" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style="width:300px;" value="@Model.Resid" @Html.Raw(Model.Id == 0 ? "" : "disabled")>
            </div>
            @if (Model.Id == 0)
            {
                <div class="layui-input-inline" style="width:0;">
                    <button class="layui-btn layui-btn-sm layui-btn-primary" type="button" id="search">查找</button>
                </div>
            }
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>客户姓名：</label>
            <div class="layui-input-inline">
                <input type="text" name="cname" id="cname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style="width:300px;" disabled value="@Model.Cname">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>退款类型：</label>
            <div class="layui-input-inline">
                <select id="refundType" name="refundType" style="height:35px;" lay-filter="refundType" lay-verify="required" @Html.Raw(read ? "disabled" : "")>
                    <option value="">请选择</option>
                    <option value="1">重大风险</option>
                    <option value="2">外诉</option>
                    <option value="4">内诉</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="selectComplaintId">
            <label class="layui-form-label"><span style="color: red">*</span>投诉单号：</label>
            <div class="layui-input-inline">
                <select id="complaintId" name="complaintId" style="height:35px;" lay-filter="complaintId" lay-verify="required" @Html.Raw(read ? "disabled" : "")>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>退款订单号：</label>
            <div class="layui-input-inline">
                <select id="orderid" name="orderid" style="height:35px;" lay-filter="orderid" lay-verify="required" @Html.Raw(read ? "disabled" : "")>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>支付类型：</label>
            <div class="layui-input-inline">
                <select id="payStatus" name="payStatus" lay-filter="payStatus" style="height:35px;" @Html.Raw(read ? "disabled" : "")>
                    <option value="">请选择</option>
                    <option value="1">支付宝</option>
                    <option value="3">银行转账</option>
                    <option value="5">微信支付</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退款人账号：</label>
            <div class="layui-input-inline">
                <input type="text" name="RefundNo" id="RefundNo" placeholder="" autocomplete="off" class="layui-input" style="width:300px;" value="@Model.RefundNo" @Html.Raw(read ? "disabled" : "")>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>退款人姓名：</label>
            <div class="layui-input-inline">
                <input type="text" name="refundName" id="refundName" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style="width:300px;" value="@Model.RefundName" @Html.Raw(read ? "disabled" : "")>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>退款金额：</label>
            <div class="layui-input-inline">
                <input type="text" name="RefundPrice" id="RefundPrice" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style="width:300px;" value="@Model.RefundPrice" @Html.Raw(read ? "disabled" : "")>
                <br />
                <span style="color: red">退款金额不能大于（客户退款订单到账金额总和-已退款金额）</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>退款日期：</label>
            <div class="layui-input-inline">
                <input class="layui-input" lay-verify="required" placeholder="" name="RefundDate" id="RefundDate" style="width:300px;" value="@Model.RefundDateStr" @Html.Raw(Model.Id == 0 ? "" : "disabled")>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>退款说明：</label>
            <div class="layui-input-inline">
                <textarea class="layui-textarea" lay-verify="required" name="RefundRemark" id="RefundRemark" style="width:300px;" @Html.Raw(read ? "disabled" : "")>@Model.RefundRemark</textarea>
            </div>
        </div>
        @if (read && !string.IsNullOrEmpty(Model.Attachment))
        {
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">附件：</label>
                    <div class="layui-input-inline">
                        <a href="@Html.Raw(Model.Attachment)" id="atturl" target="_blank" class="layui-form-mid" style="color:blue">下载</a>
                    </div>
                </div>
            </div>
        }
        @if (!read)
        {
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">附件：</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="uploadAtt">上传附件</button><i class="layui-icon layui-icon-ok layui-bg-green" style="display:none;" id="hasAtt"></i>
                        <input type="hidden" name="attachment" id="attachment" />
                        <br /><span>格式：doc(.docx)、.ppt(.pptx)、.xls(.xlsx)、.wps、.pdf、.txt、.MP4、JPG、JPEG、PNG、zip、7z</span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="float: right">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" lay-submit="" id="save" lay-filter="save" onclick="return false;">保存</button>
                </div>
            </div>
        }
    </form>
</div>
<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
<script>
    var selectRow = {};
    var layer;
    var table;
    var winindex;
    var upload;
    var inneruserTree;
    var element;
    var form;
    var accessories = [];
    var complaints = [];
    var orders = [];
    layui.config({
        base: '../Scripts/layui_ext/',
    }).extend({
        selectInput: 'selectInput/selectInput'
    }).use(['table', 'laydate', 'upload', 'flow', 'element', 'form', 'selectInput'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            , form = layui.form
            , selectInput = layui.selectInput;
        element = layui.element;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#RefundDate'
        });

        var File_Server = '@ViewBag.File_Server';
        var loading;
        var resid = '@Html.Raw(Model.Resid)';
        var orderid = '@Html.Raw(Model.Orderid)';
        var refundType = '@Html.Raw(Model.RefundType)';
        var complaintId = '@Html.Raw(Model.ComplaintId)';
        var id = '@Html.Raw(Model.Id)';
        var reasonTree = [
            { value: "1", name: "5个工作日无理由" },
            { value: "2", name: "亏损" },
            { value: "4", name: "服务不满" },
            { value: "8", name: "产品不合适" },
            { value: "16", name: "客户个人原因" }
        ];
        var channelTree = [
            { value: "1", name: "400申诉热线" },
            { value: "2", name: "投诉留言" },
            { value: "4", name: "业务部反馈" },
            { value: "8", name: "微信后台" }
        ];

        if (id != '' && id != '0') {
            if (refundType == "1") {
                $('#selectComplaintId').hide();
            }
            search(resid, orderid, refundType, complaintId);
        } else {
            $('#selectComplaintId').hide();
        }
        form.on('select(refundType)', function (data) {
            console.log(data);
            if (data.value != '1') {
                $('#complaintId').attr("lay-verify", "{required:true}"); 
                $('#selectComplaintId').show();
                InComplaints(data.value)
            } else {
                $('#complaintId').attr("lay-verify", "{required:false}");
                $("#complaintId").html('');
                $('#selectComplaintId').hide();
            }
        })

        form.on('select(orderid)', function (data) {
            var order = orders.find(x => x.Orderid == data.value);

            if (order) {
                $("#deptid").val(order.DeptId);
            }
        })

        form.on('submit(save)', function (data) {
            var id = '@Model.Id';
            console.log(id)
            if (id != '' && id != '0') {
                layer.confirm('是否确认保存该申请?', { icon: 3, title: '提示' }, function (index) {
                    $.ajax({
                        type: "POST",
                        url: '/OrderRefundApply/Update',
                        data: JSON.stringify(data.field),
                        dataType: "json",
                        contentType: "application/json",
                        success: function (da) {
                            if (da.code == 0) {
                                parent.layer.msg('操作成功！', { icon: 1 });
                                parent.TableReload();
                                parent.Closed();
                            } else {
                                layer.msg(da.message, { icon: 2 });
                            }
                        },
                        error: function () {
                            layer.msg('操作失败！', { icon: 2 });
                        }
                    });
                });
            } else {
                layer.confirm('是否确认保存该申请?', { icon: 3, title: '提示' }, function (index) {
                    $.ajax({
                        type: "POST",
                        url: '/OrderRefundApply/Create',
                        data: JSON.stringify(data.field),
                        dataType: "json",
                        contentType: "application/json",
                        success: function (da) {
                            if (da.code == 0) {
                                parent.layer.msg('操作成功！', { icon: 1 });
                                parent.TableReload();
                                parent.Closed();
                            } else {
                                layer.msg(da.message, { icon: 2 });
                            }
                        },
                        error: function () {
                            layer.msg('操作失败！', { icon: 2 });
                        }
                    });
                });
            }
        })

        $('#search').on('click', function () {
            var resid = $('#resid').val();
            if (!resid) {
                layer.msg('请输入客户ID', { icon: 2 });
                return;
            }
            search(resid);
        })

        var File_Server = '@ViewBag.File_Server';
        var loading;
        $.ajax({
            type: "GET",
            url: File_Server + "/api/Token?key=7AC51A5F0DE9A13D5FC9960AD45CC8D5",
            success: function (da) {
                token = "Bearer " + da;
                upload.render({ //允许上传的文件后缀
                    elem: '#uploadAtt'
                    //, bindAction: '#save-hide'
                    , url: File_Server + '/Streaming/UploadLargeFile'
                    , accept: 'file' //普通文件
                    //, auto: false
                    , headers: { Authorization: token }
                    , multiple: true
                    , exts: 'jpg|png|gif|bmp|jpeg|txt|xls|xlsx|doc|docx|ppt|pptx|wps|pdf|txt|mp4|jpeg|png|zip|7z'
                    , size: 512000 //限制文件大小，单位 KB
                    , before: function (obj) {
                        loading = layer.open({
                            type: 1,
                            area: ['250px', '100px'], //宽高
                            content: '<div style="margin:0 20px" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">' +
                                '<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>' +
                                '</div>'
                        });
                    }
                    , progress: function (n, elem, res, index) {
                        var percent = n + '%' //获取进度百分比
                        element.progress('demo', percent); //可配合 layui 进度条元素使用
                        element.progress('demo-' + index, n + '%'); //进度条
                    }
                    , allDone: function (obj) { //当文件全部被提交后，才触发
                        console.log("obj", obj); //得到总文件数
                        console.log(obj.successful); //请求成功的文件数
                        console.log(obj.aborted); //请求失败的文件数
                    }
                    , done: function (res) {
                        layer.close(loading);
                        console.log(res)
                        if (res.url && res.url != "") {
                            $("#attachment").val(res.url);
                            $("#hasAtt").show();
                            layer.msg('附件上传成功！', { icon: 1 });
                        } else {
                            layer.msg('附件上传失败！', { icon: 2 });
                        }
                    }
                });
                upload.render({ //允许上传的文件后缀
                    elem: '#uploadAuditImg'
                    , url: File_Server + '/Streaming/UploadLargeFile'
                    , accept: 'file' //普通文件
                    , acceptMime: 'image/*'
                    , headers: { Authorization: token }
                    , size: 512000 //限制文件大小，单位 KB
                    , done: function (res) {
                        //console.log(res)
                        if (res.url && res.url != "") {
                            $("#imglist").append('<li><a href="' + res.url + '" target="_blank"><img src="' + res.url + '" /></a><span> <i class="layui-icon layui-icon-delete" style="font-size: 20px; color: red;"></i></span></li>');
                            if ($("#imglist").find("li").length > 5) {
                                $("#uploadAuditImg").hide();
                            }
                        }
                    }
                });
            }
        })
    })

    function search(resid, orderid, complaintType, complaintid) {
        layui.use('form', function () {
            var form = layui.form;
            $.ajax({
                type: "GET",
                url: '/OrderRefundApply/GetOrderRefundCustomerInfo?resid=' + resid,
                dataType: "json",
                contentType: "application/json",
                success: function (da) {
                    console.log(da)
                    if (da.code == 0) {
                        $('#cname').val(da.data.Cname);
                        $("#orderid").html('');
                        $("#orderid").append(new Option('请选择', ''));
                        $('select[name=refundType]').val(@Model.RefundType);
                        $('select[name=payStatus]').val(@Model.PayStatus);
                        $(da.data.Orders).each(function (index, val) {
                            if (orderid && val.Orderid == orderid) {
                                $("#orderid").append(new Option(val.Orderid, val.Orderid, true, true));
                            } else {
                                $("#orderid").append(new Option(val.Orderid, val.Orderid));
                            }
                        });
                        complaints = da.data.Complaints;
                        orders = da.data.Orders;
                        if (complaintType && complaintid && complaintType != '1') {
                            InComplaints(complaintType, complaintid)
                        }
                        form.render('select');
                    } else {
                        layer.msg(da.retmsg, { icon: 2 });
                    }
                },
                error: function () {
                    layer.msg('操作失败！', { icon: 2 });
                }
            });
        });
    }

    function InComplaints(type, complaint) {
        layui.use('form', function () {
            var form = layui.form;
            $("#complaintId").html('');
            $("#complaintId").append(new Option('请选择', ''));
            if (type == '2') {
                var complaintList = complaints.filter(x => x.ComplaintType == 2);
                $(complaintList).each(function (index, val) {
                    if (complaint && val.ComplaintId == complaint) {
                        console.log("complaintList1" + complaint);
                        $("#complaintId").append(new Option(val.ComplaintId, val.ComplaintId, true, true));
                    } else {
                        console.log("complaintList2" + complaint + "," + val.ComplaintId);
                        $("#complaintId").append(new Option(val.ComplaintId, val.ComplaintId));
                    }
                });
            } else if (type == '4') {
                var complaintList = complaints.filter(x => x.ComplaintType == 4);
                $(complaintList).each(function (index, val) {
                    if (complaint && val.ComplaintId == complaint) {
                        $("#complaintId").append(new Option(val.ComplaintId, val.ComplaintId, true, true));
                    } else {
                        $("#complaintId").append(new Option(val.ComplaintId, val.ComplaintId));
                    }
                });
            }
            form.render('select');
        });
    }

    function Closed() {
        layer.close(winindex);
    }

</script>