<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/formSelects-v4.css" media="all">
    <style>
        html {
            background-color: #FFFFFF;
        }
        .layui-form-select dl{
            max-height:200px;
            width: 80%;
        }
        .w-130{width: 130px}
        .ml120 .layui-input-block{margin-left: 130px}
        .ml-130{margin-left:  130px}
        .border-grey{border: 1px solid #DDD; border-radius: 10px;}
        .table-input{width: 90%; border: none; text-align: center; height: 30px; line-height: 30px}
        .layui-elem-field legend{font-size: 16px}
        .img-80{display: flex; justify-content: center;}
        .img-80 .bj-img{margin-right: 0}
        .layui-table th {
            text-align: center;
        }
        .xm-select-parent .xm-form-select dl{max-height: 150px}
    </style>
</head>
<body>
<div class="aaa" id="LAY_app">
    <div class="layui-form layui-card">
        <div class="layui-card-body over pt-20 pb-40 h-350" action="" id="detailSet">
            <div class="layui-row ml120 mt-20">
                <div class="layui-col-xs12">
                    <div class="layui-col-xs12 mb-15 pr-30">
                        <label class="layui-form-label w-130">一级代理商：</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" class="layui-input layui-bg-gray" value="${firstTraderName}" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-15 pr-30">
                        <label class="layui-form-label w-130"><i class="red">*</i>代理商名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="traderName" lay-verify="traderName"  placeholder="请输入代理商名称" class="layui-input" value="${trader.name}">
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-15 pr-30">
                        <label class="layui-form-label w-130"><i class="red">*</i>状态：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" title="启用" class="layui-input" value="0" <c:if test="${empty trader or trader.status eq '0'}">checked</c:if>>
                            <input type="radio" name="status" title="禁用" class="layui-input" value="1" <c:if test="${trader.status eq '1'}">checked</c:if>>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-15 pr-30">
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>登录账号：</label>
                            <div class="layui-input-block ">
                                <input type="text"  name="loginName"  autocomplete="new-password" autocomplete="off"
                                       lay-verify="loginName"  placeholder="请输入登录账号" class="layui-input" value="${user.loginName}">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-xs6">
                            <label class="layui-form-label w-130"><i class="red">*</i>登录密码：</label>
                            <div class="layui-input-block w-200" >
                                <input type="password" id="password"  name="password"  lay-verify="password" autocomplete="new-password" placeholder="请输入登录密码"
                                       class="layui-input" <c:if test="${not empty trader}">value="defaultHtyPsd"</c:if>>
                                <c:if test="${empty user}">
                                <span class="pos-a h-32 lh-32 layui-span-unit" onclick="showPassword()">
                                    <img src="${ctxPlugin}/static/img/eye_open.png" alt="" id="eyeImg">
                                </span>
                                </c:if>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-15 pr-30">
                        <label class="layui-form-label w-130"><i class="mark">*</i>授权仓库：</label>
                        <div class="layui-input-block ">
                            <select id="warehouseId" name="warehouseId"  xm-select="warehouseId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6" xm-select-search>
                                <option value=""></option>
                                <c:forEach items="${warehouses}" var="ins">
                                    <option value="${ins.columns.id}" >${ins.columns.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-xs12 mb-15 pr-30" style="padding-bottom: 100px">
                    </div>
                </div>
            </div>
            <input type="hidden" name="id" id="id" value="${trader.id}">
        </div>
        <div class="layui-form-item operate-footer" style="text-align: center;">
            <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="提交">
            <input type="button"   value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();" >
        </div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/data.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/lib/formSelects-v4.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var formSelects;
    var warehouseIds = '${warehouseIds}';
    var pass = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/;
    layui.use(['form', 'table', 'upload', 'jquery', 'formSelects'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');
        var table = layui.table;
        formSelects = layui.formSelects;

        table.init('parse-table-demo',{
            height: 75
        })
        if(!isBlank(warehouseIds)){
            formSelects.value('warehouseId', warehouseIds.split(","), true);
        }
        form.verify({
            traderName:function(value,item){
                if(!$.trim(value)){
                    return "代理商名称不能为空,请输入代理商名称！";
                }
            },
            loginName:function(value,item){
                if(!$.trim(value)){
                    return "登录账号不能为空,请输入登录账号！";
                }
                if($.trim(value).length<4){
                    return "登录账号不得小于4位,请重新输入！";
                }
                if($.trim(value).length>12){
                    return "登录账号不得大于12位,请重新输入！";
                }
            },
            password:function(value,item){
                if(!$.trim(value)){
                    return "登录密码不能为空,请输入密码后保存！";
                }
                if(!value=='defaultHtyPsd' && !pass.test($.trim(value))){
                    return "请输入密码格式为数字加字母！";
                }
            },
        });

        form.on('submit(confirm)', function (data) {
            let warehouseIds = formSelects.value('warehouseId', 'valStr');
            if (isBlank(warehouseIds)) {
                layer.msg("请选择仓库！", {icon: 5, anim: 6});
                return;
            }
            data.field.status = $("input[name=status]:checked").val();
            data.field.warehouseIds = warehouseIds;
            console.log(data.field)
            $.ajax({
                url: '${ctx}/trader/second/save',
                method: 'post',
                contentType: "application/json;charsetset=UTF-8",
                data: JSON.stringify(data.field),
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == "200") {
                        parent.layer.msg("保存成功", {time: 1000});
                        closeDiv();
                        parent.table.reload('test');
                    } else {
                        layer.msg(res.errMsg, {time: 1500});
                    }
                },
                error: function (data) {
                }
            })
        });
    })

    function  closeDiv() {
        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

    function showPassword() {
        let type = $("#password").attr("type");
        if ('password' == type) {
            $("#password").attr("type", "text")
            $("#eyeImg").attr("src", "${ctxPlugin}/static/img/eye_close.png");
        } else {
            $("#password").attr("type", "password")
            $("#eyeImg").attr("src", "${ctxPlugin}/static/img/eye_open.png");
        }
    }

</script>
</body>
</html>
