<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 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>
    <!--CSS-->
    <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/jquery.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.mobile.custom.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/iscroll.js"></script>
    <script type="text/javascript">
        var myScroll;
        var cityScroll;
        var areaScroll;
        var urbanAreaScroll;
        var buildPropertyScroll;
        var acreageScroll;
        var priceScroll;
        var otherScroll;
        var scrollList = [];
        window.addEventListener("load",function(){
            myScroll = new IScroll('#wrapper',{
                scrollbars: true,
                click: true
            });
            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);
            totalPriceScroll = new IScroll('#totalPrice_wrapper',{
                click: true
            });
            scrollList.push(totalPriceScroll);
            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}};

        $(document).ready(function(){
            $(".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 = room;
            var roomAndAcreageKey = "id";
            $.each(other_item,function(i,item){
                other.append('<a data-id="'+item[roomAndAcreageKey]+'">'+item.value+'</a>');
            });
            other.attr("type","room");
            $("#room,#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 == 'room'){
                    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','a',function(){
                if($(this).parent().attr("type")!=undefined){
                    searchData[$(this).parent().attr("type")] = $(this).attr("data-id")!=undefined?$(this).attr("data-id"):0;
                    if($(this).attr("data-action") != "open"){
                        //do somthing
                        $(".btn-group").removeClass("open");
                        console.log(JSON.stringify(searchData));
                    }
                }
            });
            var searchData = {
                cityId:{{cityId}},
                districtId:0,
                plateId:0,
                totalPrice:'',
                buildPropertyId:0,
                roomId:0,
                acreage:'',
                searchText:''
            };
        });
    </script>
</head>
<body>

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

<div class="btn-group-justified">
    <div class="btn-group">
        <a href="#" class="btn">区域<i class="iconfont"></i></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">价格<i class="iconfont"></i></a>
        <div id="totalPrice_wrapper" class="dropdown-menu">
            <div type="totalPrice"  id="totalPrice_scroller">
                <a href="#">不限</a>
                {% for item in select.totalPrice %}
                    <a data-id="{{item.value}}">{{item.value}}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="btn-group">
        <a href="#" class="btn">房型<i class="iconfont"></i></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>

    <div class="btn-group">
        <a href="#" class="btn">更多<i class="iconfont"></i></a>
        <div class="dropdown-menu">
            <div  class="col-xs-5 left-menu">
                <div>
                    <a id="room" class="active-bg">类型</a>
                    <a id="acreage">面积</a>
                </div>
            </div>

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

<div id="wrapper">
    <div id="scroller">
        <div>
            <p>
                <img src="../img/img.jpg">
            </p>
            <ul class="list-unstyled">
                <li class="multiLine_omit">买卖二手房，只收0.5%的佣金，让您满意服务。买卖二手房，只收0.5%的佣金，让
您满意服务。</li>
                <li>宝瓶小区</li>
                <li>
                    <span>2室1厅</span>
                    <span style="margin-left:20px;">54平米</span>
                </li>
                <li>
                    <span class="label">地铁房</span>
                    <span class="label">学区房</span>
                    <span class="label">一手房</span>
                    <span class="pull-right">
                        <em>140万</em>
                    </span>
                </li>
            </ul>   
        </div>
        <div>
            <p>
                <img src="../img/img.jpg">
            </p>
            <ul class="list-unstyled">
                <li>
                    <span>张江公馆</span>
                    <span class="pull-right">别墅</span>
                </li>
                <li>高科中路2810弄（近镇宁路）浦东高.</li>
                <li>促销活动：7/30-8/1 房源紧张，尽早</li>
                <li>
                    <span class="label">地铁房</span>
                    <span class="label">学区房</span>
                    <span class="label">全装修</span>
                    <span class="pull-right">
                        <em>2.35万</em>/m<em>2</em>
                    </span>
                </li>
            </ul>   
        </div>
        <div>
            <p>
                <img src="../img/img.jpg">
            </p>
            <ul class="list-unstyled">
                <li class="multiLine_omit">买卖二手房，只收0.5%的佣金，让您满意服务。买卖二手房，只收0.5%的佣金，让
您满意服务。</li>
                <li>宝瓶小区</li>
                <li>
                    <span>2室1厅</span>
                    <span style="margin-left:20px;">54平米</span>
                </li>
                <li>
                    <span class="label">地铁房</span>
                    <span class="label">学区房</span>
                    <span class="label">一手房</span>
                    <span class="pull-right">
                        <em>140万</em>
                    </span>
                </li>
            </ul>   
        </div>
        <div>
            <p>
                <img src="../img/img.jpg">
            </p>
            <ul class="list-unstyled">
                <li class="multiLine_omit">买卖二手房，只收0.5%的佣金，让您满意服务。买卖二手房，只收0.5%的佣金，让
您满意服务。</li>
                <li>宝瓶小区</li>
                <li>
                    <span>2室1厅</span>
                    <span style="margin-left:20px;">54平米</span>
                </li>
                <li>
                    <span class="label">地铁房</span>
                    <span class="label">学区房</span>
                    <span class="label">一手房</span>
                    <span class="pull-right">
                        <em>140万</em>
                    </span>
                </li>
            </ul>   
        </div>
        <div>
            <p>
                <img src="../img/img.jpg">
            </p>
            <ul class="list-unstyled">
                <li class="multiLine_omit">买卖二手房，只收0.5%的佣金，让您满意服务。买卖二手房，只收0.5%的佣金，让
您满意服务。</li>
                <li>宝瓶小区</li>
                <li>
                    <span>2室1厅</span>
                    <span style="margin-left:20px;">54平米</span>
                </li>
                <li>
                    <span class="label">地铁房</span>
                    <span class="label">学区房</span>
                    <span class="label">一手房</span>
                    <span class="pull-right">
                        <em>140万</em>
                    </span>
                </li>
            </ul>   
        </div>
        <div>
            <p>
                <img src="../img/img.jpg">
            </p>
            <ul class="list-unstyled">
                <li class="multiLine_omit">买卖二手房，只收0.5%的佣金，让您满意服务。买卖二手房，只收0.5%的佣金，让
您满意服务。</li>
                <li>宝瓶小区</li>
                <li>
                    <span>2室1厅</span>
                    <span style="margin-left:20px;">54平米</span>
                </li>
                <li>
                    <span class="label">地铁房</span>
                    <span class="label">学区房</span>
                    <span class="label">一手房</span>
                    <span class="pull-right">
                        <em>140万</em>
                    </span>
                </li>
            </ul>   
        </div>
    </div>
</div>
<footer class="footer text-center navbar-fixed-bottom">
    拨打400-123-4567
</footer>


</body>
</html>