<!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>
    <style>
        #pullUp {
            height: 40px;
            position: absolute;
            bottom: -40px;
        }
    </style>
    <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>
</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 id="pullUp">
            <span>上拉刷新</span>
        </div>
    </div>
</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 index = 0;
    var myScroll;
    var template;
    $(document).ready(function () {
        var tabPane = $('[data-house=' + houseType + ']');
        template = $('#template_' + houseType).html();
        ajax_get_my_house(tabPane);
        var pullUpFlag = false;
        myScroll = new IScroll('#wrapper', {
            scrollbars: true,
            click: true
        });
        myScroll.on("scrollStart", function () {
            if (this.maxScrollY >= this.y) {
                pullUpFlag = true;
            }
        });
        myScroll.on("scrollEnd", function () {
            if (pullUpFlag) {
                pullUpFlag = false;
                ajax_get_my_house(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();
                index = 0;
                myScroll.scrollTo(0, 0);
                setTimeout(function () {
                    myScroll.refresh();
                    ajax_get_my_house(tabPane);
                }, 200);
            }
        })
    });

    function ajax_get_my_house(tabPane) {
        $.ajax({
            type: 'POST',
            url: '{{ url }}/wp-admin/admin-ajax.php/',
            data: 'action=get_my_house&houseType=' + houseType + '&userType=0&userId=' + userId + '&index=' + index,
            success: function (data) {
                if (data.code == 2000) {
                    $.each(data.result, function (index, value) {
                        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>');
                            });
                        }
                        tabPane.append(div);
                    });
                    index += 10;
                    myScroll.refresh();
                } else {
                }
            }
        });
    }
</script>
</body>
</html>