@using ShwasherSys.Authorization.Permissions
@using ShwasherSys.Models.Layout
@using ShwasherSys.Models.Modal

@{
    /**/
    ViewBag.ActiveMenu = PermissionNames.PagesProductInfoProductMapper; //The menu item will be active for this page.
    ViewBag.Title = "新旧产品替换";

    //var searchForm = new SearchFormViewModal(new List<SearchItem>()
    //{

    //    new SearchItem("propertyNo","新产品").SetSearchIcon("query_Product_modal"),

    //}, false);
}
<style>
    .productInfo-container {
        min-height: 150px;
        border: 1px solid #0000ff;
        padding: 2px;
        margin-top: 5px;
    }
    .alert-ErrorInfo {
        animation: ErrorAction 2s linear;
    }
    @@keyframes ErrorAction{
        from {
             background: #c00
        }
        50% {
             background: orange
        }
        to {
            background: #c00
        }
    }
</style>
<div class="productInfo-container pd">
    <div> <button class="btn btn-success selectNewProduct" data-pType="1" type="button" onclick="selectProduct(1)">选择新成品</button> 
        <button class="btn btn-success selectNewProduct" data-pType="2" type="button" onclick="selectProduct(2)">选择新半成品</button> @*<input type="radio" name="productType1" id="productType1" value="1"/><input type="radio" name="productType1" id="semiProductType1" value="2" />*@</div>
   
    <table class="table table-striped ">
        
        <tbody>
            <tr>
                <th style="width: 150px">编码</th>
                <th style="width: 150px">名称</th>
                <th style="width: 100px">产品类别</th>
                <th style="width: 150px">规格</th>
                <th style="width: 100px">材质</th>
                <th style="width: 100px">硬度</th>
                <th style="width: 200px">表色</th>
                <th style="width: 100px"></th>
            </tr>

        </tbody>
    </table>
</div>
<div class="productInfo-container spd">
    <div> <button class="btn btn-success selectOldProduct" data-pType="1" type="button" onclick="selectProduct(3)">选择待替换成品</button> 
        <button class="btn btn-success selectOldProduct" data-pType="2" type="button" onclick="selectProduct(4)">选择待替换半成品</button> @*<input type="radio" name="productType1" id="productType1" value="1"/><input type="radio" name="productType1" id="semiProductType1" value="2" />*@</div>
   
    <table class="table table-striped">
        <tbody>
      
        <tr>
            <th style="width: 150px">编码</th>
            <th style="width: 150px">名称</th>
            <th style="width: 100px">产品类别</th>
            <th style="width: 150px">规格</th>
            <th style="width: 100px">材质</th>
            <th style="width: 100px">硬度</th>
            <th style="width: 200px">表色</th>
            <th style="width: 100px"></th>
        </tr>

        </tbody>

      
    </table>
</div>
<div style="border: none;min-height: auto;display: flex; flex-wrap: wrap; justify-content:flex-end; align-items: center; padding: 5px 20px;">
    <div >
        <button class="btn btn-danger " style="display: inline-block" data-pType="1" type="button" onclick="ActionReplace()">替换</button>
       
    </div>

   
</div>
<div class="table-box mr-4  iwb-bootstrap-table">
    <input type="hidden" id="IsLock" value="N" />
    @*@Html.Action("ToolMenu", "Layout", new { pageName = ViewBag.ActiveMenu, searchForm })*@
    <table id="table"
           data-url="/api/services/app/ProductMapper/GetAll"
           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="true" 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="ResponseHandler"
           data-click-to-select="true"
           data-single-select="true">
        <thead>
            <tr class="row" id="header">
                <th data-field="state" data-checkbox="true"></th>
                <th data-align="center" data-field="productNo">新编码</th>
                @*<th data-align="center" data-field="newProductType" data-formatter="ProductTypeFormatter">新产品类别</th>*@
                <th data-align="center" data-field="preProductNo">旧产品编码</th>
                <th data-align="center" data-field="preProductType" data-formatter="ProductTypeFormatter">旧产品类别</th>
            </tr>
        </thead>
    </table>
</div>
<section>
    @Html.Partial("Modals/Query/_ProductForReplace", "productId")
    @Html.Partial("Modals/Query/_SemiProductForReplace", "productId")
</section>
@section modal{
   

}

@section scripts
{
    <script type="text/javascript">

        $(function() {
            //show完毕前执行


            LoadTable();
            //var funs = window.funs || { none: function () { console.log("No type"); } };
            //funs["btnUpdate"] = function () { BtnUpdate({ readonly: "propertyType" }); };


        });
        var showType = 1;

        function selectProduct(t) {
            showType = t;
            let modalName = "";
            if (t === 4 || t === 2) {
                modalName = "query_semiProduct_forReplace_modal";
            }
            if (t === 1 || t === 3) {
                modalName = "query_ProductForReplace_modal";
            }
            ShowModal(modalName);
        }

        function ProductTypeFormatter(v) {

            if (v === 1) {
                return '<span class="label label-info">成品</span>';
            } else {
                return '<span class="label label-warning">半成品</span>';

            }
        }
        function ActionReplace() {
            MsgConfirm('确认替换选择的产品吗？', '确认替换', SubmitReplace);
        }
        function SubmitReplace() {
            let replaceDto;
            let spEntity = [];
            let $trs = $(".spd table tbody tr").not(":first");
            if ($trs) {
                $.each($trs,
                    function(i, v) {
                        let pType = $(v).data("ptype");
                        let pid = $(v).find("td").eq(0).html();
                        spEntity.push({ ProductType: pType, ReplaceProductNo: pid });
                    });
            } else {
                abp.message.warn("请选择要替换的旧编码！");
            }
            let $ptr = $(".pd table tbody tr").eq(1);
            if ($ptr) {
                let pid = $ptr.find("td").eq(0).html();
                replaceDto = {
                    ProductNo: pid,
                    PreReplaceProducts: spEntity
                }
                SaveAjax({
                    url: window.appUrl + 'ProductMapper/ReplaceProductNo',
                    data: replaceDto,
                    isValidate: false,
                    isAlert: false,
                    success: function(data) {
                        RefreshTable("table");
                        let $trs = $(".spd table tbody tr");
                        let errorProductNo = '';
                        $.each(data,
                            function(i, v) {
                                let pNo = v.productNo;
                                if (!v.isSuccess) {
                                    $trs.find(`td[data-id="${pNo}"]`).closest('tr').addClass('alert-ErrorInfo');
                                    errorProductNo += pNo + ',';
                                } else {
                                    $trs.find(`td[data-id="${pNo}"]`).closest('tr').remove();
                                }
                            });
                        if (errorProductNo && errorProductNo.length>0) {
                            abp.message.warn(`替换结束！待替换的产品编码为：${errorProductNo}的产品替换错误！`);
                        } else {
                            abp.message.success("产品替换成功！");
                        }
                    }
                });
            } else {
                abp.message.warn("请选择要新编码！");
            }
        }
    </script>


}
<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>
    @*@Html.DropDownList("hid-propertyType", productPropertyTypeList)*@
</section>