<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addElement</title>
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<div style="margin: 50px 0px 0px 50px">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item layui-hide">
            <label class="layui-form-label" style="width: 16%">元素所属页面</label>
            <div class="layui-input-inline" style="width: 76%">
                <input id="pageID" type="text" name="pageID" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 16%">元素名</label>
            <div class="layui-input-inline" style="width: 76%">
                <input type="text" name="elementName" required lay-verify="required|elementName" placeholder="请输入元素名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 20%">Android端定位</label>
            <div class="layui-input-inline" style="width: 18%">
                <select name="androidType">
                    <option value=""></option>
                    <option value="id">id</option>
                    <option value="xpath">xpath</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 53%">
                <input type="text" name="elementAndroidLocate" placeholder="请输入定位值" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 20%">IOS端定位</label>
            <div class="layui-input-inline" style="width: 18%">
                <select name="IOSType">
                    <option value=""></option>
                    <option value="predicate">predicate</option>
                    <option value="xpath">xpath</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 53%">
                <input type="text" name="elementIOSLocate" placeholder="请输入定位值" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 16%">元素备注</label>
            <div class="layui-input-inline" style="width: 76%">
                <input type="text" name="elementRemark" required lay-verify="required" placeholder="请输入元素备注" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <label class="layui-form-label" style="width: 16%">元素类型</label>
            <div class="layui-input-inline" style="width: 76%">
                <input type="text" name="elementType" autocomplete="off" class="layui-input" value="1">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="preAddElement">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>

    layui.use(['form', 'layer'], function () {
        const form = layui.form
            , $ = layui.$;

        //提交
        form.on('submit(preAddElement)', function (data) {
            data.field.elementAndroidLocate = "'" + data.field.androidType + "': '" + data.field.elementAndroidLocate + "'";
            data.field.elementIOSLocate = "'" + data.field.IOSType + "': '" + data.field.elementIOSLocate + "'";
            $.ajax({
                type: 'post',
                url: '/element/add',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.msg(res.msg, {shade: 0.3, time: 2000});
                    parent.layui.table.reload('myTable', {
                        where: {
                            pageID: data.field.pageID
                        }
                    });
                    parent.layer.close(index); //再执行关闭
                },
                error: function (errMsg) {
                    console.log(errMsg);
                }
            })
            return false;
        });

        form.verify({
            elementName: function (value, item) { //value：表单的值、item：表单的DOM对象
                let code = 500;
                $.ajax({
                    async: false,
                    url: '/element/verifyName',
                    type: 'GET',
                    data: {elementName: value},
                    dataType: 'json',
                    timeout: 30000,
                    success: function (response) {
                        code = response.code;
                    }
                });
                if (code === 500) {
                    return '元素重名啦~';
                }
            }
        });
    });

    function child(obj) {
        document.getElementById("pageID").setAttribute("value", obj);
    }

</script>
</html>