<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-cn">

<jsp:include page="/admin/head.jsp"></jsp:include>

<body>
<div class="wrapper">

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <h4 class="card-title">列表</h4>
                        <c:if test="${sessionScope.auser.utype=='管理员'}">
                        <div class="table-operate ue-clear ml-auto">
                                <a href="doAddDonation.do" class="add" id="addpart" onClick="add1()">添加</a>
                        </div>
                        </c:if>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Modal 添加信息-->
                    <div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header no-bd">
                                    <h5 class="modal-title">
                                        <span class="fw-mediumbold">添加</span>
                                        <span class="fw-light">捐赠信息</span>
                                    </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p class="small">创建捐赠信息</p>
                                    <form method="post" action="addDonation.do" >
                                        <div class="row">

                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer no-bd">
                                    <button type="submit" id="addRowButton" class="btn btn-primary">添加</button>
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table id="add-row" class="display table table-striped table-hover" >
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>捐赠标题</th>
                                <th>类型</th>
                                <th>分类</th>
                                <th>图片</th>
                                <th style="width: 10%">操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <c:forEach items="${list}" var="u" varStatus="num">
                                <tr>
                                    <th>${num.count}</th>


                                    <th>${u.name}</th>


                                    <th>${u.btype}</th>



                                <th><c:forEach items="${classList}" var="y">
                                    <c:if test="${y.id==u.fid}">${y.name}</c:if>
                                </c:forEach></th>

                                     <th><img src="../upload/${u.img}" style="width: 50px;height: 50px;" ></th>


                                    <th>
                                        <div class="form-button-action table-operate ue-clear">
                                            <a href="javascript:;" class="count" onclick="look(${u.id})">查看</a>
                                            <c:if test="${sessionScope.auser.utype=='管理员'}">
                                                <a href="doUpdateDonation.do?id=${u.id}" class="edit"  >编辑</a>
                                            <a  class="del" onclick="return del(1,1,1)" href="deleteDonation.do?id=${u.id}" >删除</a>
                                            </c:if>
                                        </div>
                                    </th>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>



<script >
    $(document).ready(function() {
        /* $('#basic-datatables').DataTable({
         });*/

        $('#multi-filter-select').DataTable( {
            "pageLength": 2,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select class="form-control"><option value=""></option></select>')
                            .appendTo( $(column.footer()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                );

                                column
                                        .search( val ? '^'+val+'$' : '', true, false )
                                        .draw();
                            } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
        });

        // Add Row
        $('#add-row').DataTable({
            "pageLength": 5,
        });

        var action = '<td> <div class="form-button-action"> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';

        $('#addRowButton').click(function() {
            $('#add-row').dataTable().fnAddData([
                $("#addName").val(),
                $("#addPosition").val(),
                $("#addOffice").val(),
                action
            ]);
            $('#addRowModal').modal('hide');

        });
    });


</script>

<script type="text/javascript">
    //静态表格
    layui.use('table',function(){
        var table = layui.table;
        //转换静态表格
        table.init('mylist', {
            height: 'full-130' //高度最大化减去差值,也可以自己设置高度值：如 height:300
            ,count: 50 //数据总数 服务端获得
            ,limit: 5 //每页显示条数 注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            ,page:true //开启分页
            ,toolbar: '#toolbarDemo'//工具栏
            /* ,defaultToolbar:['filter', 'exports']*/
            ,limits:[ 5, 10, 15, 20, 30, 50]//分页显示每页条目下拉选择
            ,cellMinWidth: 60//定义全局最小单元格宽度，其余自动分配宽度
        });
        //监听行工具事件
        table.on('tool(mylist)', function(obj){ //注：tool 是工具条事件名，mylist 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                alert(layEvent);
                layer.msg('修改操作');
            }
        });
        //监听头工具栏事件
        table.on('toolbar(mylist)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
            /* switch(obj.event){
            case 'getCheckLength':
                if(data.length === 0){
                layer.msg('请选择一行');
                } else {
                layer.msg('删除');
                }
            break;
            }; */
        });
    });
    /*添加*/
    function add(){
        //iframe层
        layer.open({
            type: 2,//层板块
            //title: "查看应急资源",//标题
            closeBtn: 1, //不显示关闭按钮
            shade: [0.3],//遮罩
            skin: 'demo_class_color',//iframe皮肤
            shadeClose:Boolean,//点击遮罩关闭
            area: ['900px', '100%'],
            // offset: 'rb', //右下角弹出
            // time: 2000, //2秒后自动关闭
            anim: 5,//动画
            maxmin: true,
            content: ['doAddDonation.do', 'yes'], //iframe的url，no代表不显示滚动条
        });

    }
    /*修改*/
    function update(id){
        //iframe层
        layer.open({
            type: 2,//层板块
            //title: "查看应急资源",//标题
            closeBtn: 1, //不显示关闭按钮
            shade: [0.3],//遮罩
            skin: 'demo_class_color',//iframe皮肤
            shadeClose:Boolean,//点击遮罩关闭
            area: ['900px', '100%'],
            // offset: 'rb', //右下角弹出
            // time: 2000, //2秒后自动关闭
            anim: 5,//动画
            maxmin: true,
            content: ['doUpdateDonation.do?id='+id, 'yes'], //iframe的url，no代表不显示滚动条
        });
    }
    //  iframe层  详情信息
    function look(id){
        //iframe层
        layer.open({
            type: 2,//层板块
            // title: "查看应急资源",//标题
            closeBtn: 1, //不显示关闭按钮
            shade: [0.3],//遮罩
            skin: 'demo_class_color',//iframe皮肤
            shadeClose:Boolean,//点击遮罩关闭
            area: ['900px', '100%'],
            // offset: 'rb', //右下角弹出
            // time: 2000, //2秒后自动关闭
            anim: 5,//动画
            maxmin: true,
            content: ['doLookDonation.do?id='+id, 'yes'], //iframe的url，no代表不显示滚动条
        });
    }
</script>
</body>
</html>
