<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改学校专业')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-major-edit" th:object="${tbSchoolMajor}">
            <input name="id" th:field="*{id}" type="hidden">
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label is-required">所属学校的id：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="schoolId" th:field="*{schoolId}" class="form-control" type="text" required>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">学校名称：</label>
                <div class="col-sm-8">
                    <input name="schoolCnName" th:field="*{schoolCnName}" class="form-control" type="text" disabled="true">
                </div>
            </div>
            <input id="majorTypeDesc" name="majorTypeDesc" th:field="*{majorTypeDesc}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">专业类型：</label>
                <div class="col-sm-8">
                    <select id="majorType" class="form-control select2-multiple">
                        <option>请选择专业类型</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">专业名称：</label>
                <div class="col-sm-8">
                    <input id="majorCnName" th:field="*{majorCnName}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">专业QS排名：</label>
                <div class="col-sm-8">
                    <input id="qs" th:field="*{qs}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">专业图标：</label>
                <input type="hidden" class="form-control" th:field="*{majorIcon}">
                <div class="col-sm-8">
                    <div class="file-loading">
                        <input id="singleFile" name="file" type="file">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">专业封面：</label>
                <input type="hidden" class="form-control" th:field="*{majorCover}">
                <div class="col-sm-8">
                    <div class="file-loading">
                        <input id="singleMajorCover" name="file" type="file">
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">学位中文名称：</label>
                <div class="col-sm-8">
                    <input name="degreeCnName" th:field="*{degreeCnName}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">学位英文名称：</label>
                <div class="col-sm-8">
                    <input name="degreeEnName" th:field="*{degreeEnName}" class="form-control" type="text" required>
                </div>
            </div>
            <input id="degreeTypeDesc" name="degreeTypeDesc" th:field="*{degreeTypeDesc}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">学位类型：</label>
                <div class="col-sm-8">
                    <select id="degreeType" class="form-control select2-multiple">
                        <option>请选择学位类型</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">学习时长：</label>
                <div class="col-sm-8">
                    <input name="learnTime" th:field="*{learnTime}" class="form-control" type="text" required>
                </div>
            </div>
            <input id="ielts" th:field="*{ielts}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">雅思分数：</label>
                <div class="col-sm-8">
<!--                    <input name="ielts" th:field="*{ielts}" class="form-control" type="text" required>-->
                    <select id="ieltsSel" class="form-control select2-multiple">
                        <option value="N/A">N/A</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">学费：</label>
                <div class="col-sm-8">
                    <input name="tuition" th:field="*{tuition}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">入学时间：</label>
                <div class="col-sm-8">
                    <input name="enrollmentTime" th:field="*{enrollmentTime}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">所需材料：</label>
                <div class="col-sm-9">
                    <label th:each="material:${@materialService.queryAll()}" class="check-box">
                        <input type ="checkbox" id="needMaterial" name="needMaterial"
                               th:value="${material.id}"
                               th:text ="${material.materialName}"
                               th:attr ='checked=${checkedList.contains(material.id) ? true : false}'>
                    </label>
                </div>
            </div>
            <input id="needWorksDesc" th:field="*{needWorksDesc}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label  is-required">是否需要作品集：</label>
                <div class="col-sm-8">
                    <select id="needWorks" class="form-control select2-multiple" required>
                    </select>
                </div>
            </div>
            <input id="needEducationDesc" th:field="*{needEducationDesc}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">是否需要前置学历：</label>
                <div class="col-sm-8">
<!--                    <input name="needEducation" th:field="*{needEducation}" class="form-control" type="text" required>-->
                    <select id="needEducation" class="form-control select2-multiple" required>
                    </select>
                </div>
            </div>
            <input id="needInterviewDesc" th:field="*{needInterviewDesc}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">是否需要面试：</label>
                <div class="col-sm-8">
<!--                    <input name="needInterview" th:field="*{needInterview}" class="form-control" type="text" required>-->
                    <select id="needInterview" class="form-control select2-multiple" required>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/major";
        $("#form-major-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-major-edit').serialize()+
                    "&degreeType="+$("#degreeType")[0].value+
                    "&majorType="+$("#majorType")[0].value+
                    "&needWorks="+$('#needWorks')[0].value+
                "&needEducation="+$('#needEducation')[0].value+
                "&needInterview="+$('#needInterview')[0].value);
            }
        }

        initUpload();
        initMajorCover();

        //初始化方法
        function initUpload() {
            var logoUrl = $("#majorIcon").val();//拿到图片路径
            var preList = new Array();
            var initialPreviewConfig = new Array();
            //设置初始化区域值
            if (logoUrl != null && logoUrl != ''){
                var a = {
                    // caption : '主图'+(i+1),
                    // width: '120px',
                    url: '/common/del',
                    // key: i,
                    extra: {url: logoUrl}
                }
                preList.push(logoUrl);
                initialPreviewConfig.push(a);
            }

            $("#singleFile").fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/common/upload", //上传的地址，改成自己的
                allowedFileExtensions:['bmp', 'gif', 'jpg', 'jpeg', 'png'],//接收的文件后缀
                initialPreviewAsData:true,
                initialPreview:preList,//预览图片
                uploadAsync: true, //默认异步上传
                showUpload: true, //是否显示上传按钮
                showRemove : false, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                maxFileSize:10 *1024 *1024,
                messages: {maxFileSize:'文件上传的最大大小为 10MB',acceptFileTypes:'此文件是不支持的图片格式'    },
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                msgFilesTooMany:5,
                autoReplace:false,
                initialPreviewConfig:initialPreviewConfig
            });
        }
        function initMajorCover() {
            var logoUrl = $("#majorCover").val();//拿到图片路径
            var preList = new Array();
            var initialPreviewConfig = new Array();
            //设置初始化区域值
            if (logoUrl != null && logoUrl != ''){
                var a = {
                    // caption : '主图'+(i+1),
                    // width: '120px',
                    url: '/common/del',
                    // key: i,
                    extra: {url: logoUrl}
                }
                preList.push(logoUrl);
                initialPreviewConfig.push(a);
            }

            $("#singleMajorCover").fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/common/upload", //上传的地址，改成自己的
                allowedFileExtensions:['bmp', 'gif', 'jpg', 'jpeg', 'png'],//接收的文件后缀
                initialPreviewAsData:true,
                initialPreview:preList,//预览图片
                uploadAsync: true, //默认异步上传
                showUpload: true, //是否显示上传按钮
                showRemove : false, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                maxFileSize:10 *1024 *1024,
                messages: {maxFileSize:'文件上传的最大大小为 10MB',acceptFileTypes:'此文件是不支持的图片格式'    },
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                msgFilesTooMany:5,
                autoReplace:false,
                initialPreviewConfig:initialPreviewConfig
            });
        }

        $("#singleFile").on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            $("#majorIcon").val(rsp.fileName);
            $("#singleFile").fileinput('destroy');//销毁fileUploadFileInput
            initUpload();//重新初始化文件预览数据和文件上传附件
            $('#singleFile').fileinput('enable');//enable作用：destroy并重新初始化fileinput插件后，插件会处于disable状态
        });

        $("#singleMajorCover").on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            $("#majorCover").val(rsp.fileName);
            $("#singleMajorCover").fileinput('destroy');//销毁fileUploadFileInput
            initMajorCover();//重新初始化文件预览数据和文件上传附件
            $('#singleMajorCover').fileinput('enable');//enable作用：destroy并重新初始化fileinput插件后，插件会处于disable状态
        });

        $('#singleFile').on('filepredelete', function(event, key, jqXHR, data) {  //就是在删除原图片之前触发，而新选择的图片不会触发。能满足我们的要求。
            console.log('Key = ' + key);
            var logoUrl = $("#majorIcon").val();
            var urlLinkNew = '';
            var imgArr = logoUrl.split(",");
            for ( var i = 0; i < imgArr.length; i++) {
                if (i == key) continue;
                if (urlLinkNew !=''){
                    urlLinkNew = urlLinkNew + "," + imgArr[i];
                }else{
                    urlLinkNew = imgArr[i];
                }
            }
            $("#majorIcon").val(urlLinkNew);
        });

        $('#singleMajorCover').on('filepredelete', function(event, key, jqXHR, data) {  //就是在删除原图片之前触发，而新选择的图片不会触发。能满足我们的要求。
            console.log('Key = ' + key);
            var logoUrl = $("#majorCover").val();
            var urlLinkNew = '';
            var imgArr = logoUrl.split(",");
            for ( var i = 0; i < imgArr.length; i++) {
                if (i == key) continue;
                if (urlLinkNew !=''){
                    urlLinkNew = urlLinkNew + "," + imgArr[i];
                }else{
                    urlLinkNew = imgArr[i];
                }
            }
            $("#majorCover").val(urlLinkNew);
        });

        $(document).ready(function() {
            <!--异步请求-->
            $.ajax({
                url: ctx+"system/dict/data/business_degree_type",
                type: "get",
                dataType: "json",
                success: function(data){
                    for(var i=0; i<data.length; i++){
                        $("#degreeType").append("<option value='" + data[i].dictValue + "'>" + data[i].dictLabel + "</option>");
                    }
                    var vtext = $("#degreeTypeDesc")[0].value;
                    $("#degreeType").find("option").each(function(){
                        if($(this).text() == vtext)	{
                            $(this).attr("selected",true);
                        }
                    });
                }
            });
            $.ajax({
                url: ctx+"system/dict/data/business_major_type",
                type: "get",
                dataType: "json",
                success: function(data){
                    for(var i=0; i<data.length; i++){
                        $("#majorType").append("<option value='" + data[i].dictValue + "'>" + data[i].dictLabel + "</option>");
                    }
                    var vtext = $("#majorTypeDesc")[0].value;
                    $("#majorType").find("option").each(function(){
                        if($(this).text() == vtext)	{
                            $(this).attr("selected",true);
                        }
                    });
                }
            });

            $("#needWorks").append("<option value=0>不需要</option>");
            $("#needWorks").append("<option value=1>需要</option>");
            var vtext1 = $("#needWorksDesc")[0].value;
            $("#needWorks").find("option").each(function(){
                if($(this).text() == vtext1)	{
                    $(this).attr("selected",true);
                }
            });
            $("#needEducation").append("<option value=0>不需要</option>");
            $("#needEducation").append("<option value=1>需要</option>");
            var vtext2 = $("#needEducationDesc")[0].value;
            $("#needEducation").find("option").each(function(){
                if($(this).text() == vtext2)	{
                    $(this).attr("selected",true);
                }
            });
            $("#needInterview").append("<option value=0>不需要</option>");
            $("#needInterview").append("<option value=1>需要</option>");
            var vtext3 = $("#needInterviewDesc")[0].value;
            $("#needInterview").find("option").each(function(){
                if($(this).text() == vtext3)	{
                    $(this).attr("selected",true);
                }
            });

            $("#ieltsSel").append("<option value=4.0>4.0</option>");
            $("#ieltsSel").append("<option value=4.5>4.5</option>");
            $("#ieltsSel").append("<option value=5.0>5.0</option>");
            $("#ieltsSel").append("<option value=5.5>5.5</option>");
            $("#ieltsSel").append("<option value=6.0>6.0</option>");
            $("#ieltsSel").append("<option value=6.5>6.5</option>");
            $("#ieltsSel").append("<option value=7.0>7.0</option>");
            var vtext4 = $("#ielts")[0].value;
            $("#ieltsSel").find("option").each(function(){
                if($(this).text() == vtext4)	{
                    $(this).attr("selected",true);
                }
            });

            $("#ieltsSel").change(function () {
                $("#ielts").val($('#ieltsSel')[0].value);
            });
        });
    </script>
</body>
</html>