<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('参数列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <div class="box-shadow">
                <div class="ibox float-e-margins" style="margin-bottom: 10px;">
                    <div class="ibox-title">
                        <h5>系统参数</h5>
                    </div>
                    <form id="config-form">
                        <div class="ibox-content ibox-content-1" style="margin: 0;height: 45px">

                            <div class="col-sm-4 form-horizontal">
                                <label class="title">参数名称：</label><input type="text" id="configName" placeholder="请输入"/>
                            </div>
                            <div class="col-sm-4 form-horizontal">
                                <label class="title">参数键名：</label><input type="text" id="configKey" placeholder="请输入"/>
                            </div>
                            <div>
                                <label class="title">参数键值：</label><input type="text" id="configValue"
                                                                         placeholder="请输入"/>
                            </div>
                        </div>
                        <div class="ibox-content ibox-content-1" style="margin: 0;height: 48px">
                            <div class="col-sm-4 form-horizontal">
                                <label class="title">展示类型：</label>
                                <label>
                                    <input type="radio" value="0" name="dispMethod">数值</label>

                                <label>
                                    <input type="radio" value="1" name="dispMethod">滑块</label>

                                <label>
                                    <input type="radio" value="2" name="dispMethod">文本</label>
                            </div>

                            <div class="col-sm-4 form-horizontal">
                                <label class="title">描述：</label><input type="text" id="remark" placeholder="请输入"/>
                            </div>
                            <div>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="add()"><i
                                        class="fa fa-search title"></i>新增</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="configTable" class="table">
                <thead>
                <tr>
                    <th>名称</th>
                    <th>值</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="item:${paramList}">
                    <td style="display: none" th:text="${item.configId}"></td>
                    <td><span th:text="${item.configName}"></span></td>
                    <td>
                        <div th:if="${item.paramType} == '0'">
                            <input type="number" th:name="${item.configId}" th:value="${item.configValue}"
                                   onchange="change(this);"></input>
                        </div>
                        <div th:if="${item.paramType} == '1'">
                            <label class="toggle-switch switch-solid">
                                <input type="checkbox"  th:max="${item.orderCheckbox}"  th:name="${item.configId}"
                                       th:checked="${item.configValue == 'true' ? true : false}"
                                       onchange="change(this)">
                                <span></span>
                            </label>
                        </div>
                        <div th:if="${item.paramType} == '2'">
                            <input type="text" th:name="${item.configId}" th:value="${item.configValue}" onchange="change(this)">
                        </div>
                    </td>
                    <td><span th:text="${item.remark}"></span></td>
                </tr>
                </tbody>

            </table>
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <script th:inline="javascript">
        var prefix = ctx + "system/wmsConfig";

        function add() {
            var data = {
                "configName": $("#configName").val(),
                "configKey": $("#configKey").val(),
                "configValue": $("#configValue").val(),
                "paramType": $("input:radio:checked").val(),
                "remark": $("#remark").val()
            };
            $.operate.post(prefix + "/add", data, function callback(result) {
                console.log(result.code)
                window.location.reload()
            });
        }

        function change(item) {
            console.log(item.max)
            var value = ''
            if (item.max !== '' && item.max !== undefined) {
                if (item.checked === true) {
                    value = "true";
                }else{
                    value = "false";
                }
            }else {
                value = item.value
            }

            var data = {
                "configId": item.name,
                "configValue": value,
            };
            console.log(data)
            $.operate.post(prefix + "/edit", data, function callback(result) {
                window.location.reload()
            });
        }
    </script>
</body>
<style>
    input {
        border: 0;
        outline: 0;
        background-color: rgba(0, 0, 0, 0);
    }

    .title {
        font-size: 10px;
    }
</style>
</html>