@model AMESCoreStudio.WebApi.Models.AMES.LabelTemplateMaster

@{
    ViewData["Title"] = "Label料號參數新增";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}
<style>
    /*    .control-label {
                                                            justify-content: flex-end !important;
                                                        }
                                                    */



    .layui-table-cell {
        height: auto;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal
    }
</style>
<form enctype="multipart/form-data" method="post" id="modelform">
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-form">
                <div class="layui-form-item ">
                    <div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> @ViewBag.Title</div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <input type="hidden" asp-for="TEMPLATE_ID" value="@ViewBag.MasterID" />
                    <input type="hidden" asp-for="CREATE_USERID" value="@ViewBag.UserID" />
                    <input type="hidden" asp-for="UPDATE_USERID" value="@ViewBag.UserID" />
                    <input type="hidden" asp-for="CREATE_DATE" value="@System.DateTime.Now" />
                    <input type="hidden" asp-for="UPDATE_DATE" value="@System.DateTime.Now" />

                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label asp-for="LABEL_MATNR" class="layui-form-label"></label>
                            <input asp-for="LABEL_MATNR" type="text" style="width: 250px;" class="layui-input" onkeydown="input(event);" />
                            <span asp-validation-for="LABEL_MATNR" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>

                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label asp-for="LABEL_FILE" class="layui-form-label"></label>
                            <input asp-for="LABEL_FILE" type="text" style="width: 250px;" class="layui-input" readonly/>
                            <span asp-validation-for="LABEL_FILE" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label class="layui-form-label"></label>
                            <input type="file" id="fileInput" onchange="validateFileExtensionbtw()">
                            <div id="errorContainer1" style="color: red;"></div>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label asp-for="REMARK" class="layui-form-label"></label>
                            <input asp-for="REMARK" type="text" style="width: 250px;" class="layui-input" />
                            <span asp-validation-for="REMARK" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label asp-for="IMAGE_NAME" class="layui-form-label"></label>
                            <input asp-for="IMAGE_NAME" type="text" style="width: 250px;" class="layui-input" readonly/>
                            <span asp-validation-for="IMAGE_NAME" class="text-danger offset-sm-3 my-sm-1"></span>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-inline">
                            <label class="layui-form-label"></label>
                            <input type="file" id="fileInputimage" name="formFile" onchange="validateFileExtensionPIC()">
                            <div id="errorContainer" style="color: red;"></div>
                        </div>

                    </div>
                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline" style="width:auto">
                        <input type="radio" asp-for="STATUS_NO" value="Y" title="上架中">
                        <input type="radio" asp-for="STATUS_NO" value="N" title="未上架" checked>
                    </div>
                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div id="errorMSG" style="color: red;"></div>
                            </div>

                        </div>
                    </div>
                   

                    <div class="layui-inline" style="margin-right: 5px; margin-left: 5px;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <span style="color: firebrick;word-break: break-all;" class="text-danger offset-sm-3">@Html.ValidationMessage("error")</span>
                                <button type="button" id="querysubmit1" class="layui-btn tt">儲存</button>
                            </div>

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

    </div>
</form>
<form id="modeltable" method="post">
    <table class="layui-hide" id="test" lay-filter="test" lay-data="{id:'test'}"></table>
</form>

@*備註*@
<script type="text/html" id="inputTest">
    <input type="text" name="inputTest" lay-filter="inputTest" id="inputTest" data-value="{{d.labeL_FIELD_ID}}" class="layui-input" style="margin-top: -10px; margin-left: -10px; margin-right: -10px; border: none;">
</script>
@section Scripts{
    <script type="text/javascript">

        $('#querysubmit1').click(function () {
            CheckMatnr($("#LABEL_MATNR").val());
        });

       
        function input(e) {
            if (e.keyCode == 13) {
                var data = $("#LABEL_MATNR").val();
                if (data) {

                    CheckMatnr(data);
                    event.preventDefault();
                    return false;
                }

            }
        };

        function CheckMatnr(Matnr) {
            var data = $("#LABEL_MATNR").val();
            if (data) {
                $.ajax({
                    url: '/LAB/CheckLabelMatnr?LabelMatnr=' + Matnr,
                    dataType: 'json',
                    contentType: "application/json",
                    type: 'get',
                    success: function (result) {
                        if (!result.data) {
                            // alert("查無此Label料號:" + Matnr);
                            alert(Matnr +" error : "+ result.msg);
                        }
                        else {
                            insertMaster2("T");
                        }


                    }
                });
            }
            else {

                alert("請輸入Label料號!" );
            }
        };

        function insertMaster2(status) {
            
            var labelFile = $("#LABEL_FILE").val();
            if (labelFile) {
                var formData = new FormData($("#modelform")[0]);

                $.ajax({
                    url: "/LAB/LAB002CSave",
                    type: "POST",
                    data: formData,
                    processData: false,  // 不要处理数据
                    contentType: false,  // 不设置内容类型
                    success: function (response) {
                        // 处理成功响应
                        insertList(response.msg);
                    },
                    error: function (response) {
                        // 处理错误
                        var errorMSG = document.getElementById('errorMSG');
                        errorMSG.innerHTML = response.msg;
                    }
                });

            }
            else {

                alert("請選擇標籤檔案!");
            }

        }

        function insertMaster3(status) {

            var labelFile = $("#LABEL_FILE").val();
            if (labelFile) {
                var data = $("#LABEL_MATNR").val();
                var remark = $("#REMARK").val();
                var imageName = $("#IMAGE_NAME").val();
                var statusNo = $("input[name='STATUS_NO']:checked").val();
                var templateID = $("#TEMPLATE_ID").val();
                var CreateUserID = $("#CREATE_USERID").val();
                var UpdateUserID = $("#UPDATE_USERID").val();
                var CreateDate = $("#CREATE_DATE").val();
                var UpdateDate = $("#UPDATE_DATE").val();
                var imageFile = $("#fileInputimage").prop('files')[0]; // 获取文件对象
                $.post("/LAB/LAB002CSave",
                    {
                        TEMPLATE_ID: templateID,
                        LABEL_MATNR: data,
                        LABEL_FILE: labelFile,
                        STATUS_NO: statusNo,
                        IMAGE_NAME: imageName,
                        REMARK: remark,
                        CREATE_USERID: CreateUserID,
                        UPDATE_USERID: UpdateUserID,
                        CREATE_DATE: CreateDate,
                        UPDATE_DATE: UpdateDate,
                        formFile: imageFile
                    },
                    function (data) {
                        if (data.success) {
                            console.log("master:data.success");
                            insertList(data.msg);
                        }
                        else {
                            var errorMSG = document.getElementById('errorMSG');
                            errorMSG.innerHTML = data.msg;

                        }
                    }).success(function () { //alert("second success");
                    })
                    .error(function () {
                        alert("error");
                    })
                    .complete(function () { //alert("complete");
                    });


            }
            else {

                alert("請選擇標籤檔案!");
            }

        }
        function insertList(id) {

            var tableDas = layui.table.cache["test"];
            var modeltable = $("#modeltable").serializeArray();

            if (modeltable.length > 0) {
                var Template;
                var LabelFileID;
                var CreateUserID = $("#CREATE_USERID").val();
                var UpdateUserID = $("#UPDATE_USERID").val();
                var CreateDate = $("#CREATE_DATE").val();
                var UpdateDate = $("#UPDATE_DATE").val();
                var Finish = 'N';
                for (var i = 0; i < modeltable.length - 1; i++) {

                    if (modeltable[i].value == 0) {
                        Finish = 'Y';
                        Template = id;
                        LabelFileID = modeltable[i - 1].value;
                        $.post("/LAB/LAB002CListSave",
                            {
                                TEMPLATE_ID: Template,
                                LABEL_FIELD_ID: LabelFileID,
                                CREATE_USERID: CreateUserID,
                                UPDATE_USERID: UpdateUserID,
                                CREATE_DATE: CreateDate,
                                UPDATE_DATE: UpdateDate
                            },
                            function (data) {
                                if (i = modeltable.length - 2) {
                                    parent.hg.msg("新增成功！");
                                    window.parent.location.reload();
                                    //parent.layer.table.render();
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                }
                            }
                        );

                    }
                }
                if (Finish == 'N') {
                    alert("至少需勾選一項欄位名稱!");

                }
            }
        }

        function updateFilePath() {

            var filePathInput = document.getElementById('fileInput');
            // 获取文件路径并显示在文本框中
            $("#LABEL_FILE").val(filePathInput.value);
         //   fileInput.value = '';
        }

        function updateFilePathimage() {

            var filePathInput = document.getElementById('fileInputimage');
            // 获取文件路径并显示在文本框中
            $("#IMAGE_NAME").val(filePathInput.value);
            //   fileInput.value = '';
        }

        function validateFileExtensionbtw() {
            var fileInput = document.getElementById('fileInput');
            var errorContainer = document.getElementById('errorContainer1');

            // 允许的文件后缀名
            var allowedExtensions = ['.btw'];

            // 获取文件名
            var fileName = fileInput.value.split('\\').pop();

            // 获取文件后缀名
            var fileExtension = '.' + fileName.split('.').pop();

            // 检查文件后缀名是否在允许的列表中
            if (!allowedExtensions.includes(fileExtension.toLowerCase())) {
                errorContainer.innerHTML = '只允許上傳 ' + allowedExtensions.join(', ') + ' 格式的文件。';
                // 清空文件选择框的值
                fileInput.value = '';
            } else {
                $("#LABEL_FILE").val(fileName);
                errorContainer.innerHTML = '';
            }
        }

        function validateFileExtensionPIC() {
            var fileInput = document.getElementById('fileInputimage');
            var errorContainer = document.getElementById('errorContainer');

            // 允许的文件后缀名
            var allowedExtensions = ['.jpg', '.jpeg', '.png','.bmp'];

            // 获取文件名
            var fileName = fileInput.value.split('\\').pop();

            // 获取文件后缀名
            var fileExtension = '.' + fileName.split('.').pop();

            // 检查文件后缀名是否在允许的列表中
            if (!allowedExtensions.includes(fileExtension.toLowerCase())) {
                errorContainer.innerHTML = '只允許上傳 ' + allowedExtensions.join(', ') + ' 格式的文件。';
                // 清空文件选择框的值
                fileInput.value = '';
            } else {
                $("#IMAGE_NAME").val(fileName);
                errorContainer.innerHTML = '';
            }
        }

        layui.use(['form', 'layer', 'table', 'laytpl', 'laydate'], function () {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                laytpl = layui.laytpl,
                laydate = layui.laydate;

            itemslist();
            function itemslist() {
                var formID = $("#TEMPLATE_ID").val();
                table.render({
                    elem: '#test',
                    url: '/LAB/GetLabelTemplatebyMatnr?id=' + formID,
                    id: 'test',
                    //  toolbar: '#toolBar',
                    height: 720,
                    //defaultToolbar: ['filter', 'print', 'exports'],
                    //title: 'test',
                    //where: where,
                    page: false,
                    cols: [[
                        { field: 'labeL_FIELD_ID', title: '#', width: 200, align: "left", templet: '#inputTest' },
                        {
                            field: 'labeL_FIELD_NAME',
                            sort: true,
                            title: '欄位名稱',
                            width: 200,
                        },
                        {
                            field: 'data',
                            width: 200,
                            title: '勾選',
                            templet: function (d) {
                                // 使用 Layui 的模板引擎生成 checkbox
                                return '<input type="checkbox" name="templateCheckbox" lay-skin="primary" lay-filter="templateCheckbox" value="' + d.data + '" title="" ' + (d.data === '1' ? 'checked' : '') + '>';
                            }
                        },
                       

                    ]],
                    done: function (res, curr, count) {
                        $(".layui-table-main  tr").each(function (index, val) {
                            $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                        });
                        layui.each($('input[name="inputTest"]'), function (index, item) {
                            var elem = $(item);
                            elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                        });
                        layui.each($('select'), function (index, item) {
                            var elem = $(item);
                            elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                        });
                        form.render();
                    }
                });
            }
            /*表格列表操作*/
            table.on('tool(test)', function (obj) {
                var data = obj.data, layEvent = obj.event;
                if (layEvent === 'inputTest') {
                    layui.$(this).on('input porpertychange', function (e) {
                        var val = layui.$(this).val();
                        var name = layui.$(this).attr('name');
                        data[name] = val
                        obj.update(data);//更新行对象数据
                        //console.log(data);
                    })
                }
                else if (layEvent === 'edit') {
                    var id = $("#InspectionID").val();
                    if (obj.data.inspectionItemID) {
                        layer.open({
                            type: 2 //此處以iframe舉例
                            , title: '上傳文件'
                            , area: ['480px', '400px']
                            , shade: 0
                            , maxmin: true
                            , offset: 'auto'//顯示座標-auto居中
                            , content: "/SPC/SPC005R?id=" + id + "&itemID=" + obj.data.inspectionItemID
                            //, btn: ['關閉']
                            , yes: function () {
                                //layer.close();
                                if (layer.confirm('確定要關閉麼')) {
                                    layer.close(index);
                                }
                                // $(that).click();
                            }
                            , zIndex: 19891014 //layer.zIndex //重點1
                            , success: function (layero) {
                                layer.setTop(layero); //重點2
                            }
                        });

                    }
                }
            });

          
            // 监听选择文件按钮的点击事件
            document.getElementById('selectFileBtn').addEventListener('click', function () {
                // 模拟点击 input[type=file] 元素
                document.getElementById('fileInput').click();
            });
           
        });

    </script>
}