@using System.Web.UI.HtmlControls
@using Abp.Timing
@using ShwasherSys.Authorization.Permissions
@using ShwasherSys.Models.Layout
@using ShwasherSys.Models.Modal

@{
    /**/
    ViewBag.ActiveMenu = PermissionNames.PagesInvoiceInfoInvoiceCreate; //The menu item will be active for this page.
    ViewBag.Title = "客户发票生成";
    string initStickNum = "S"+Clock.Now.ToString("yyMMdd -HHmmss");
    string stickMan = ViewBag.InitStickMan;
    /*var searchForm = new SearchFormViewModal(new List<SearchItem>()
{
new SearchItem("id", "发货单号"),
new SearchItem("sendDate", "发货日期",FiledType.Dnull,ExpType.Greater),
new SearchItem("sendDate", "到",FiledType.Dnull,ExpType.LessOrEqual),
new SearchItem("customerId", "客户编号").SetSearchIcon("query_customer_modal"),
new SearchItem("stockNo", "客户订单号"),
new SearchItem("isbill", "开票状态").SetSearchItem(stickBillStatusList)

}, false);*/
}
@section css{
    <link href="~/Content/Plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <style>
        .form-box {
            min-height: 50px;
        }

            .form-box .input-group-addon {
                background: #d1dcf9;
                border-color: #d1dcf9;
                color: #563d7c;
            }

            .form-box .form-control {
                border-color: #d1dcf9;
            }

            .form-box .form-box-column {
                float: left;
                min-width: 250px;
                width: 18%;
                margin: 0 5px;
            }

        .btn-action {
            margin-left: 20px;
            width: 100px;
            margin-top: 0px;
        }

        .table-box .btn-toolbar {
            background: #E6E6FA;
            border: 1px solid #E6E6FA;
        }

        .lable-value {
            padding: .4rem .25rem;
        }

        .KeyWords {
            border-radius: 0 0 0 0 !important;
        }
    </style>
}
<div class="row" style="margin: 0 0;">
    <div class="col-xs-12" style="padding: 0 5px;">
        <div class="nav-tabs-custom" style="margin-bottom: 5px;">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#query_tab" data-toggle="tab">查询信息页</a></li>
                <li><a href="#createInvoice_tab" data-toggle="tab">填开发票页</a></li>
            </ul>
            <div class="tab-content form-box">
                <div class="tab-pane active" id="query_tab" style="width: 100%;">
                    <div class="form-box-column">
                        <div class="form-group-sm input-group">
                            <div class="input-group-addon" style="">
                                <span>客户编号</span>
                            </div>
                            <input type="text" class="form-control KeyWords" style="border-radius: 0 0 0 0 !important;" id="customerId" name="customerId" data-keyField="customerId" data-fieldType="0" data-expType="0" readonly="readonly" />
                            <div class="input-group-addon" style="cursor: pointer;" onclick="ShowQueryModal('query_customer_modal')">
                                <i class="iconfont icon-search"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-box-column">
                        <div class="form-group-sm input-group">
                            <div class="input-group-addon">
                                <span>日期</span>
                            </div>
                            <input type="text" class="form-control KeyWords" id="startDate" style="border-radius: 0 0 0 0 !important;" name="startDate" data-keyField="creationTime" data-fieldType="5" data-expType="2" />@*//data-keyField="sendDate" data-fieldType="6"*@
                            <div class="input-group-addon" style="cursor: pointer;" onclick="BtnSearch()">
                                <i class="iconfont icon-search"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-box-column">
                        <div class="form-group-sm input-group">
                            <div class="input-group-addon">
                                <span>至</span>
                            </div>
                            <input type="text" class="form-control KeyWords" id="endDate" name="endDate" style="border-radius: 0 0 0 0 !important;" data-keyField="creationTime" data-fieldType="5" data-expType="5" />@*//data-keyField="sendDate" data-fieldType="6"*@
                            <div class="input-group-addon" style="cursor: pointer;" onclick="BtnSearch()">
                                <i class="iconfont icon-search"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="createInvoice_tab" style="width: 100%; height: 70px;">
                    <div style="width: 100%; height: 30px;">
                        <form id="formInvoice">
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon" style="">
                                        <span>发票号</span>
                                    </div>
                                    <input type="text" class="form-control" id="stickNum" name="stickNum" value="@initStickNum" />
                                </div>
                            </div>
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon">
                                        <span>开票日期</span>
                                    </div>
                                    <input type="text" class="form-control" id="creatDate" name="creatDate" />
                                </div>
                            </div>
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon">
                                        <span>开票人</span>
                                    </div>
                                    <input type="text" class="form-control" id="stickMan" name="stickMan" value="@stickMan" />
                                </div>
                            </div>
                            <div class="form-box-column">
                                <div class="form-group-sm input-group">
                                    <div class="input-group-addon">
                                        <span>备注</span>
                                    </div>
                                    <input type="text" class="form-control" id="description" name="description" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div style="margin-top: 5px; height: 35px;">
                        <div class="form-box-column">
                            <button type="button" class="btn btn-block btn-info btn-sm" id="createStickBillBtn" style="width: 360px;" onclick="CreateStickBill()"><i class="iconfont icon-fapiao"></i><span style="font-size: 1.3rem;"><strong>开发票</strong></span>&nbsp;&nbsp;<span style="color: red;">(发票号为你真实的发票编号应该是唯一不重复的)</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="table-box mr-4  iwb-bootstrap-table">
    <div class="btn-toolbar row" id="tableTool" style="display: none;" role="toolbar" aria-label="Toolbar with button groups">
        <div class="col-sm-12 col-lg-12 pull-left" style="padding: 0">

            <form class="form-horizontal" style="padding: 0 10px" id="form">
                <div class="form-group-sm row">
                    <label class="iwb-label col-md-1 control-label" for="customerName">客户:</label>
                    <div class="col-md-2">
                        <label class="lable-value" id="customerName"></label>
                    </div>
                    <label class="iwb-label col-md-1 control-label " for="address">地址:</label>
                    <div class="col-md-2" style="padding: 0 5px">
                        <label class="lable-value" id="address"></label>
                    </div>
                    <label class="iwb-label col-md-1 control-label " for="telephone">联系电话:</label>
                    <div class="col-md-2">
                        <label class="lable-value" id="telephone"></label>
                    </div>
                    <label class="iwb-label col-md-1 control-label " for="linkMan">联系人:</label>
                    <div class="col-md-2" style="padding: 0 5px">
                        <label class="lable-value" id="linkMan"></label>
                    </div>
                </div>
                @*<div class="form-group-sm row">
                    </div>*@
            </form>
        </div>
    </div>

    <table id="table"
           data-url="/api/services/app/OrderStickBill/GetAllCreateView"
           data-striped="true" data-id-field="id" data-unique-id="id"
           data-method="post"
           data-side-pagination="server"
           data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
           data-cache="false"
           data-pagination="false" data-page-size="30" data-page-number="1" data-page-list="[30,50,100,200]" data-pagination-detail-h-align="right" data-pagination-h-align="left"
           data-query-params="QueryParams"
           data-response-handler="ResponseHandlerNoPage"
           data-click-to-select="true"
           data-single-select="false">
        <thead>
            <tr class="row">
                <th data-field="state" data-checkbox="true"></th>
                @*<th data-align="center" data-field="stockNo">客户订单号</th>
        <th data-align="center" data-field="orderSendBillNo">发货单号</th>
        <th data-align="center" data-field="statementBillNo">对账单号</th>
        <th data-align="center" data-field="sendDate">发货日期</th>
        <th data-align="center" data-field="partNo">零件号</th>
        <th data-align="center" data-field="model">规格</th>
        <th data-align="center" data-field="remark">描述</th>
        <th data-align="center" data-field="surfaceColor">表色</th>
        <th data-align="center" data-field="rigidity">硬度</th>
        <th data-align="center" data-field="sendQuantity">数量</th>
        <th data-align="center" data-field="price">单价</th>
        <th data-align="center" data-field="total">金额</th>*@

                <th data-align="center" data-field="statementBillNo">对账单号</th>
                <th data-align="center" data-field="customerId">客户编码</th>
                <th data-align="center" data-field="customerName">客户名称</th>
                <th data-align="center" data-field="creationTime">日期</th>
                <th data-align="center" data-field="billMan">对账人</th>
              
                <th data-align="center" data-field="description">备注</th>


            </tr>
        </thead>
    </table>
</div>
@section modal
{
    <section>
        @Html.Partial("Modals/Query/_CustomerEx", new QueryParamModel("customerId","BtnSearch()"))
    </section>
}
@section scripts
{
    <script src="~/Content/Plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="~/Content/Plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
        var datePickerOpt = {
            language: 'zh-CN',
            format: "yyyy-mm-dd",
            todayBtn: true,
            autoclose: true,
            startView: 2,
            minView: 2,
            maxView: 4
            //showSecond: true,
            //showHours: true,
            //minuteStep: 10
        };
        $(function () {
            $("#formInvoice")[0].reset();
            $("#startDate").datetimepicker(datePickerOpt);
            $("#endDate").datetimepicker(datePickerOpt);
            $("#creatDate").datetimepicker(datePickerOpt);
            var nowDate = new Date();
            var preDate = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000);
            var endDate = new Date(nowDate.getTime() + 24 * 60 * 60 * 1000);
            $("#startDate").val(preDate.Format("yyyy-MM-dd"));
            $("#endDate").val(endDate.Format("yyyy-MM-dd"));
            $("#creatDate").val(nowDate.Format("yyyy-MM-dd"));
            $("#customerId").val("");
            LoadTable({
                responseHandler:ResponseHandlerNoPage
            });
        });

        function BtnSearch() {
            GetSearchList();
            ReloadCusotmerInfo();
            RefreshTable();
        }

        function ReloadCusotmerInfo() {
            var customerId = $("#customerId").val();
            if (!customerId) {
                return;
            }
            SaveAjax({
                url: window.appUrl + "Query/GetCustomerInfo",
                data: { id: customerId },
                isAlert: false,
                isValiate: false,
                success: function(res) {
                    if (res) {
                        $("#customerName").html(res.customerName);
                        $("#address").html(res.address);
                        $("#telephone").html(res.telephone);
                        $("#linkMan").html(res.linkMan);
                        $("#tableTool").show();
                    } else {
                        $("#tableTool").hide();
                    }
                }
            });
        }

        function CreateStickBill() {
            var rows = $("#table").bootstrapTable("getSelections");
            if (rows.length > 0) {
                var orderSendIds = "";
                rows.forEach(function(r) {
                    orderSendIds += "," + r.id;
                });
                if (orderSendIds) {
                    orderSendIds = orderSendIds.substr(1);
                }
                var stickNum = $("#stickNum").val();
                var data = { CustomerId:$("#customerId").val(),OrderSendIds: orderSendIds ,Id:stickNum};
                $.extend(data, formUtil.Serialize($("#formInvoice")));
                SaveAjax({
                    url: window.appUrl + "OrderStickBill/Create",
                    data: data,
                    dataType: "json",
                    isValiate: false,
                    isAlert: false,
                    success: function(res) {
                        if (res) {
                            BtnSearch();
                            abp.message.success("发票创建成功！").done(function() {
                                window.open("@Url.Action("InvoiceDetail")/" + stickNum, "_blank");
                            });
                        }
                    }
                });
            } else
                abp.message.warn(abp.localization.localize("ChooseOneToOp"));
        }

        function GetSearchList() {
            var searchList = $("#query_tab").find(".KeyWords");
            window._searchList = [];
            //_searchList.push({
            //    KeyWords: "1",
            //    KeyField: "statementState",
            //    FieldType: 2,
            //    ExpType: 1
            //});
            searchList.each(function(i, v) {
                var keyWords = $(v).val();
                var keyField = $(v).data("keyfield");
                var fieldType = $(v).data("fieldtype");
                var expType = $(v).data("exptype");
                if (!keyWords && keyField === "customerId") {
                    keyWords = "N_";
                }
                if (keyWords) {
                    if (fieldType === 6 && expType === 5) {
                        var endDate = new Date(keyWords);
                        var qDate = new Date(endDate.getTime() + 24 * 60 * 60 * 1000);
                        keyWords = qDate.Format("yyyy-MM-dd");
                    }
                    _searchList.push({
                        KeyWords: keyWords,
                        KeyField: keyField,
                        FieldType: fieldType,
                        ExpType: expType
                    });
                }
            });

        }

        function OnAll() {
            $("#createStickBillBtn").prop('disabled', config.table.bootstrapTable('getSelections').length === 0);
        }

        function OnLoadSuccess() {
            $(".bs-checkbox").find("input").addClass("filled-in").after("<label></label");
            $("#table thead th.bs-checkbox ").off("click.checkOnTable").on("click.checkOnTable",
                function() {
                    $(this).find("input").click();
                });
            abp.ui.clearBusy();
        }
    </script>
    <script>
        function KeepClock() {
            SaveAjax({
                url: window.appUrl + "Common/KeepClock",
                async:false,
                isValidate: false,
                isAlert: false,
                success: function(res) {
                    console.log('页面与服务器交户：'+res);
                }
            });
            setTimeout(KeepClock, 3 * 60 * 1000);
        }

        setTimeout(KeepClock, 3 * 60 * 1000);
        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        Date.prototype.Format = function(fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1,
                        (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        //将数字转换成金额显示 n是小数点后位数
        function toNumber(num, n) {
            var re = String(num);
            var dotfront = "";
            var dotlast = "";
            if (re.indexof('.') > -1) {
                var sarr = re.spilt('.');
                dotfront = sarr[0];
                dotlast = sarr[1];
                var dotlastlength = strlen(dotlast);
                if (dotlastlength < n) {
                    for (var j = 0; j < n - dotlastlength; j++) {
                        dotlast += "0";
                    }
                }
                if (dotlastlength > n) {
                    dotlast = dotlast.substr(0, n);
                }
            } else {
                dotfront = re;
                for (var i = 0; i < n; i++) {
                    dotlast += "0";
                }
            }
            num = dotfront + '.' + dotlast;
            return num;
        }

        function _formatAmount(strData, n) {
            var CurrencyAndAmountRegExp =
                /^(\d{1,18})|(\d{1,18}\.)|(\d{1,17}\.\d{0,1})|(\d{1,16}\.\d{0,2})|(\.\d{1,2})$/;
            var _result = CurrencyAndAmountRegExp.test(strData);
            if (_result == false) {
                return strData;
            } // 一般来说最多就6位吧，当然如果有特殊需求可自行更改(｀・∀・´)
            n = n > 0 && n <= 6 ? n : 2;
            var formatData = parseFloat((strData + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
            var l = formatData.split('.')[0].split('').reverse();
            var r = formatData.split('.')[1];
            var t = '';
            for (i = 0; i < l.length; i++) {
                t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
            }
            return t.split('').reverse().join('') + '.' + r;
        }

        function strlen(str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                var c = str.charCodeAt(i);
                //单字节加1
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                    len++;
                } else {
                    len += 2;
                }
            }
            return len;
        }
    </script>
}