<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib  uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/html5shiv.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/respond.min.js"></script>
    <!--[endif]-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/page.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/index/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/js/layer.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/laydate/laydate.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <title>分类管理</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>经典案例 <span class="c-gray en">&gt;</span> 案例管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <form action="${pageContext.request.contextPath}/admin/product_list.html" method="post">
        <div style="text-align: center;">
            <span>一级分类：
                 <select  name="cid" class="input-text" style="width:160px;" onchange="changeCategory()" id="first_s">
                     <option  <c:if test="${cid == 0}"> selected </c:if>  value="0">----请--选--择----</option>
                     <c:forEach items="${list01}" var="p">
                         <option  <c:if test="${p.id == cid}"> selected </c:if>  value="${p.id}">${p.name}</option>
                     </c:forEach>
                 </select>
            </span>

            <span style="margin-left: 40px;">二级分类：
                 <select  name="wid" class="input-text" style="width:160px;" id="second_s">
                     <option  <c:if test="${wid == 0}"> selected </c:if>  value="0">----请--选--择----</option>
                     <c:if test="${cid != 0}">
                         <c:forEach items="${list02}" var="p">
                             <option  <c:if test="${p.id == wid}"> selected </c:if>  value="${p.id}">${p.name}</option>
                         </c:forEach>
                     </c:if>
                 </select>
            </span>

           <%-- <span style="margin-left: 40px;">时间日期范围:
                 <input id="test1" class="input-text" placeholder="开始时间 " name="minDate" value="${minDate}" style="width:160px;">
                    -
                 <input id="test2" class="input-text" placeholder="结束时间 " name="maxDate" value="${maxDate}" style="width:160px;">
            </span>
--%>
            <span style="margin-left: 40px;">
                <input type="text" name="name" placeholder=" 案例名称" style="width:250px" class="input-text" value="${name}">
            </span>
            <button  class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i>搜索</button>
        </div>
    </form>

    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a onclick="data_Del()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
            <a class="btn btn-primary radius" title="添加案例" href="${pageContext.request.contextPath}/admin/add_product.html" ><i class="Hui-iconfont">&#xe600;</i> 添加案例</a>
        </span>
        <span class="r data_num">共有数据：<strong id="total">${pageInfo.total }</strong> 条</span>
    </div>

    <div class="mt-20">
        <table class="table table-border table-bordered table-bg table-hover table-sort">
            <thead>
            <tr class="text-c">
                <th width="80"><input type="checkbox" id="ckAll" onclick="checkBox()"></th>
                <th width="100">编号</th>
                <th width="150">名称</th>
                <th width="150">所属一级分类</th>
                <th width="150">所属二级分类</th>
                <th width="150">封面图</th>
                <th width="100">排序值</th>
                <th width="150">更新时间</th>
                <th width="200">操作</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach items="${pageInfo.list }" var="p">
                <tr class="text-c">
                    <td><input type="checkbox" value="${p.id}" name="ck" onclick="checkName()"></td>
                    <td>${p.id}</td>
                    <td>${p.name}</td>
                    <td>
                        <c:forEach items="${list01}" var="b">
                            <c:if test="${b.id == p.cid}">
                                <span class="label label-success radius">${b.name}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td>
                        <c:forEach items="${list03}" var="b">
                            <c:if test="${b.id == p.wid}">
                                <span class="label label-success radius">${b.name}</span>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td><img src="${p.img}" width="auto" height="40px"></td>
                    <td>${p.sort}</td>
                    <td>${p.time}</td>
                    <td class="f-14 td-manage">
                        <a style="text-decoration:none" class="ml-5" href="${pageContext.request.contextPath}/admin/update_product.html?pid=${p.id}" title="编辑"><i class="Hui-iconfont">&#xe6df;</i>编辑</a>
                        <a style="text-decoration:none" class="ml-5" onClick="delete_text(this,${p.id})" title="删除"><i class="Hui-iconfont">&#xe6e2;</i>删除</a></td>
                    </td>
                </tr>
            </c:forEach>

            </tbody>
        </table>
    </div>

    <div id="PageNum">
        <section>
            <div class="bd points-goods-list">
                <ul class="pages">
                    <li><a href="${pageContext.request.contextPath}/admin/product_list.html?page=1&rows=${pageInfo.pageSize}&cid=${cid}&wid=${wid}&name=${name}&minDate=${minDate}&maxDate=${maxDate}">首页</a></li>
                    <li class="prev"><a
                            href="${pageContext.request.contextPath}/admin/product_list.html?page=${pageInfo.prePage}&rows=${pageInfo.pageSize}&cid=${cid}&wid=${wid}&name=${name}&minDate=${minDate}&maxDate=${maxDate}">上一页</a></li>

                    <c:forEach items="${pageInfo.navigatepageNums}" var="nav">
                        <c:if test="${nav == pageInfo.pageNum}">
                            <li><a href="${pageContext.request.contextPath}/admin/product_list.html?page=${nav}&rows=${pageInfo.pageSize}&cid=${cid}&wid=${wid}&name=${name}&minDate=${minDate}&maxDate=${maxDate}"
                                   class="active">${nav}</a></li>
                        </c:if>
                        <c:if test="${nav != pageInfo.pageNum}">
                            <li><a href="${pageContext.request.contextPath}/admin/product_list.html?page=${nav}&rows=${pageInfo.pageSize}&cid=${cid}&wid=${wid}&name=${name}&minDate=${minDate}&maxDate=${maxDate}">${nav}</a></li>
                        </c:if>
                    </c:forEach>
                    <li class="next"><a
                            href="${pageContext.request.contextPath}/admin/product_list.html?page=${pageInfo.nextPage}&rows=${pageInfo.pageSize}&cid=${cid}&wid=${wid}&name=${name}&minDate=${minDate}&maxDate=${maxDate}">下一页</a></li>
                    <li><a href="${pageContext.request.contextPath}/admin/product_list.html?page=${pageInfo.pages }&rows=${pageInfo.pageSize}&cid=${cid}&wid=${wid}&name=${name}&minDate=${minDate}&maxDate=${maxDate}">末页</a></li>
                </ul>
            </div>
        </section>
    </div>
</div>
</div>
<script type="text/javascript">

    function delete_text(obj,id){
        layer.confirm('确认要删除吗？',function(){
            $.ajax({
                url : 'delete_product.html',
                type : 'POST',
                async: false,
                data : {'pid' : id},
                dataType : 'text',
                success : function(data){
                    if(data == 'ok'){
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!',{icon:1,time:1000});
                    }
               },
                error : function(data) {
                    console.log(data.msg);
                },
            });
        });
    }

    function changeCategory() {
        var cid = $("#first_s").val();
        $.ajax({
            url : 'find_class02.html',
            type : 'POST',
            async: false,
            data : {'cid' : cid},
            dataType : 'text',
            success : function(data){
                $("#second_s").html('<option selected value="0">----请--选--择----</option>');
                //解析json为数组
                var dataObj = eval("("+data+")");
                var dataList = dataObj.tasks;
                if (dataList != null) { //如果没有这一步，js会报length null之类的
                    for(var i=0;i<dataList.length;i++){
                        var categoryObj = dataList[i];
                        var id = categoryObj.id;
                        var name = categoryObj.name;
                        var str = '<option value="'+id+'">'+name+'</option>';
                        $("#second_s").html($("#second_s").html()+str);
                    }
                }
            },
            error : function(data) {
                console.log(data.msg);
            },
        });
    }

    /*批量删除*/
    function data_Del() {
        var checkValue =""; //定义一个数组
        $("input[name='ck']:checked").each(function () {
            checkValue += $(this).val() + ",";
        });
        if(checkValue==""){
            layer.msg('请选择要删除的案例!',{icon:0,time:1000});
        }else{
            layer.confirm('确认要删除这些案例吗？',function(){
                window.location.href = "${pageContext.request.contextPath}/admin/delete_ProList.html?checkValue=" + checkValue;
            });
        }
    }


     /*全选框*/
    function checkBox() {
        $("input[name='ck']").prop("checked",$("#ckAll").prop("checked"));
    }
    /*全选框*/
    function checkName(){
        if($("input[name='ck']:checked").length==$("input[name='ck']").length){
            //选中的name复选框长度如果等于总name复选框，则对全选框操作
            $("#ckAll").prop("checked",true);
        }else{
            $("#ckAll").prop("checked",false);
        }
    }

    //时间日期范围:
    var startDate = laydate.render({
        elem : '#test1', //指定元素
        type : 'datetime',
        format : "yyyy-MM-dd HH:mm:ss",
        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;
                endDate.config.min.time = date.time;
            } else {
                endDate.config.min.year = '';
                endDate.config.min.month = '';
                endDate.config.min.date = '';
                endDate.config.min.time = '';
            }
        }
    });


    var endDate = laydate.render({
        elem : '#test2', //指定元素
        type : 'datetime',
        format : "yyyy-MM-dd HH:mm:ss",
        done: function (value, date) {
            if (value !== '') {
                startDate.config.max.year = date.year;
                startDate.config.max.month = date.month - 1;
                startDate.config.max.date = date.date;
                startDate.config.max.time = date.time;
            } else {
                startDate.config.max.year = '';
                startDate.config.max.month = '';
                startDate.config.max.date = '';
                startDate.config.max.time = '';
            }
        }

    });




</script>
</body>
</html>