<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增涉密人员培训')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
        <form class="form-horizontal m" id="form-train-add">
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">所属地市：</label>
                        <div class="col-sm-8">
                            <select id="City" name="AREAID" required @change="getAreaList()" v-model="City" class="form-control m-b">
                                <option value="">---请选择---</option>
                                <option v-for="option in CityList" :value="option.id" :key="option.id">
                                    {{ option.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">所属区县：</label>
                        <div class="col-sm-8">
                            <select id="Area" name="FRAMEWORK" required v-model="Area" class="form-control m-b">
                                <option value="">---请选择---</option>
                                <option v-for="option in AreaList" :value="option.id" :key="option.id">
                                    {{ option.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">人员姓名：</label>
                        <div class="col-sm-8">
                            <select id="User" name="USERNAME" required @change="getDept()" v-model="dept" class="form-control m-b">
                                <option value="">---请选择---</option>
                                <option v-for="option in userList" :value="option.userId" :key="option.userId">
                                    {{ option.userName }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required ">所属单位：</label>
                        <div class="col-sm-8">
                            <input placeholder="请输入单位名称" v-model="deptObj.deptName" required class="form-control m-b" type="text">
                            <input name="deptName" v-model="deptObj.deptId" type=hidden>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-4 control-label is-required">部门：</label>-->
<!--                        <div class="col-sm-8">-->
<!--                            <input name="PART" required placeholder="请输入部门" class="form-control" type="text">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">培训对象：</label>
                        <div class="col-sm-8">
                            <select name="trainSubject" required class="form-control m-b" th:with="type=${@dict.getType('sys_usertrain_obj')}">
                                <option value="">---请选择---</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">培训类型：</label>
                        <div class="col-sm-8">
                            <select name="trainType" required class="form-control m-b" th:with="type=${@dict.getType('sys_usertrain_typer')}">
                                <option value="">---请选择---</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">培训人员：</label>
                        <div class="col-sm-8">
                            <input name="trainName" required placeholder="请输入培训人员" class="form-control" type="text">
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label is-required">培训日期：</label>
                    <div class="col-sm-10">
                        <div class="input-daterange input-group ">
                            <input type="text" class="input-sm form-control" required name="trainDate" id="laydate-startTime" placeholder="开始日期"/>
                            <span class="input-group-addon">到</span>
                            <input type="text" class="input-sm form-control" required name="trainTimeend" id="laydate-endTime" placeholder="结束日期"/>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label is-required">培训地点：</label>
                        <div class="col-sm-10">
                            <textarea name="trainAddress" placeholder="请输入培训地点" required class="form-control m-t"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/train"
            $("#form-train-add").validate({
            focusCleanup: true
        });
        var app = new Vue({
            el: '#app',
            data: {
                CityList: [],
                AreaList:[],
                userList:[],
                City:'',
                Area:'',
                dept:'',
                params:{
                    parentId:'',
                },
                userPost:"system/user/list",
                deptObj:{}
            },
            mounted(){
                // 初始化地市列表
                this.getCityList();
                if (this.City){
                    this.getAreaList()
                }
                this.getUserList()
            },
            methods:{
                getDept(){
                    if (this.dept !== ''){
                        $.ajax({
                            url: ctx + this.userPost,
                            data:{userId:this.dept},
                            type: 'POST',
                            success:((res)=>{
                                this.deptObj = res.rows[0].dept
                            }) ,
                        });
                    }else{
                        this.deptObj ={}
                    }

                },
                getUserList(){
                    $.ajax({
                        url: ctx + this.userPost,
                        type: 'POST',
                        success:((res)=>{
                            this.userList = res.rows
                        }) ,
                    });
                },
                getCityList(){
                    $.ajax({
                        url: ctx + "system/area/getSysAreaList",
                        type: 'GET',
                        data:this.params ,
                        success:((res)=>{
                            this.CityList = res.data
                        }) ,
                    });
                },
                getAreaList(){
                    this.params.parentId = this.City
                    $.ajax({
                        url: ctx + "system/area/getSysAreaList",
                        type: 'GET',
                        data:this.params,
                        success:((res)=>{
                            this.AreaList = res.data
                        }) ,
                    });
                }
            }
        })
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            var startDate = laydate.render({
                elem: '#laydate-startTime',
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });
            var endDate = laydate.render({
                elem: '#laydate-endTime',
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // Start date cannot be after end date
                    if (value !== '') {
                        startDate.config.max = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date
                        };
                    } else {
                        startDate.config.max = {
                            year: '',
                            month: '',
                            date: ''
                        };
                    }
                }
            });
        });
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-train-add').serialize());
            }
        }

        // $("input[name='trainDate']").datetimepicker({
        //     format: "yyyy-mm-dd",
        //     minView: "month",
        //     autoclose: true
        // });

        $("input[name='createDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='updateDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        // $("input[name='trainTimeend']").datetimepicker({
        //     format: "yyyy-mm-dd",
        //     minView: "month",
        //     autoclose: true
        // });
    </script>
</body>
</html>
