<!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>
    <!--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
            });
            var pullUpFlag = false;
            myScroll.on("scrollStart", function () {
                if (this.maxScrollY >= this.y) {
                    pullUpFlag = true;
                }
            });
            myScroll.on("scrollEnd", function () {
                if (pullUpFlag) {
                    pullUpFlag = false;
                    getHouse();
                }
            });
            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}};

        var scroller;
        $(document).ready(function(){
            scroller = $('#scroller');
            $(".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","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','a',function(){
                searchData.index = 0;
                scroller.html('');
                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");
                        console.log(JSON.stringify(searchData));
                        getHouse();
                    }
                }
            });
            getHouse();
        });
        var searchData = {
            action:"search_house",
            cityId:{{cityId}},
            districtId:-1,
            plateId:-1,
            totalPrice:-1,
            buildPropertyId:-1,
            roomId:-1,
            acreage:-1,
            searchText:'',
            index:0
        };
        function getHouse(){
            $.ajax({
                type: "POST",
                url: "/tospur/wp-admin/admin-ajax.php",
                data: searchData,
                success:function(data){
                    if (data.code == 2000) {
                        $.each(data.result, function (index, value) {
                            var houseType= value.house_type;
                            var template = $('#template_' + houseType).html();
                            if(data.tags)
                            var data_tags = data.tags[value.id];
                            if(data.images)
                                var data_images = data.images[value.id];
                            var div = $('<div class="row">');
                            div.append(template);
                            div.find('[data-attr=name]').text(value.name);
                            var tags = div.find('[data-attr=tags]');
                            if (houseType == 0) {
                                div.find('[data-attr=type]').text(value.literal);
                                div.find('[data-attr=address]').text(value.address);
                                div.find('[data-attr=latest_news]').text(value.latest_news);
                                div.find('[data-attr=price]').html('<em>' + (value.average_price / 10000).toFixed(2) + '万</em>/m<em>2</em>');
                            } else if (houseType == 1) {
                                div.find('[data-attr=community]').text(value.community_name);
                                div.find('[data-attr=apartment]').text(value.bp_literal);
                                div.find('[data-attr=covered_area]').text(value.covered_area + '平米');
                                div.find('[data-attr=price]').html('<em>' + value.total_price + '万</em>');
                            } else if (houseType == 2) {
                                div.find('[data-attr=community]').text(value.community_name);
                                div.find('[data-attr=apartment]').text(value.bp_literal);
                                div.find('[data-attr=covered_area]').text(value.covered_area + '平米');
                                div.find('[data-attr=decoration]').text(value.decoration);
                                div.find('[data-attr=price]').html('<em>' + value.rent + '</em>/月');
                            }
                            var image = div.find('[data-attr=image]');
                            if (data_images) {
                                image.attr('src', data_images);
                            }
                            if (data_tags) {
                                $.each(data_tags, function (k, v) {
                                    tags.prepend('<span class="label">' + v + '</span>');
                                });
                            }
                            scroller.append(div);
                        });
                        searchData.index += 10;
                        myScroll.refresh();
                    }
                }
            });
        }
    </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="roomId" 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>
</div>
<footer class="footer text-center navbar-fixed-bottom">
    拨打400-123-4567
</footer>

<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>

</body>
</html>