{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>民宿列表页</title>
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/css/common.css' %}">
    <link rel="stylesheet" href="{% static '/css/module.css' %}">
    <link rel="stylesheet" href="{% static '/css/hotelList.css' %}">
</head>

<body>
    <div class="header">
        <div class="headerTxt">
            <div class="wrapper">
                <p class="logoNameCn">休闲农业旅游网</p>
                <p class="logoNameEn">Leisure agricultural tourism network</p>
            </div>

        </div>
        <!-- 广告 -->
        <div class="bjColor advImg"></div>
    </div>
    <!-- 主体部分 -->
    <div class="content">
        <div class="wrapper">
            <div class="newsDiv">
                <!-- 面包屑导航 -->
                <div class="breadcrumb">
                    <span class="layui-breadcrumb">
                        <a href="home">首页</a>
                        <a>
                            <cite>民宿导览</cite>
                        </a>
                    </span>
                    <div class="searchDiv">
                        <input type="text" id="searchTitlt" value="{{con|default:''}}" placeholder="请输入标题" autocomplete="off" class="layui-input" >
                        <button type="button" onclick="searchCon()" class="layui-btn layui-btn-ms"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
                <!-- 新闻列表 -->
                <div class="innerDiv">
                    <ul class="hotelList">
                         {% if hotel|length %} {% for hotelItem in hotel %}
                        <li class="hotelItem">
                            <a href="dorm_detail?id={{hotelItem.id}}">
                                <img src="{{hotelItem.hotel_img}}" alt="">
                                <div class="hotelDetial">
                                    <h2>{{hotelItem.name}}</h2>
                                    <div class="abstract-wrap">
                                        <p class="abstract-text">简介：{{hotelItem.intro}}</p>
                                    </div>
                                    <div class="address">
                                        地址：{{hotelItem.addr}}
                                    </div>
                                    <div class="txtColor price">￥<span>{{hotelItem.price}}</span>起</div>
                                    <div class="date">
                                        <span>{{hotelItem.upl_time|date:"Y年m月d日"}}</span>
                                        发布
                                    </div>
                                </div>
                            </a>
                        </li>
                        {% endfor %} {% else %}
                         <li class="videoItem" style=" width: 100%;">
                            <div style="text-align:center;line-height:200px;font-size:18px">暂无数据</div>
                        </li>
                        <!-- <li class="hotelItem">
                            <a href="dorm_detail">
                                <img src="{% static '/imgs/dorm/dorm2.jpg' %}" alt="">
                                <div class="hotelDetial">
                                    <h2>酒店名名称酒店名名称酒店名名称酒店名名称</h2>
                                    <div class="address">
                                        地址：党的十八大以来，以习近平同志为核心的党中央高度,关于加强保密工作的一系列决策部署。习近平总书记多次就做好新形势下保密工作作出重要指示批示，提出明确要求。江西是中国革命的摇篮，也是党和国家保密事业的重要发源地之一。做好新时代江西保密工作，关于加强保密工作的一系列决策部署。习近平总书记多次就做好新形势下保密工作作出重要指示批示，提出明确要求。江西是中国革命的摇篮，也是党和国家保密事业的重要发源地之一。做好新时代江西保密工作，必须传承党的保密工作光荣传统，持续推进党中央决策部署落地见效必须传承党的保密工作光荣传统，持续推进党中央决策部署落地见效
                                    </div>
                                    <div class="txtColor price">￥<span>200</span>起</div>
                                    <div class="date">
                                        <span>2019-02-30</span>
                                        发布
                                    </div>
                                </div>
                            </a>
                        </li> -->
                        {% endif %}
                    </ul>
                    {% if hotel|length %}
                    <div id="page"></div>
                    <input type="hidden" value="{{nums}}" id="nums">
                    <input type="hidden" value="{{page}}" id="currPage">
                    {% else %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <!-- 底部版权 -->
    <div class="footer bjColor">
        <div class="wrapper">
            <div class="floatDiv">
                <div class="copyrightTxt">
                    <div>休闲农业旅游网</div>
                    <div>联系人：李四　　联系电话：13811111111</div>
                    <div>地址：河南省郑州市XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
                </div>
                <div class="WeChatCode">
                    <img src="{% static '/imgs/WeChatCode.jpg' %}" alt="">
                    <p>关注公众号</p>
                </div>
            </div>
            <div class="copyright">
                版权所有XXXXXXXXXXXXXXXXXXXXXX
            </div>
        </div>
    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'laypage'], function () {
            var element = layui.element;

            //…
            var laypage = layui.laypage;
            var currPage = $('#currPage').val();
            //执行一个laypage实例
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                , count: $('#nums').val() //数据总数，从服务端得到
                // , limit: 5
                , curr: currPage
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    var searchTitlt = $('#searchTitlt').val();
                    //首次不执行
                    if (!first) {
                        window.location.href = 'dorm_list?page=' + obj.curr + '&condition=' + searchTitlt;
                    }
                }
            });
        });


        $('#searchTitlt').on('keypress', function (e) {
            if (e && e.keyCode == 13) { // 按 Esc 
                searchCon()
            }
        })

        function searchCon() {
            var searchTitlt = $('#searchTitlt').val();
            window.location.href = 'dorm_list?page=1' + '&condition=' + searchTitlt;
        }
    </script>
</body>

</html>