@using IwbZero.Setting
@using ShwasherSys.Authorization.Permissions
@{
    ViewBag.ActiveMenu = PermissionNames.Pages; //The menu item will be active for this page.
    var systemName = SettingManager.GetSettingValue(SettingNames.AdminSystemName);

}
@section styles
{
    @*<link href="~/Content/Plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />*@
}
<style>
    .content-wrapper {
        height: 100%;
        position: relative;
        padding: 0 !important;
        background: url('../../Content/Images/home-bg.png') 100% 100%;
    }

    .page {
        position: absolute;
        top: 100px;
        width: 100%;
    }

    .page-title, .page-title-sm {
        cursor: none;
        width: 100%;
        height: 150px;
        /*font-family: SimHei;*/
        font-size: 95px;
        font-weight: 600;
        letter-spacing: 10px;
        color: #ddd;
        opacity: .3;
        display: flex;
        align-items: start;
        justify-content: center;
    }

    .page-title-sm {
        font-size: 80px;
        color: #ddd;
    }

        .page-title::selection, .page-title-sm::selection {
            background: transparent;
            color: #1e90ff;
        }
    .box-footer .arr {
        animation: bouncedelay 1.2s infinite ease-in-out;
        animation-fill-mode: both;
        /*animation-delay: 1s;*/
    }
        .box-footer .arr.arr1 {
            animation-delay: 0.2s;
        }
    .box-footer .arr.arr2 {
        animation-delay: 0.4s;
    }
        .box-footer .arr.arr3 {
            animation-delay: 0.6s;
        }
    @@keyframes bouncedelay {
        0%, 80%, 100% {
            opacity: 1;
        } 
        40% {
            opacity: 0;
          }
    }
    .totalHeaderItem {
        cursor: pointer;
    }
        .totalHeaderItem .info-box-text {
            padding: 10px;
            padding-left: 3px;
            font-size: 1.5rem;
        }
    .alertContent {
        position: relative;
        width: 100%;
    }
        .alertContent > .row {
            display: none;
            padding: 10px;
            position: absolute;
            left: -2000px;
            width: 100%;
        }
</style>
<div class="page no-select">
    <div class="page-title">
        欢迎登陆
    </div>
    <div class="page-title-sm">
        @systemName
    </div>

</div>
<div class="row totalHeaderbox"  style="padding: 10px;">
    
 
</div>

<div class="alertContent">
    <div class="row order-container" >
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border" style="padding: 2px; padding-left: 10px;">
                    <h3 class="box-title">您有未完成的订单，请及时处理！</h3>
                    
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body" style="padding-top: 1px;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-box mr-4  iwb-bootstrap-table">
                                <table id="OrderTable" data-id-field="id" data-unique-id="id" data-single-select="true"
                                       data-click-to-select="true" data-post-body="OnPostBody" style="height: 300px">
                                    <thead>
                                        <tr class="row">
                                            @*<th data-field="state" data-checkbox="true"></th>*@
                                            <th data-align="center" data-field="id">流水号</th>
                                            <th data-align="center" data-field="orderStatusId" data-formatter="OrderStatusFormatter">订单状态</th>
                                            <th data-align="center" data-field="customerId">客户编号</th>
                                            <th data-align="center" data-field="stockNo">客户订单号</th>
                                            <th data-align="center" data-field="orderDate" data-formatter="DateFormatter">订单日期</th>
                                            <th data-align="center" data-field="linkName">联系人</th>
                                            <th data-align="center" data-field="telephone">电话</th>
                                            <th data-align="center" data-field="saleManName">订单业务员</th>
                                            <th data-align="center" data-field="saleTypeName">外销/内销</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer text-center">
                    <a class="btn btn-action" style="display: inline-block; font-size:2rem;" href="/OrderInfo/OrderStatusMg"><i class="arr arr1">></i><i class="arr arr2">></i><i class="arr arr3">></i>前往订单页面</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row production-container">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border" style="padding: 2px; padding-left: 10px;">
                    <h3 class="box-title">您有未完成的排查单，请及时处理！</h3>
                  
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body" style="padding-top: 1px;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-box mr-4  iwb-bootstrap-table">
                                <table id="productionTable" data-id-field="id" data-unique-id="id" data-single-select="true"
                                       data-click-to-select="true" data-post-body="OnPostBody">
                                    <thead>
                                        <tr class="row">

                                            <th data-align="center" data-field="productionOrderNo">排产单号</th>
                                            <th data-align="center" data-field="partNo">零件号</th>
                                            <th data-align="center" data-field="semiProductName">名称</th>
                                            <th data-align="center" data-field="model">规格</th>
                                            <th data-align="center" data-field="quantity">排产数量(千件)</th>
                                            <th data-align="center" data-field="timeCreated" data-formatter="DateFormatter">创建时间</th>
                                            <th data-align="center" data-field="productionOrderStatus" data-formatter="ProductionOrderStatusFormatter">生产状态</th>
                                            <th data-align="center" data-field="remark">备注</th>
                                            <th data-align="center" data-field="material">材质</th>
                                            <th data-align="center" data-field="surfaceColor">表色</th>
                                            <th data-align="center" data-field="rigidity">硬度</th>
                                            <th data-align="center" data-field="kgWeight">千件重</th>
                                            <th data-align="center" data-field="planProduceDate" data-formatter="DateFormatter">计划完成时间</th>
                                            <th data-align="center" data-field="semiProductNo">半成品编码</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer text-center">
                    <a class="btn btn-action" style="display: inline-block; font-size:2rem;" href="/ProductionInfo/ProductionOrderMg"><i class="arr arr1">></i><i class="arr arr2">></i><i class="arr arr3">></i>前往排产单页面</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row package-container">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border" style="padding: 2px; padding-left: 10px;">
                    <h3 class="box-title">您有未审核的包装申请，请及时处理！</h3>
                    
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="box-body" style="padding-top: 1px;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-box mr-4  iwb-bootstrap-table">
                                <table id="packageTable" data-id-field="id" data-unique-id="id" data-single-select="true"
                                       data-click-to-select="true" data-post-body="OnPostBody" style="height: 300px">
                                    <thead>
                                        <tr class="row">

                                            <th data-align="center" data-field="productionOrderNo">流转单编号</th>
                                            <th data-align="center" data-field="" data-formatter="PackageProductNoFormatter">包装前产品编码</th>
                                            <th data-align="center" data-field="applyQuantity">申请包装数量</th>
                                            <th data-align="center" data-field="remark">备注</th>
                                            <th data-align="center" data-field="applyStatus" data-formatter="ApplyStatusFormatter">申请状态</th>
                                            <th data-align="center" data-field="applyDate" data-formatter="DateFormatter">申请时间</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer text-center">
                    <a class="btn btn-action" style="display: inline-block; font-size:2rem;" href="/PackInfo/Index"><i class="arr arr1">></i><i class="arr arr2">></i><i class="arr arr3">></i>前往包装页面</a>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script>
        let $totalHeaderbox = $('.totalHeaderbox');
        let $orderContainer = $(".order-container");
        let $productionContainer = $(".production-container");
        let $packageContainer = $(".package-container");
        $(function() {
            RenderHeaderAlert();
        });

        function RenderHeaderAlert() {
            SaveAjax({
                url: window.appUrl + "Common/GetIndexAlertSum",
                dataType: "json",
                isAlert: false,
                isValidate: false,
                success: function(res) {
                    $totalHeaderbox.empty();
                    if (res && res.length > 0) {
                        res.forEach(function(v, i) {
                            let color = v.sumType == "1"
                                ? "aqua"
                                : v.sumType == "2"
                                ? "red"
                                : v.sumType == "3"
                                ? "green"
                                : "aqua";
                            $totalHeaderbox.append(`
                                 <div class="col-md-4 col-sm-6 col-xs-12 totalHeaderItem" data-sumtype="${v.sumType}">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-${color}"><img src="/Content/Images/index/${v
                                .tipName}.png" /></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text" >${v.sumName}</span>
                                            <span class="info-box-number">${v.quantity}</span>
                                        </div>
                                    </div>
                                </div>`);
                        });
                                BindItemEvent();
                    }
                }
            });
        }
        function BindItemEvent() {
            $('.totalHeaderItem').on('click', function(e) {
                let st = $(e.target).closest('.totalHeaderItem').data('sumtype');
                $('.alertContent > .row').css("display", "none");
                if (st == 1) {

                    GetOrderAlert();
                }
               else if (st == 2) {

                    GetProductionOrderAlert();
                } else if (st == 3) {

                    GetPackageApplyAlert();
                }
            })
        }
        function GetOrderAlert() {
            let $tableOrder = $("#OrderTable");
            SaveAjax({
                url: window.appUrl + "Common/GetOrderHeaderForAlert",
                dataType: "json",
                isAlert: false,
                isValidate: false,
                success: function(res) {
                    console.log(res);
                    if (res && res.length > 0) {
                        $tableOrder.bootstrapTable("destroy");
                        $tableOrder.bootstrapTable({
                            data: res,
                            onPostBody: OnPostBody
                        });
                        setTimeout(() => {
                                $("#OrderTable").bootstrapTable('resetView', { height: 300 });;
                            },
                            1000);
                        $orderContainer.css("display", "block");
                        $orderContainer.animate({left: '10px'}, "slow");
                    } else {
                        $tableOrder.bootstrapTable("destroy");
                        $tableOrder.bootstrapTable({ data: "", onPostBody: OnPostBody });
                    }
                }
            });
        }

        function GetProductionOrderAlert() {
            let $tableOrder = $("#productionTable");
            SaveAjax({
                url: window.appUrl + "Common/GetProductionOrderForAlert",
                dataType: "json",
                isAlert: false,
                isValidate: false,
                success: function(res) {
                    console.log(res);
                    if (res && res.length > 0) {
                        $tableOrder.bootstrapTable("destroy");
                        $tableOrder.bootstrapTable({
                            data: res,
                            onPostBody: OnPostBody
                        });
                        $productionContainer.css("display", "block");
                        $productionContainer.animate({left: '10px'}, "slow");
                        setTimeout(() => {
                                $("#productionTable").bootstrapTable('resetView', { height: 300 });;
                            },
                            1000);
                    } else {
                        $tableOrder.bootstrapTable("destroy");
                        $tableOrder.bootstrapTable({ data: "", onPostBody: OnPostBody });
                        //$productionContainer.slideUp();
                    }
                }
            });
        }

        function GetPackageApplyAlert() {
            let $tableOrder = $("#packageTable");
            SaveAjax({
                url: window.appUrl + "Common/GetPackageApplyForAlert",
                dataType: "json",
                isAlert: false,
                isValidate: false,
                success: function(res) {
                    console.log(res);
                    if (res && res.length > 0) {
                        $tableOrder.bootstrapTable("destroy");
                        $tableOrder.bootstrapTable({
                            data: res,
                            onPostBody: OnPostBody
                        });
                        setTimeout(() => {
                            $("#packageTable").bootstrapTable('resetView', { height: 300 });;
                        },
                            1000);
                        $packageContainer.css("display", "block");
                        $packageContainer.animate({left: '10px'}, "slow");
                    } else {
                        $tableOrder.bootstrapTable("destroy");
                        $tableOrder.bootstrapTable({ data: "", onPostBody: OnPostBody });
                        //$packageContainer.slideUp();
                    }
                }
            });
        }

     
    </script>
    <script>
        function OrderStatusFormatter(v, r) { //danger
            if (r.orderStatusId === 2) {
                return '<span class="label label-success">新建</span>';
            } else if (r.orderStatusId === 3) {
                return '<span class="label label-danger">已审核</span>';
            } else if (r.orderStatusId === 12) {
                return '<span class="label label-primary">完成</span>';
            }
            return v;
        }

        function ProductionOrderStatusFormatter(v, r) {
            var str = '';
            switch (v) {
                case 1:
                    str += '<span class="label label-info">新建</span>';
                    break;
                case 2:
                    str += '<span class="label label-iwb">生产中</span>';
                    break;
                case 3:
                    str += '<span class="label label-danger">入库中</span>';
                    break;
                case 7:
                    str += '<span class="label label-success">已审核</span>';
                    break;
                default:
                    str += '<span class="label label-warning">' + v + '</span>';
                    break;
            }
            return str;

        }


        function ProcessingNumFormatter(v, r) {

            if (v === 0) {
                //return '<span class="label label-info">' + v+ '</span>';
                return '';
            } else {
                return '<span class="label label-danger">待处理:' + v + '</span>';
            }

        }

        function PackageProductNoFormatter(v, r) {
            if (r.semiProductNo) {
                return '<span class="label label-info">半成品包装:' + r.semiProductNo + '</span>';
            } else {
                return '<span class="label label-danger">成品包装' + r.productNo + '</span>';
            }

        }

        function ApplyStatusFormatter(v, r) {
            if (r.isClose) {
                return '<span class="label label-primary">已结束</span>';
            }
            if (v === "1") {
                return '<span class="label label-info">申请中</span>';
            }
            return '<span class="label label-info">' + v + '</span>';
        }
    </script>
}