<!DOCTYPE html>
<html>
<head lang="en">
    <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"/>
    <title>我的楼盘</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/myHouse.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>
<ul id="tab" class="list-unstyled btn-group-justified tab">
    <li class="btn-group active">
        <a href="#new" data-toggle="tab" class="btn">新房</a>
    </li>
    <li class="btn-group">
        <a href="#secondhand" data-toggle="tab" class="btn">二手房</a>
    </li>
    <li class="btn-group">
        <a href="#rent" data-toggle="tab" class="btn">租房</a>
    </li>
</ul>
<div id="wrapper">
    <div id="scroller" class="tab-content">
        <div class="tab-pane fade in active" data-house="0" id="new"></div>
        <div class="tab-pane fade" data-house="1" id="secondhand"></div>
        <div class="tab-pane fade" data-house="2" id="rent"></div>
    </div>
</div>
<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>
    var houseType = 0;
    var userId = '{{ user_id }}';
    var myScroll;
    var template;
    var loading;
    $(document).ready(function () {
        var searchData = {
            action: 'search_house',
            houseType: houseType,
            userType: 0,
            userId: userId,
            index: 0
        };
        var tabPane = $('[data-house=' + houseType + ']');
        template = $('#template_' + houseType).html();
        loading = $('#loading');
        ajax_get_house('{{ url }}', loading, searchData, tabPane);
        myScroll = scrollPullToRefresh(function(){
            ajax_get_house('{{ url }}', loading, searchData, tabPane);
        });
        var aTab = $('a[data-toggle=tab]');
        aTab.on('show.bs.tab', function (e) {
            if (e) {
                var previous = $(e.relatedTarget).parent().index();
                $('[data-house=' + previous + ']').html('');
                houseType = $(e.target).parent().index();
                tabPane = $('[data-house=' + houseType + ']');
                template = $('#template_' + houseType).html();
                searchData.houseType = houseType;
                searchData.index = 0;
                myScroll.scrollTo(0, 0);
                setTimeout(function () {
                    myScroll.refresh();
                    ajax_get_house('{{ url }}', loading, searchData, tabPane);
                }, 200);
            }
        })
    });
</script>
</body>
</html>