<!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" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ theme }}/css/star-rating.min.css">
    <link rel="stylesheet" href="{{ theme }}/css/consultantList.css">
    <script src="{{ theme }}/js/iscroll.js"></script>
    <script src="{{ theme }}/js/jquery.min.js"></script>
    <script src="{{ theme }}/js/jquery.mobile.custom.min.js"></script>
    <script src="{{ theme }}/js/bootstrap.min.js"></script>
    <script src="{{ theme }}/js/star-rating.min.js"></script>
    <script src="{{ theme }}/js/public.js"></script>
</head>
<body>
<div class="search">
    <div class="btn-group pull-left" id="cityGroup">
        <a class="btn" id="cityName">{{ city_name }}<span></span></a>
        <div id="city_wrapper" class="dropdown-menu">
            <div id="city_scroller">
                {% for item in city %}
                <a href="{{ url }}/?page=consultant_list&city_id={{ item.id }}"{% if(item.id==city_id) %} class="active"{% endif %}>{{ item.value }}</a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<div id="wrapper">
    <div id="scroller">
    </div>
</div>
<div id="template" style="display: none">
    <ul class="list-unstyled">
        <li class="col-xs-3">
            <img data-attr="image">
        </li>
        <li class="col-xs-5">
            <p data-attr="name"></p>
            <div class="star-rating rating-xs rating-disabled" style="font-size:19px;height:28px;">
                <div class="rating-container rating-gly-star" data-content="">
                    <div class="rating-stars" data-content="" style="" data-attr="score"></div>
                </div>
            </div>
            <p>同策房屋</p>
        </li>
        <li class="col-xs-4" data-id="mobile">
            <a class="btn btn-phone" data-attr="mobile">
                <span></span>电话联系
            </a>
        </li>
    </ul>
</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 class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <h4>提示</h4>
            <p id="notice">该置业顾问还没有设置电话</p>
            <button type="button" class="btn btn-lg btn-block" data-dismiss="modal">确认</button>
        </div>
    </div>
</div>
<script>
    var index = 0;
    var cityScroll;
    var myScroll;
    var template;
    var consultant_info_url = '{{ url }}/?page=consultant_info';
    var loading;
    $(document).ready(function () {
        loading = $('#loading');
        $('#cityGroup').tap(function () {
            var self = $(this);
            if (self.hasClass('open')) {
                self.removeClass('open');
            } else {
                self.addClass('open');
            }
            cityScroll.refresh();
        });
        cityScroll = new IScroll('#city_wrapper', {
            click: true
        });
        myScroll = scrollPullToRefresh(function () {
            ajax_get_consultant();
        });
        template = $('#template').html();
        ajax_get_consultant();
    });

    function ajax_get_consultant() {
        loading.show();
        $.ajax({
            type: 'POST',
            url: '{{ url }}/wp-admin/admin-ajax.php/',
            data: 'action=get_consultant&city_id={{ city_id }}&index=' + index,
            success: function (data) {
                loading.hide();
                if (data.code == 2000) {
                    $.each(data.result, function (index, value) {
                        var div = $('<div>');
                        div.append(template);
                        div.find('[data-attr=name]').text(value.display_name);
                        div.find('[data-attr=score]').attr('style', 'width: ' + value.average_score * 20 + '%');
                        var head = value.imageUrl;
                        if (!head) {
                            head = '{{ default_head }}';
                        }
                        div.find('[data-attr=image]').attr('src', head);

                        var mobile = div.find('[data-attr=mobile]');
                        if (!value.mobile) {
                            mobile.attr('disabled', true);
                        }

                        mobile.tap(function (e) {
                            if (value.mobile) {
                                window.location.href = 'tel:' + value.mobile;
                            } else {
                                $('#myModal').modal('show');
                            }
                            return false;
                        });

                        div.tap(function (e) {
                            window.location.href = consultant_info_url + '&consultant_id=' + value.id + '&mobile=' + value.mobile;
                        });
                        $('#scroller').append(div);
                    });
                    $('input[data-attr=score]').rating({
                        size: 'xs',
                        showClear: false,
                        showCaption: false,
                        hoverEnabled: false,
                        readonly: true
                    });
                    index += 20;
                    myScroll.refresh();
                } else {
                }
            }
        });
    }
</script>
</body>
</html>