<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=360, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>列表</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/list.css">
    <script type="text/javascript" src="{{ theme }}/js/iscroll.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.mobile.custom.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/public.js"></script>
</head>
<body>

<div class="search">
    <div class="btn-group pull-left">
        <a class="btn">{{cityName}}<span></span></a>
        <div id="city_wrapper" class="dropdown-menu">
            <div id="city_scroller">
                {% for item in select.city %}
                    <a href="{{ url }}?cityId={{item.id}}">{{item.value}}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="has-feedback pull-right">
        <input type="text" class="form-control" placeholder="输入楼盘名/地段名搜索">
        <span class="glyphicon glyphicon-search form-control-feedback"></span>
    </div>
</div>

<div class="btn-group-justified">
    <div class="btn-group">
        <a href="#" class="btn">区域<span></span></a>
        <div class="dropdown-menu">
            <div id="area_wrapper" class="col-xs-5 left-menu">
                <div type="districtId" id="district_scroller">
                    <a data-action="open" class="active-bg">不限</a>
                    {% for item in select.district %}
                        <a data-action="open" data-id="{{item.id}}">{{item.value}}</a>
                    {% endfor %}
                </div>
            </div>

            <div id="urbanArea_wrapper" class="col-xs-7 right-menu">
                <div type="plateId" id="urbanArea_scroller">
                    <a href="#">不限</a>
                </div>
            </div>
        </div>
    </div>
    <div class="btn-group">
        <a class="btn">价格<span></span></a>
        <div id="price_wrapper" class="dropdown-menu">
            {% if select.totalPrice %}
            <div type="totalPrice"  id="totalPrice_scroller">
                <a href="#">不限</a>
                {% for item in select.totalPrice %}
                    <a data-id="{{item.value}}">{{item.value}}</a>
                {% endfor %}
            </div>
            {% endif %}
            {% if select.rentalPrice %}
            <div type="rentalPrice"  id="rentalPrice_scroller">
                <a href="#">不限</a>
                {% for item in select.rentalPrice %}
                    <a data-id="{{item.value}}">{{item.value}}</a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
    <div class="btn-group">
        <a href="#" class="btn">房型<span></span></a>
        <div id="buildProperty_wrapper" class="dropdown-menu">
            <div type="buildPropertyId" id="buildProperty_scroller">
                <a href="#">不限</a>
                {% for item in select.buildProperty %}
                    <a data-id="{{item.id}}">{{item.value}}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    {% if houseType == 2 %}
    <div class="btn-group">
        <a href="#" class="btn">面积<span></span></a>
        <div id="other_wrapper" class="dropdown-menu">
            <div id="other_scroller">
                <a href="#">不限</a>
                {% for item in select.area %}
                <a data-id="{{item.id}}">{{item.value}}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    {% else %}
    <div class="btn-group">
        <a href="#" class="btn">更多<span></span></a>
        <div class="dropdown-menu">
            <div  class="col-xs-5 left-menu">
                <div>
                    <a id="acreage" class="active-bg">面积</a>
                    {% if houseType == 0 %}
                    <a id="roomId">类型</a>
                    {% else %}
                    <a id="">特色</a>
                    {% endif %}
                </div>
            </div>

            <div id="other_wrapper" class="col-xs-7 right-menu">
                <div id="other_scroller">
                    <a href="#">不限</a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<div id="wrapper">
    <div id="scroller">
    </div>
</div>
<footer class="footer text-center navbar-fixed-bottom">
    拨打400-123-4567
</footer>
<div class="loading" id="loading" style="display: none;">
    <ul class="list-unstyled">
        <li>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </li>
        <li>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </li>
        <li>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </li>
    </ul>
</div>
<div id="template_0" style="display: none">
    <p>
        <img src="" data-attr="image">
    </p>
    <ul class="list-unstyled">
        <li class="address">
            <span data-attr="name"></span>
            <span class="pull-right" data-attr="type"></span>
        </li>
        <li data-attr="address"></li>
        <li data-attr="latest_news"></li>
        <li data-attr="tags">
            <span class="pull-right" data-attr="price"></span>
        </li>
    </ul>
</div>
<div id="template_1" style="display: none">
    <p>
        <img src="" data-attr="image">
    </p>
    <ul class="list-unstyled">
        <li class="multiLine_omit" data-attr="name"></li>
        <li data-attr="community"></li>
        <li>
            <span data-attr="apartment"></span>
            <span data-attr="covered_area"></span>
        </li>
        <li data-attr="tags">
            <span class="pull-right" data-attr="price"></span>
        </li>
    </ul>
</div>
<div id="template_2" style="display: none">
    <p>
        <img src="" data-attr="image">
    </p>
    <ul class="list-unstyled">
        <li class="multiLine_omit" data-attr="name"></li>
        <li data-attr="community"></li>
        <li>
            <span data-attr="apartment"></span>
            <span data-attr="decoration"></span>
            <span data-attr="covered_area"></span>
        </li>
        <li data-attr="tags">
            <span class="pull-right" data-attr="price"></span>
        </li>
    </ul>
</div>

<script type="text/javascript">
    var myScroll;
    var cityScroll;
    var areaScroll;
    var urbanAreaScroll;
    var buildPropertyScroll;
    var acreageScroll;
    var priceScroll;
    var otherScroll;
    var scrollList = [];
    var houseType = {{ houseType }};
    window.addEventListener("load",function(){
        myScroll = scrollPullToRefresh(function(){
            ajax_get_house('{{ url }}', loading, searchData, scroller);
        });
        scrollList.push(myScroll);
        cityScroll = new IScroll('#city_wrapper',{
            click: true
        });
        scrollList.push(cityScroll);
        areaScroll = new IScroll('#area_wrapper',{
            click: true
        });
        scrollList.push(areaScroll);
        urbanAreaScroll = new IScroll('#urbanArea_wrapper',{
            click: true
        });
        scrollList.push(urbanAreaScroll);
        buildPropertyScroll = new IScroll('#buildProperty_wrapper',{
            click: true
        });
        scrollList.push(buildPropertyScroll);
        priceScroll = new IScroll('#price_wrapper',{
            click: true
        });
        scrollList.push(priceScroll);
        otherScroll = new IScroll('#other_wrapper',{
            click: true
        });
        scrollList.push(otherScroll);
    },false);
    document.addEventListener('touchmove', function(e){ e.preventDefault(); });
    var plate = {{select.plate}};
    var room = {{select.room}};
    var area = {{select.area}};

    var scroller;
    var loading;
    $(document).ready(function(){
        scroller = $('#scroller');
        loading = $('#loading');
        $(".btn-group > a").bind('tap',function(){
            var parent = $(this).parent();
            if(parent.hasClass("open")){
                $(".btn-group").removeClass("open");
            }else{
                $(".btn-group").removeClass("open");
                parent.addClass("open");
            }
            $.each(scrollList,function(i,item){
                item.refresh();
            });
        });
        $("#district_scroller > a").bind('tap',function(){
            $("#district_scroller > a").removeClass("active-bg");
            $(this).addClass("active-bg");
            $("#urbanArea_scroller").children(":not(:first)").remove();
            if($(this).attr("data-id") != undefined){
                $.each(plate[$(this).attr("data-id")],function(i,item){
                    $("#urbanArea_scroller").append('<a data-id="'+item.id+'">'+item.value+'</a>');
                });
            }
            urbanAreaScroll.refresh();
        });

        var other = $("#other_scroller");
        var other_item = area;
        var roomAndAcreageKey = "id";
        $.each(other_item,function(i,item){
            other.append('<a data-id="'+item[roomAndAcreageKey]+'">'+item.value+'</a>');
        });
        other.attr("type","roomId");
        $("#roomId,#acreage").bind('tap',function(){
            $(this).parent().children().removeClass('active-bg');
            $(this).addClass('active-bg');
            var id = $(this).attr('id');
            other.children(":not(:first)").remove();
            if(id == 'roomId'){
                other_item = room;
                other.attr("type","roomId");
                roomAndAcreageKey = "id";
            }else if(id == 'acreage'){
                other_item = area;
                other.attr("type","acreage");
                roomAndAcreageKey = "value";
            }
            $.each(other_item,function(i,item){
                var dataId = item.id;
                other.append('<a data-id="'+item[roomAndAcreageKey]+'">'+item.value+'</a>');
            });
            otherScroll.refresh();
        });
        $(".btn-group").on('tap','.dropdown-menu a',function(){
            searchData.index = 0;
            if($(this).parent().attr("type")!=undefined){
                searchData[$(this).parent().attr("type")] = $(this).attr("data-id")!=undefined?$(this).attr("data-id"):-1;
                if($(this).attr("data-action") != "open"){
                    //do somthing
                    $(".btn-group").removeClass("open");
                    scroller.html('');
                    ajax_get_house('{{ url }}', loading, searchData, scroller);
                }
            }
        });
        ajax_get_house('{{ url }}', loading, searchData, scroller);
    });
    var searchData = {
        action: 'search_house',
        cityId: {{ cityId }},
        districtId: -1,
        plateId: -1,
        totalPrice: -1,
        rentalPrice: -1,
        buildPropertyId: -1,
        roomId: -1,
        acreage: -1,
        searchText: '',
        houseType: houseType,
        index: 0
    };
</script>

</body>
</html>