@using ShwasherSys.Authorization.Permissions
@using ShwasherSys.Models.Layout
@using ShwasherSys.Models.Modal
@using ShwasherSys.Views.Shared.New.Modals
@using InputTypes = ShwasherSys.Models.Modal.InputTypes
@using ModalBodyViewModel = ShwasherSys.Models.Modal.ModalBodyViewModel
@using ModalHeaderViewModel = ShwasherSys.Models.Modal.ModalHeaderViewModel
@using Input = ShwasherSys.Views.Shared.New.Modals.Input

@{
    /**/
    ViewBag.ActiveMenu = PermissionNames.PagesProductInfoProductProperty; //The menu item will be active for this page.
    ViewBag.Title = "产品属性管理";
    List<SelectListItem> productPropertyTypeList = ViewBag.ProductPropertyType;
    // List<SelectListItem> classification = ViewBag.Classification;
    var searchForm = new SearchFormViewModal(new List<SearchItem>()
{

        new SearchItem("propertyNo","编码"),
        new SearchItem("propertyValue","属性值"),
        new SearchItem("propertyType","属性类别").SetSearchItem(productPropertyTypeList),
        new SearchItem("displayValue","显示值"),

    }, false);
}

<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/ProductProperty/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="propertyType" data-formatter="PropertyTypeFormatter">属性类别</th>
                <th data-align="center" data-field="propertyNo">编码</th>
                <th data-align="center" data-field="propertyValue">属性值</th>
                <th data-align="center" data-field="displayValue">显示值</th>
                <th data-align="center" data-field="hsCode" data-formatter="HsCodeFormatter">海关编码</th>
                <th data-align="center" data-field="contentInfo">内容描述</th>
            </tr>
        </thead>
    </table>
</div>

@section modal{
    <section>
        <!--Main Modal-->
        <div class="modal fade" id="modal" role="dialog" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered" role="document">
                <div class="modal-content">
                    @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("产品标准"))
                    @{
                        var inputs = new List<InputViewModel>
                                {
                            new InputViewModel("id", hide: true),
                            new InputViewModel("propertyNo", hide: true),
                            new InputViewModel("propertyType",InputTypes.List, displayName: "属性类别").SetSelectOptions(productPropertyTypeList),
                            new InputViewModel("propertyValue", displayName: "属性值"),
                            new InputViewModel("displayValue", displayName: "显示值").SetNotRequired(),
                            new InputViewModel("hsCode", displayName: "海关编码").SetNotRequired(),
                            new InputViewModel("contentInfo",InputTypes.Textarea, "内容描述").SetNotRequired(),

                        };
                        //var specials = new List<SpecialInputModel>();
                    }
                    @Html.Partial("Modals/_ModalBody", new ModalBodyViewModel(inputs))
                    @Html.Partial("Modals/_ModalFooter", "0")

                </div>
            </div>
        </div>
        @{
            var uploadModal = new ModalViewModel("产品属性导入", "", new ShwasherSys.Views.Shared.New.Modals.ModalBodyViewModel(
                new List<Input>(){
              new InputFile("uploadExcel","上传文件").SetFileOption("FileInfo","FileName","FileExt")
                }, "upload-form"), "upload-modal");
        }
        @Html.Partial("New/Modals/_Modal",uploadModal)
        <div class="modal fade" id="modal_extend" role="dialog" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered" role="document">
                <div class="modal-content">
                    @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("产品标准扩展"))
                    @{
                        var inputs2 = new List<InputViewModel>
                        {
                            new InputViewModel("id", hide: true),
                            new InputViewModel("propertyNo", hide: true),
                            new InputViewModel("propertyType",InputTypes.List, displayName: "属性类别").SetSelectOptions(productPropertyTypeList),
                            new InputViewModel("propertyValue",displayName: "属性值").SetNotRequired(),
                            new InputViewModel("displayValue", displayName: "显示值").SetNotRequired(),
                            new InputViewModel("hsCode", displayName: "海关编码")
                        };
                    }
                    @Html.Partial("Modals/_ModalBody", new ModalBodyViewModel(inputs2))
                    @Html.Partial("Modals/_ModalFooter", "0")

                </div>
            </div>
        </div>
    </section>

}

@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", disabled:"propertyType" }); };

            funs["btnImport"] = function (url) {
                OpenModal(url, {
                    modal: $("#upload-modal"), modaltitle: "产品属性导入", save: function () {
                        $.iwbAjax1({
                            url: url,
                            modal: "upload-modal",
                            form: "upload-form",
                            success: function () {
                                RefreshTable();
                            }
                        });
                    }
                });

            }

        });
        function f_modifyExtent(id, propertyNo, propertyType, propertyValue, hsCode, contentInfo, displayValue) {
			data = { id: id, propertyNo: propertyNo, propertyType: propertyType, propertyValue: propertyValue || '', hsCode: hsCode, contentInfo: contentInfo || '', displayValue: displayValue || '' }
			console.log(data)
			
			OpenModal(window.appUrl + "ProductProperty/UpdateExtend", {
				modal: $("#modal_extend"), modaltitle: "",
				disabled: 'propertyType,propertyValue,displayValue,contentInfo',
                data: data,
                save: function () {
					$.iwbAjax1({
						url: window.appUrl + "ProductProperty/UpdateExtend",
						modal: "modal_extend",
						success: function () {
							RefreshTable();
						}
					});
				}
			});
        }
        function PropertyTypeFormatter(v) {
            var name = $('#hid-propertyType option[value="' + v + '"]').text();
            if (v) {
                return '<span class="label label-info">' + name + '</span>';
            } else {
                return '<span class="label label-warning">暂无</span>';

            }
        }
        function HsCodeFormatter(v, r) {
			let val = v ? `<i class="iconfont icon-edit"></i>${v}` :'<i class="iconfont icon-add"></i>'
			var str = `<span class="table-action label " onclick="f_modifyExtent(${r.id},'${r.propertyNo}','${r.propertyType}','${r.propertyValue}','${v || ''}','${r.contentInfo || ''}','${r.displayValue || ''}')">${val}</span>`;
			return str;
		}
    </script>


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