<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <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">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
              <a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
              <a href="javascript:void(0);"><cite>新增内容</cite></a>
            </span>
        </div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form layui-form-pane" lay-filter="dataForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属机构</label>
                    <div class="layui-input-block layui-form" id="institutionIdSelectTemplateBox" lay-filter="institutionIdSelectTemplateBox"></div>
                    <script id="institutionIdSelectTemplate" type="text/html">
                        <select id="institutionId" name="institutionId" lay-verify="required" lay-search>
                            <option value="">请选择所属机构</option>
                            {{# for(var i = 0, item; item = d[i++];) { }}
                            <option value="{{item.institutionId}}">{{item.institutionName}}</option>
                            {{# } }}
                        </select>
                    </script>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" id="teamUserName" name="teamUserName" class="layui-input" value="" placeholder="请输入姓名"  maxlength="50" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block layui-form" id="teamUserSexIdSelectTemplateBox" lay-filter="teamUserSexIdSelectTemplateBox"></div>
                        <script id="teamUserSexIdSelectTemplate" type="text/html">
                            <select id="teamUserSexId" name="teamUserSexId" lay-search>
                                <option value="">请选择性别</option>
                                {{# for(var i = 0, item; item = d[i++];) { }}
                                <option value="{{item.dataId}}">{{item.dataName}}</option>
                                {{# } }}
                            </select>
                        </script>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">民族</label>
                        <div class="layui-input-block layui-form" id="teamUserNationIdSelectTemplateBox" lay-filter="teamUserNationIdSelectTemplateBox"></div>
                        <script id="teamUserNationIdSelectTemplate" type="text/html">
                            <select id="teamUserNationId" name="teamUserNationId" lay-search>
                                <option value="">请选择民族</option>
                                {{# for(var i = 0, item; item = d[i++];) { }}
                                <option value="{{item.dataId}}">{{item.dataName}}</option>
                                {{# } }}
                            </select>
                        </script>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">政治面貌</label>
                        <div class="layui-input-block layui-form" id="teamUserPoliticalIdSelectTemplateBox" lay-filter="teamUserPoliticalIdSelectTemplateBox"></div>
                        <script id="teamUserPoliticalIdSelectTemplate" type="text/html">
                            <select id="teamUserPoliticalId" name="teamUserPoliticalId" lay-search>
                                <option value="">请选择政治面貌</option>
                                {{# for(var i = 0, item; item = d[i++];) { }}
                                <option value="{{item.dataId}}">{{item.dataName}}</option>
                                {{# } }}
                            </select>
                        </script>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">身份证</label>
                        <div class="layui-input-block">
                            <input type="text" id="teamUserCard" name="teamUserCard" class="layui-input" value="" placeholder="请输入身份证"  maxlength="18">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-block">
                            <input type="text" id="teamUserBirthday" name="teamUserBirthday" class="layui-input" value="" placeholder="请选择出生日期" readonly style="cursor: pointer;">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">级别</label>
                        <div class="layui-input-block layui-form" id="teamUserLevelIdSelectTemplateBox" lay-filter="teamUserLevelIdSelectTemplateBox"></div>
                        <script id="teamUserLevelIdSelectTemplate" type="text/html">
                            <select id="teamUserLevelId" name="teamUserLevelId" lay-search>
                                <option value="">请选择级别</option>
                                {{# for(var i = 0, item; item = d[i++];) { }}
                                <option value="{{item.dataId}}">{{item.dataName}}</option>
                                {{# } }}
                            </select>
                        </script>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">职务</label>
                        <div class="layui-input-block layui-form" id="teamUserPositionIdSelectTemplateBox" lay-filter="teamUserPositionIdSelectTemplateBox"></div>
                        <script id="teamUserPositionIdSelectTemplate" type="text/html">
                            <select id="teamUserPositionId" name="teamUserPositionId" lay-search>
                                <option value="">请选择职务</option>
                                {{# for(var i = 0, item; item = d[i++];) { }}
                                <option value="{{item.dataId}}">{{item.dataName}}</option>
                                {{# } }}
                            </select>
                        </script>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">学历</label>
                        <div class="layui-input-block layui-form" id="teamUserEbIdSelectTemplateBox" lay-filter="teamUserEbIdSelectTemplateBox"></div>
                        <script id="teamUserEbIdSelectTemplate" type="text/html">
                            <select id="teamUserEbId" name="teamUserEbId" lay-search>
                                <option value="">请选择学历</option>
                                {{# for(var i = 0, item; item = d[i++];) { }}
                                <option value="{{item.dataId}}">{{item.dataName}}</option>
                                {{# } }}
                            </select>
                        </script>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">专业特长</label>
                        <div class="layui-input-block layui-form" id="teamUserSpecialtyIdDiv">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">手机号码</label>
                        <div class="layui-input-block">
                            <input type="text" id="teamUserPhone1" name="teamUserPhone1" class="layui-input" value="" placeholder="请输入手机电话"  maxlength="18">
                        </div>
                    </div>
                    <div class="layui-col-lg6">
                        <label class="layui-form-label">固定电话</label>
                        <div class="layui-input-block">
                            <input type="text" id="teamUserPhone2" name="teamUserPhone2" class="layui-input" value="" placeholder="请输入固定电话"  maxlength="18">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交新增</button>
                            <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="assets/js/vendor/wangEditor/wangEditor.min.js"></script>
<script src="assets/js/vendor/ckplayer/ckplayer/ckplayer.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script src="assets/js/xm-select.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'laytpl'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var wangEditor = window.wangEditor;
        var wangEditorObj = {};
        var viewerObj = {};
        var selectXm;

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        function refreshDownloadTemplet(fileName, file) {
            var dataRander = {};
            dataRander[fileName] = file;

            laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
                document.getElementById(fileName +'FileBox').innerHTML = html;
            });
        }

        // 初始化文件列表
        function initFileList(fileName, ids, callback) {
            var dataForm = {};
            dataForm[fileName] = ids;
            form.val('dataForm', dataForm);

            if(!ids) {
                refreshDownloadTemplet(fileName, []);
                if(callback) {
                    callback(fileName, []);
                }
                return;
            }

            top.restAjax.get(top.restAjax.path('api/file/list', []), {
                ids: ids
            }, null, function(code, data) {
                refreshDownloadTemplet(fileName, data);
                if(callback) {
                    callback(fileName, data);
                }
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }
        // 初始化视频
        function initVideo(fileName, data) {
            for(var i = 0, item; item = data[i++];) {
                var player = new ckplayer({
                    container: '#'+ fileName + i,
                    variable: 'player',
                    flashplayer: false,
                    video: {
                        file: 'route/file/download/true/'+ item.fileId,
                        type: 'video/mp4'
                    }
                });
            }
        }

        // 初始化出生日期日期
        function initTeamUserBirthdayDate() {
            laydate.render({
                elem: '#teamUserBirthday',
                format: 'yyyyMMdd',
                type: 'date',
                value: '',
                trigger: 'click'
            });
        }

        //所属机构下拉选择
        function initInstitutionIdSelect(){
            top.restAjax.get(top.restAjax.path('api/institution/list', []), {}, null, function(code, data, args) {
                laytpl(document.getElementById('institutionIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('institutionIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'institutionIdSelectTemplateBox');
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化性别ID下拉选择
        function initTeamUserSexIdSelect() {
            top.restAjax.get(top.restAjax.path('api/mongo/data/list-all/parent-id/{dataParentId}', ['4ef46940-76ab-4758-b5f0-0cbc93ffc660']), {}, null, function(code, data, args) {
                laytpl(document.getElementById('teamUserSexIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('teamUserSexIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'teamUserSexIdSelectTemplateBox');
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化民族ID下拉选择
        function initTeamUserNationIdSelect() {
            top.restAjax.get(top.restAjax.path('api/mongo/data/list-all/parent-id/{dataParentId}', ['a981579c-572b-4fd1-8e76-5d17df97f6a4']), {}, null, function(code, data, args) {
                laytpl(document.getElementById('teamUserNationIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('teamUserNationIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'teamUserNationIdSelectTemplateBox');
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化政治面貌ID下拉选择
        function initTeamUserPoliticalIdSelect() {
            top.restAjax.get(top.restAjax.path('api/mongo/data/list-all/parent-id/{dataParentId}', ['b2c96de0-3df8-41db-99b1-bc4e24ac6c24']), {}, null, function(code, data, args) {
                laytpl(document.getElementById('teamUserPoliticalIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('teamUserPoliticalIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'teamUserPoliticalIdSelectTemplateBox');
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化级别ID下拉选择
        function initTeamUserLevelIdSelect() {
            top.restAjax.get(top.restAjax.path('api/mongo/data/list-all/parent-id/{dataParentId}', ['26e6748f-93c5-4b7b-8521-357c9df9a8d4']), {}, null, function(code, data, args) {
                laytpl(document.getElementById('teamUserLevelIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('teamUserLevelIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'teamUserLevelIdSelectTemplateBox');
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化职务ID下拉选择
        function initTeamUserPositionIdSelect() {
            top.restAjax.get(top.restAjax.path('api/mongo/data/list-all/parent-id/{dataParentId}', ['7958b7ac-9395-4364-8be6-c2c510f80f80']), {}, null, function(code, data, args) {
                laytpl(document.getElementById('teamUserPositionIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('teamUserPositionIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'teamUserPositionIdSelectTemplateBox');
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化学历ID下拉选择
        function initTeamUserEbIdSelect() {
            top.restAjax.get(top.restAjax.path('api/mongo/data/list-all/parent-id/{dataParentId}', ['d6b9f026-6ea9-456a-b48b-0c18d502523b']), {}, null, function(code, data, args) {
                laytpl(document.getElementById('teamUserEbIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('teamUserEbIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'teamUserEbIdSelectTemplateBox');
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化专业特长ID下拉选择
        function initTeamUserSpecialtyIdSelect() {
            top.restAjax.get(top.restAjax.path('api/mongo/data/list-all/parent-id/{dataParentId}', ['65169ee8-ddba-4a83-ac5f-f3b48559d9e5']), {}, null, function(code, data, args) {
                var selectData = [];
                data.forEach(function (e) {
                    var arr = {};
                    arr.name = e.dataName;
                    arr.value = e.dataId;
                    selectData.push(arr)
                });
                initSelect(selectData);
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        function initSelect(data){
            var options = {
                el: '#teamUserSpecialtyIdDiv',
                name: 'teamUserSpecialtyId',//表单的name属性
                //layVerify: 'required',//必填项
                //layVerType: 'tips',//提示类型 同layui
                tips: '请选择专业特长',
                toolbar: {//工具条,全选,清空,反选,自定义
                    show: true,
                    list: [
                        'ALL',
                        'CLEAR',
                        'REVERSE',
                        /*{
                            name: '自定义',
                            icon: 'el-icon-star-off',
                            method(data){
                                alert('我是自定义的');
                            }
                        }*/
                    ]
                },
                data: data,
                //initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
                //language: 'zn',//语言包
                //filterable: true,//搜索功能
                //autoRow: true,//选项过多,自动换行
                // repeat: true,//是否支持重复选择
                //max: 2,//最多选择2个
                // template({ item, sels, name, value }){
                //    //template:自定义下拉框的模板
                //     return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
                // },
            };
            selectXm = xmSelect.render(options)
            // setTimeout(function(){
            //     //假设data是ajax 异步获取的
            //     var data =[
            //         //selected属性可以初始化下拉框
            //         //{name: '水果', value:'shuiguo',selected:true, disabled: true},
            //         {name: '水果', value:'shuiguo',disabled: true},
            //         {name: '蔬菜', value: 'shucai'},
            //         {name: '桌子', value: 'zhuozi'},
            //         {name: '北京', value: 'beijing'},
            //     ];
            //     //模拟通过ajax 获取json数据,异步更新多选下拉框的值
            //     demo1.update({data: data})
            // },100);
        }

        // 初始化内容
        function initData() {
            initInstitutionIdSelect();
            initTeamUserSexIdSelect();
            initTeamUserNationIdSelect();
            initTeamUserPoliticalIdSelect();
            initTeamUserBirthdayDate();
            initTeamUserLevelIdSelect();
            initTeamUserPositionIdSelect();
            initTeamUserEbIdSelect();
            initTeamUserSpecialtyIdSelect();
        }
        initData();

        // 提交表单
        form.on('submit(submitForm)', function(formData) {
            setData(formData)
            top.dialog.confirm(top.dataMessage.commit, function(index) {
                top.dialog.close(index);
                var loadLayerIndex;
                top.restAjax.post(top.restAjax.path('api/teamuser/save', []), formData.field, null, function(code, data) {
                    var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
                        time: 0,
                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
                        shade: 0.3,
                        yes: function(index) {
                            top.dialog.close(index);
                            window.location.reload();
                        },
                        btn2: function() {
                            closeBox();
                        }
                    });
                }, function(code, data) {
                    top.dialog.msg(data.msg);
                }, function() {
                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
                }, function() {
                    top.dialog.close(loadLayerIndex);
                });
            });
            return false;
        });

        function setData(formData){
            var teamUserSpecialtyId = '';
            var teamUserSpecialtyText = '';

            var item = selectXm.getValue();
            if(item != null && item.length > 0) {
                item.forEach(function (e) {
                    teamUserSpecialtyText += e.name + ',';
                    teamUserSpecialtyId += e.value + ',';
                })
                teamUserSpecialtyId = teamUserSpecialtyId.slice(0,teamUserSpecialtyId.length-1)
                teamUserSpecialtyText = teamUserSpecialtyText.slice(0,teamUserSpecialtyText.length-1)
            }
            formData.field.teamUserSpecialtyId = teamUserSpecialtyId;
            formData.field.teamUserSpecialtyText = teamUserSpecialtyText;

            if(formData.field.teamUserSexId != ''){
                formData.field.teamUserSexText = $('#teamUserSexId option:checked').text();
            }
            if(formData.field.teamUserNationId != ''){
                formData.field.teamUserNationText = $('#teamUserNationId option:checked').text();
            }
            if(formData.field.teamUserPoliticalId != ''){
                formData.field.teamUserPoliticalText = $('#teamUserPoliticalId option:checked').text();
            }
            if(formData.field.teamUserLevelId != ''){
                formData.field.teamUserLevelText = $('#teamUserLevelId option:checked').text();
            }
            if(formData.field.teamUserPositionId != ''){
                formData.field.teamUserPositionText = $('#teamUserPositionId option:checked').text();
            }
            if(formData.field.teamUserEbId != ''){
                formData.field.teamUserEbText = $('#teamUserEbId option:checked').text();
            }
        }

        $('.close').on('click', function() {
            closeBox();
        });

        // 校验
        form.verify({
        });
    });
</script>
</body>
</html>