<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>完工信息</title>
    <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" type="text/css" href="${ctxPlugin}/static/css/reset.css"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>
        html {
            background-color: #fff;
            padding-bottom: 50px;
        }
        .bj-img {
            margin-right: 0;
        }
        .materialTable td, th {
            text-align: center !important;
        }
        .sl-img > img {
            width: 100%;
            height: 100%;
        }
        .sl-img > span {
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #adacac;
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            display: block;
        }

        .bj-img > span{
            z-index: 1;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="order-win layui-form" id="LAY_app">
        <input type="hidden" id="reformedNo" value="${reInfo.rectificationNo}">
        <div class="clear-both">
            <p class="layui-elem-quote" style="margin: 0px 0px 0px 10px">整改信息</p>
            <div style="width: 99.5%;" id="tableDiv">
                <c:forEach items="${list}" varStatus="vs" var="entry">
                <table class="layui-table materialTable" style="margin: 10px 10px 10px 10px;">
                    <input type="hidden" name="inputPieceId" value="${entry.columns.input_piece_id}">
                    <tr>
                        <th width="10%">电站编号</th>
                        <th width="90%" colspan="3">${entry.columns.power_station_code}</th>
                    </tr>
                    <tr>
                        <td width="10%">整改项</td>
                        <td width="40%">整改前照片</td>
                        <td width="10%">整改执行反馈</td>
                        <td width="40%">整改后照片</td>
                    </tr>
                    <tbody id="tbody">
                        <c:forEach items="${entry.columns.detail}" varStatus="vs" var="re">
                        <tr>
                            <td width="10%">${re.columns.rectification_term}</td>
                            <td width="40%">
                                <div class="layui-input-block img-box" style="margin-left: 20px;">
                                    <div style="display: flex;">
                                        <div id="imgsDiv">
                                            <c:if test="${not empty re.columns.rectification_before_img}">
                                                <c:forEach var="img" items="${re.columns.rectification_before_img.split(',')}" varStatus="vs">
                                                    <div class="bj-img imgSpan">
                                                        <img src="${img}" height="700" width="1200">
                                                        <input type="hidden" name="rectificationBeforeImg" class="rectificationBeforeImg" value="${img}">
                                                    </div>
                                                    <c:set var="otherImgs1Count" value="${vs.count}"/>
                                                </c:forEach>
                                            </c:if>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td width="10%">${re.columns.rectification_feedback}</td>
                            <td width="40%">
                                <c:set var="indexNum" value="0"/>
                                <div class="layui-input-block img-box" style="margin-left: 20px;">
                                    <div style="display: flex;">
                                        <div id="imgsDiv${re.columns.id}">
                                            <c:if test="${not empty re.columns.rectification_after_img}">
                                                <c:forEach var="img" items="${re.columns.rectification_after_img.split(',')}" varStatus="vs">
                                                    <div class="bj-img imgSpan">
                                                        <span class="layui-icon-close layui-icon" onclick="delImg(this,'uploader${re.columns.id}')"></span>
                                                        <img src="${img}" height="700" width="1200">
                                                        <input type="hidden" name="rectificationAfterImg" class="rectificationAfterImg" value="${img}">
                                                    </div>
                                                    <c:set var="otherImgs1Count" value="${vs.count}"/>
                                                </c:forEach>
                                            </c:if>
                                        </div>
                                        <div class="upload-container <c:if test="${rectificationAfterImg >=15}">hide</c:if>" id="uploader${re.columns.id}">
                                            <img src="" alt="img placeholder" id="rectificationAfterImg${re.columns.id}">
                                        </div>
                                    </div>
                                </div>
                                <c:set var="indexNum" value="${indexNum+1}"/>
                            </td>
                        </tr>
                        </c:forEach>
                    </tbody>
                    </c:forEach>
                </table>
            </div>
            <div class="layui-col-xs11">
            <div class="layui-col-xs12" style="position: fixed;bottom: 30px;background: #F8F8F8;padding-bottom: 17px">
                <div class="layui-col-xs12">
                    <label class="layui-form-label">整改执行反馈：</label>
                    <div class="layui-input-block">
                        <textarea name="feedbackDes" id="feedbackDes" class="layui-textarea" lay-verify="required"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-form-item text-c operate-footer">
    <button type="button" class="layui-btn" id="save">提交</button>
    <button class="layui-btn layui-btn-primary" onclick="closeSelf()">取消</button>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script>

    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY_app'));
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'tableExt', 'jquery', 'layer', 'laypage', 'laydate', 'form','upload'], function () {
        $ = layui.$;
        tableExt = layui.tableExt;
        layer = layui.layer;
        laypage = layui.laypage;
        laydate = layui.laydate;
        form = layui.form;
        upload = layui.upload;
        table = tableExt.getLayTable();
        var element = layui.element;

        var idList = "${idList}";
        var list = idList.split(",")

        // 循环为每个按钮创建上传实例
        list.forEach(function(btn) {
            upload.render({
                elem: '#uploader'+btn // 绑定按钮
                , multiple:true
                , url: '${ctx}/common/uploadFile' //上传接口
                , before: function (obj) {
                }
                , done: function (res) {
                    //上传完毕回调
                    addImg(res.path, "uploader"+btn, "imgsDiv"+btn, "rectificationAfterImg",15);
                }
                , error: function () {
                    //请求异常回调
                }
            });
        });

        $("#save").click(function(){
            save();
        })

    })

    var saveFlag = false;
    function save() {
        if(saveFlag){
            return;
        }
        var stationInfos = [];
        var reFlag = false;
        $("#tableDiv").find("table").each(function(){
            var inputPieceId = $("input[name='inputPieceId']").val();
            var obj = {};
            var reformedItemList = []
            $("#tbody").find("tr").each(function(){
                var itemDes = $(this).find("td").eq(0).html();
                var feedbackDes = $(this).find("td").eq(2).html();
                var rectificationAfterImg = [];
                $(this).find("td").eq(3).find("input[name='rectificationAfterImg']").each(function(){
                    rectificationAfterImg.push($(this).val());
                })
                rectificationAfterImg = rectificationAfterImg.join(",");
                if (rectificationAfterImg.length==0) {
                    layer.msg("整改后照片不能为空");
                    reFlag = true;
                    return false;
                }
                var data = {};
                data.itemDes = itemDes;
                data.feedbackDes = feedbackDes;
                data.reformAfterPic = rectificationAfterImg;
                reformedItemList.push(data);
            });
            obj.inputPieceId = inputPieceId;
            obj.reformedItemList = reformedItemList;
            stationInfos.push(obj)
        });

        var reformedNo = $("#reformedNo").val();//整改单号
        var feedbackDes = $('textarea[name="feedbackDes"]').val();//整改执行反馈
        if (isBlank(feedbackDes)) {
            layer.msg("整改执行反馈不能为空");
            return;
        }
        var reformed = {
            reformedNo:reformedNo,
            feedbackDes:feedbackDes,
            finishTime: Date.now(),
            stationInfos:stationInfos
        }
        console.log(JSON.stringify(reformed));

        if (reFlag) {
            return;
        }
        $.ajax({
            type: 'post',
            url: '${ctx}/rectification/saveRectificationInfo',
            contentType : "application/json;charsetset=UTF-8",
            dataType: 'json',
            data:JSON.stringify(reformed),
            success: function(data){
                if (data.code == "200") {
                    top.layer.msg("操作成功");
                    closeSelf();
                    parent.location.reload();
                } else {
                    layer.msg(data.errMsg);
                }
            },
            complete: function(){
                saveFlag = false;
            }
        });
    }

    function changeMaterialTab(type) {
        $('.materialTable').eq(type).removeClass('layui-hide').siblings('.materialTable').addClass('layui-hide');
    }

    function addImg(data, id, imgsDiv, classimg,count) {
        var imgCount=$("#" + imgsDiv).find(".imgSpan").length;
        if((imgCount+1)>=count){
            $("#" + id).hide();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\'' + id + '\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        html += '<input type="hidden" name="' + classimg + '"  class="' + classimg + '" value="${commonStaticImgPath}' + data + '"/> </div>';
        $("#" + imgsDiv).append(html);
        //图片查看效果
        viewer.update();
    }

    function addVedio(data, id, imgsDiv, classimg,count) {
        var imgCount=$("#" + imgsDiv).find(".imgSpan").length;
        if((imgCount+1)>=count){
            $("#" + id).hide();
        }
        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this,\'' + id + '\')"></span>';
        html += '<video src="${commonStaticImgPath}' + data + '" width="150px" height="78px"></video>';
        html += '<input type="hidden" name="' + classimg + '"  class="' + classimg + '" value="' + data + '"/> </div>';
        $("#" + imgsDiv).append(html);
        //图片查看效果
        viewer.update();
    }

    function delImg(that, id) {
        $("#" + id).show();
        $(that).parent().remove();
    }

    window.closeSelf = function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);//关闭当前页
    }

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

    function delVideoImg(that, id) {
        $("#" + id).show();
        $(that).parent().remove();

    }
</script>
</div>
</body>
</html>

