<%@ 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">
    <style>
        html{
            background-color: #fff;
        }
        .hide{
            display: none;
        }
        td .layui-form-select{
            width: 150px;
            margin-right: 15px;
            float: left;
        }
        .load-icon{background: url('${ctxPlugin}/static/img/shili_img.png') center center no-repeat; width: 12px; height: 12px; display: inline-block; border-radius: 50%;
            vertical-align: text-bottom;transform: translate(0px, -1px);margin-right: 2px;}
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-card">
        <div class="layui-card-body pt-20 pb-40 h-160">
            <div class="layui-col-xs12 mb-10 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="name" lay-verify="name" autocomplete="off" placeholder="请输入保险名称" class="layui-input" value="">
                    </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" >
                        <select name="type" lay-verify="type" lay-search>
                            <option value="">请选择</option>
                            <option value="0">财产险</option>
                            <option value="1">商业险</option>
                            <option value="2">交强险</option>
                            <option value="3">其他</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 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 ">
                        <select name="companyId" id="companyId" lay-verify="companyId" lay-filter="companyId" lay-search>
                            <option value="0">深圳市慧择保险经纪有限公司</option>
                            <option value="1">其他</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline layui-col-xs6">
                    <div class="layui-input-block" style="margin-left: 10px;">
                        <input type="text" id="companyName" name="companyName" lay-verify="companyName" autocomplete="off" placeholder="请输入保险公司名称" class="layui-input hide" value="">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 mb-10 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 ">
                        <select name="policyholder" id="policyholder" lay-verify="policyholder" lay-filter="policyholder" lay-search>
                            <option value="">请选择</option>
                            <c:forEach items="${companys}" var="data">
                                <option value="${data.columns.id}">${data.columns.name}</option>
                            </c:forEach>
                        </select>
                    </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" >
                        <select name="insurant" id="insurant" lay-verify="insurant" lay-filter="insurant" lay-search>
                            <option value="">请选择</option>
                            <c:forEach items="${paterns}" var="data">
                                <option value="${data.columns.id}">${data.columns.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer" style="z-index: 100;" >
        <button type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn">确认</button>
        <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();" >取消</button>
    </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 type="text/javascript">
    //初始数据
    var $form;
    var form;
    var $;
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');

        form.verify({
            name:function(value,item){
                if(!$.trim(value)){
                    return "保险公司不能为空,请输入保险公司！";
                }
            },
            type:function(value,item){
                if(!$.trim(value)){
                    return "保险类型不能为空,请选择保险类型！";
                }
            },
            companyId:function(value,item){
                if(!$.trim(value)){
                    return "投保公司不能为空,请选择投保公司！";
                }
            },
            companyName:function(value,item){
                let companyId = $("#companyId").val();
                if (!$.trim(value) && companyId == 1) {
                    return "联系人不能为空,请输入保险公司名称！";
                }
            },
            policyholder:function(value,item){
                if(!$.trim(value)){
                    return "投保人不能为空,请输入投保人！";
                }
            },
            insurant:function(value,item){
                if(!$.trim(value)){
                    return "被保人不能为空,请输入被保人！";
                }
            }
        });

        form.on('submit(confirm)', function (data) {
            var field = data.field;
            if (field.companyId == "0") {
                field.companyName = "深圳市慧择保险经纪有限公司";
            }
            $.ajax({
                url: '${ctx}/insurance/addInsurance',
                method: 'post',
                data: JSON.stringify(field) ,
                dataType: 'JSON',
                contentType:"application/json",
                success: function (res) {
                    if (res.code == "200") {
                        parent.layer.msg("保存成功", {time: 2000});
                        closeDiv();
                        parent.table.reload('test');
                    } else {
                        layer.msg(res.errMsg, {time: 1000});
                    }
                },
                error: function (data) {
                }
            });
        });

        form.on('select(companyId)', function (data) {
            var companyId = $(data.elem).val();
            if (companyId == '0') {
                $("#companyName").addClass("hide");
            } else {
                $("#companyName").val("");
                $("#companyName").removeClass("hide");
            }
        });
    })


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

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

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