<!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/consultantShop.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/star-rating.min.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/star-rating.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/public.js"></script>
</head>
<body>

<div class="jumbotron">
    <ul class="list-unstyled">
        <li class="col-xs-4 text-center">
            <img src="{{ consultant.imageUrl | default(default_head) }}" data-attr="">
        </li>
        <li class="col-xs-5">
            <p>{{ consultant.display_name }}</p>
            <div class="star-rating rating-xs rating-disabled" style="font-size:20px;height:30px;">
                <div class="rating-container rating-gly-star" data-content="">
                    <div class="rating-stars" data-content="" style="width: {{ consultant.average_score*20 }}%;" data-attr="score"></div>
                </div>
            </div>
            <p>同策房屋</p>
        </li>
        <li class="col-xs-3">
            <a href="{{ consultant_score_url }}" class="btn btn-block">评分</a>
        </li>
    </ul>
    <h4>诚信宣言</h4>
    <div id="people_wrapper">
        <div id="people_scroller">
            {{ consultant.introduction }}
        </div>
    </div>
</div>

<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>
<footer class="footer navbar-fixed-bottom">
    <a class="btn btn-wechat">
        <span></span>微信联系
    </a>
    <a href="tel:{{ consultant_mobile }}" class="btn btn-phone">
        <span></span>电话联系
    </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>
    var houseType = 0;
    var index = 0;
    var myScroll;
    var template;
    var loading;
    $(document).ready(function () {
        var searchData = {
            action: 'search_house',
            cityId: {{ consultant.cityId }},
            houseType: houseType,
            userType: 1,
            userId: {{ consultant_id }},
            index: 0
        };
        var tabPane = $('[data-house=' + houseType + ']');
        template = $('#template_' + houseType).html();
        loading = $('#loading');
        ajax_get_house('{{ url }}', loading, searchData, tabPane);
        var peopleScroll = new IScroll('#people_wrapper');
        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>