@{
    ViewData["Title"] = "SOP文件查詢";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<style type="text/css">
    .layui-table-main .layui-table-cell {
        /*height: auto !important;*/
        white-space: normal;
    }

    .layui-table img {
        max-width: 60px;
        max-height: 28px;
    }

    .layui-tree-main {
        cursor: pointer;
        padding-right: 10px;
        float: left;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        margin: 10px 0;
    }
</style>


<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-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">料號:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="itemNO" name="itemNO" autocomplete="off" class="layui-input" placeholder="請輸入料號">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">生產單位:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <select id="unitNo" lay-filter="unitNo" name="unitNo" lay-submit asp-items="@ViewBag.FactoryUnitList">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm4">
                        <div class="layui-inline">
                            <label class="layui-form-label">SOP類型:</label>
                            <div class="layui-input-inline" style="width:100px">
                                <select id="sopType" name="sopType" asp-items="@ViewBag.GetSOPTypeSelect" class="">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="layui-row">
                <div class="layui-form-item">
                    <div class="layui-col-sm11">
                        <div class="layui-inline">
                            <label class="layui-form-label">建立日期:</label>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="dateStr" name="dateStr" autocomplete="off" class="layui-input" readonly="">
                            </div>
                            <div class="layui-form-mid">~</div>
                            <div class="layui-input-inline" style="width:150px">
                                <input id="dateEnd" name="dateEnd" autocomplete="off" class="layui-input" readonly="">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm1">
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="querysubmit">
                                <i class="layui-icon layui-icon-sm">&#xe615;</i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table class="layui-hide" id="query" lay-filter="query"></table>
    </div>
</div>

@section Scripts{
    <script type="text/html" id="switchState">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="state" value="{{d.materialSopID}}" lay-skin="switch" lay-text="啟用|停用" lay-filter="state" {{ d.state == "使用中" ? 'checked' : '' }}>
    </script>

    <script type="text/javascript">
        //var roleId = 0;
        //var roleName = "";
        layui.use(['form', 'layer', 'laydate'], function () {
            form = layui.form;
            laydate = layui.laydate;
            laydate.render({
                elem: '#dateStr'
                , trigger: 'click'
                , format: 'yyyy/MM/dd'
                , theme: 'grid'
            });

            laydate.render({
                elem: '#dateEnd'
                , trigger: 'click'
                , format: 'yyyy/MM/dd'
                , theme: 'grid'
            });

            form.on('select(unit)', function (data) {
                $("#unitNo").val(data.value);
                //roleName = data.elem[data.elem.selectedIndex].text;
                var qs = $('button[lay-filter="querysubmit"]');
                qs.click();

                //hg.msghide("刷新数据!");
                //table && table.reload();

            });

        });
        //alert(roleId.value);

        /*
        hg.form.on('select(role)', function (data) {
            alert(data.value);
        });
        */

        //监听表单提交事件
        hg.form.onsubmit('querysubmit', function (data) {
            hg.msghide("重新載入資料..");
            table && table.reload(data);
        });

        var tableCols = [[
            {
                field: 'itemNo',
                width: 150,
                title: '料號',
                sort: true
            },
            {
                field: 'unitName',
                title: '生產單位',
                width: 150,
                sort: true
            },
            {
                field: 'sopName',
                title: 'SOP文件敘述',
                sort: true
            },
            {
                field: 'sopPath',
                title: '檔案路徑',
                sort: true
            },
            {
                field: 'sopTypeName',
                title: 'SOP類型',
                width: 100,
                sort: true
            },
            {
                field: 'right',
                width: 140,
                title: '操作',
                align: 'center',
                fixed: 'right',
                templet: function (d) {
                    return '<a class="layui-btn layui-btn-xs layui-icon layui-icon-edit" lay-event="edit">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="del">删除</a>'
/*                        < button class="layui-btn layui-btn-normal layui-btn-xs layui-icon layui-icon-read" lay - event="show" > 預覽</button >*/
                }
            }]
        ];
        //通过行tool编辑,lay-event="show"
        function show(obj) {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        type: 2,
                        area: ['700px', '650px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: obj.data.filePath + obj.data.newName
                    });
                });
        };

        function edit(obj) {
            if (obj.data.materialSopID) {
                hg.open('修改SOP文件', '/PCS/PCS030U/' + obj.data.materialSopID, 480, 480);
            }
        }

        function del(obj) {
            if (obj.data.materialSopID) {
                hg.confirm("檔案名稱:【" + obj.data.sopName + "】,確定要刪除嗎?", function () {
                    $.ajax({
                        url: '/PCS/PCS030D',
                        data: { id: obj.data.materialSopID },
                        type: 'POST',
                        success: function (data) {
                            if (data.success) {
                                obj.del(); //只删本地数据
                                hg.msghide("删除成功!");
                            }
                            else {
                                hg.msg(data.msg);
                            }
                        },
                        error: function () {
                            hg.msg("網路請求失敗!");
                        }
                    });
                });
            }
        }

        var toolbar = [{
            text: '新增',
            layuiicon: '&#xe608;',
            class: 'layui-btn-normal',
            handler: function () {
                hg.open('新增SOP文件', '/PCS/PCS030C', 480, 480);

            }
        }
        ];

        //基本数据表格
        var table = hg.table.datatable('query', 'SOP文件查詢維護', '/PCS/PCS030Query', {}, tableCols, toolbar, true, 'full-100', ['filter', 'print', 'exports']);
                                                                                       // var table = hg.table.datatable('test', '條碼狀態維護', '/PCS/GetWipInfo', {}, tableCols, toolbar, true, 'full-100', ['filter', 'print', 'exports']);
    </script>
}