<!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">
    <form class="form-horizontal m" id="form-project-edit" th:object="${smileProjectDetailsVo}">
        <input id="teamIdArray" name="teamIdArray" type="hidden">
        <input id="projectId" name="projectId" type="hidden" th:value="${smileProjectDetailsVo.projectId}">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">活动名称：</label>
            <div class="col-sm-8">
                <input name="title" class="form-control" type="text" th:value="${smileProjectDetailsVo.title}" required>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-8">
                <input id="fileinput10" type="file">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">封面图地址：</label>
            <div class="col-sm-8">
                <input id="iptUrl" name="img" class="form-control" type="text" th:value="${smileProjectDetailsVo.img}"
                       required readonly>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label is-required">地址：</label>
            <div class="col-sm-8">
                <input name="address" class="form-control" type="text" th:value="${smileProjectDetailsVo.address}"
                       required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">介绍：</label>
            <div class="col-sm-8">
                <input name="introduce" class="form-control" type="text" th:value="${smileProjectDetailsVo.introduce}"
                       required>
            </div>
        </div>
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-3 control-label is-required">开始时间：</label>-->
        <!--            <div class="col-sm-8">-->
        <!--                <input name="timeStart" class="form-control" type="date" th:value="${smileProjectDetailsVo.timeStart}"-->
        <!--                       required>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-3 control-label is-required">结束时间：</label>-->
        <!--            <div class="col-sm-8">-->
        <!--                <input name="timeEnd" class="form-control" type="date" th:value="${smileProjectDetailsVo.timeEnd}"-->
        <!--                       required>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">活动时间： </label>
            <input th:field="${smileProjectDetailsVo.timeStart}" type="text" style="width: 200px;float: left"
                   class="form-control" id="startTime" placeholder="开始时间选择" name="timeStart"
                   required/>
            <span class="control-label" style="float: left;margin-left: 10px;margin-right: 10px"> — </span>
            <input th:field="${smileProjectDetailsVo.timeEnd}" type="text" style="width: 200px;float: left"
                   class="form-control" id="endTime" placeholder="结束时间选择" name="timeEnd"
                   required/>
        </div>
    </form>

    <form class="form-horizontal m" id="form-team">
        <table id="team-table" class="table table-condensed table-sm" th:border="1">
            <tr>
                <td>名称</td>
                <td>介绍</td>
                <td>选中</td>
            <tr/>
            <div th:each="item : ${smileProjectDetailsVo.teamVoArray}">
                <tr class="content-tr">
                    <td th:value="${item.name}" th:text="${item.name}">
                    </td>
                    <td th:text="${item.introduce}">
                    </td>
                    <td>
                        <input name="checkbox" type="checkbox" th:value="${item.teamId}"
                               th:if="${item.isCheck==1}" th:text="选中" checked></label>
                        <input name="checkbox" type="checkbox" th:value="${item.teamId}" th:if="${item.isCheck==0}"
                               th:text="选中"></label>
                    </td>
                </tr>
            </div>
        </table>
    </form>

    <div class="cover_pop" style="display: none">
        <div class="pop_inner">
            <div class="wrapper wrapper-content animated fadeInRight ibox-content">
                <div class="file-loading">
                    <input id="fileinput-demo-1" type="file" name="file" data-browse-on-zone-click="true"
                           data-msg-placeholder="Select {files} for upload...">
                    <input hidden id="coverImg" name="coverImg">
                </div>
            </div>
            <div class="pop_btns">
                <div class="confirm_btn" onclick="popBtn(1)">确认</div>
                <div class="confirm_btn confirm_cancel" onclick="popBtn(0)">取消</div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var smilePrefix = ctx + "smile/volunteers";
    var platformUrl = [[${platformUrl}]];
    var teamIds = [];
    $("#form-roadShow-edit").validate({
        focusCleanup: true
    });

    $("#startTime").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",
        autoclose: true
    });
    $("#endTime").datetimepicker({
        format: "yyyy-mm-dd hh:ii:ss",
        autoclose: true
    });

    $(function () {
        var data = [[${smileProjectDetailsVo.teamVoArray}]]
        for (var i = 0; i < data.length; i++) {
            if(data[i].isCheck===1){
                teamIds.push(data[i].teamId);
            }
        }
    });

    $("input:checkbox").click(function () {
        var domName = $(this).attr('name');//获取当前单选框控件name 属性值
        var checkedState = $(this).attr('checked');//记录当前选中状态
        var value = $(this).val();
        $("input:radio[name='" + domName + "']").attr('checked', false);//1.
        $(this).attr('checked', true);//2.
        if (checkedState == 'checked') {
            $(this).attr('checked', false); //3.
            teamIds.remove(value)
        } else {
            teamIds.push(value);
        }
    });


    //扩展数组方法：查找指定元素的下标
    //author cjianquan 2016-1-14
    Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };

    //扩展数组方法:删除指定元素
    //author cjianquan 2016-1-14
    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        while (index > -1) {
            this.splice(index, 1);
            index = this.indexOf(val);
        }
    };


    $("#fileinput10").change((e) => {
        if (!e.target.files[0]) {
            return
        }
        var formData = new FormData();
        formData.append("file", e.target.files[0]);
        $.ajax({
            url: platformUrl + "/platform/basicServices/alOss/upload/unsm",//路径是你控制器中上传图片的方法，下面controller里面我会写到
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (res) {
                console.log(res, 'res')
                let imgPath = 'https://img.zhengzai.tv/' + res.data.ossPath;
                $("#iptUrl").val(imgPath);
            }
        });
    })

    function submitHandler() {
        if (teamIds.length === 0) {
            alert("未选择职责组");
        } else {
            document.getElementById("teamIdArray").value = teamIds.join(",");
            if ($.validate.form()) {
                $.operate.save(smilePrefix + "/project/update", $('#form-project-edit').serialize());
            }
        }
    }
</script>
</body>
</html>