<!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>{% if houseType == 0%}新房列表{% elseif houseType == 1 %}二手房列表{% elseif houseType == 2 %}租房列表{% endif %}</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 }}?houseType={{ houseType }}&cityId={{ item.id }}"{% if(item.id == cityId) %} class="active"{% endif %}>{{ item.value }}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="has-feedback pull-right">
        <form id="searchForm" method="post">
            <input type="text" class="form-control" placeholder="输入楼盘名/地段名搜索" id="searchText">
            <span class="glyphicon glyphicon-search form-control-feedback" id="searchBtn"></span>
        </form>
    </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="#" class="active">不限</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="#" class="active">不限</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="#" class="active">不限</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="#" class="active">不限</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="#" class="active">不限</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="feature">特色</a>
                    {% endif %}
                </div>
            </div>

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

<div id="wrapper">
    <div id="scroller">
    </div>
</div>
<footer class="footer text-center navbar-fixed-bottom">
    <a href="tel:400-123-4567">400-123-4567</a>
</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 feature = {{select.feature}};

    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 = "value";
        $.each(other_item,function(i,item){
            other.append('<a data-id="'+item[roomAndAcreageKey]+'">'+item.value+'</a>');
        });
        other.attr("type","acreage");
        $("#roomId,#acreage,#feature").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";
            }else if(id == 'feature'){
                other_item = feature;
                other.attr("type","feature");
                roomAndAcreageKey = "id";
            }
            if(searchData[id] != -1){
                other.children(":first").removeClass('active');
            }else{
                other.children(":first").addClass('active');
            }
            $.each(other_item,function(i,item){
                var active = searchData[id]==item[roomAndAcreageKey]?' class="active"':'';
                other.append('<a data-id="'+item[roomAndAcreageKey]+'"'+active+'>'+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
                    $(this).parent().find('a').removeClass('active');
                    $(this).addClass('active');
                    $(".btn-group").removeClass("open");
                    scroller.html('');
                    ajax_get_house('{{ url }}', loading, searchData, scroller);
                }
            }
        });
        $('#searchBtn').bind('tap',function(){
            searchNameAndAddress();
        });
        $('#searchForm').submit(function(){
            searchNameAndAddress();
            return false;
        });
        ajax_get_house('{{ url }}', loading, searchData, scroller);
    });
    function searchNameAndAddress(){
        searchData.index = 0;
        searchData.searchText = $('#searchText').val();
        scroller.html('');
        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: '',
        feature: -1,
        houseType: houseType,
        index: 0
    };
</script>

</body>
</html>