<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 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>
        html, body {
            width: 100%;
            height: 100%;
        }

        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            overflow: hidden;
        }

        #scroller {
            position: absolute;
            width: 100%;
        }

        #pullUp {
            height: 40px;
            position: absolute;
            bottom: -40px;
        }

        .star-rating {
            display: inline-block;
        }
    </style>
    <link rel="stylesheet" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ theme }}/css/star-rating.min.css">
    <script src="{{ theme }}/js/jquery.min.js"></script>
    <script src="{{ theme }}/js/star-rating.min.js"></script>
    <script src="{{ theme }}/js/iscroll.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <label for="city"></label>
        <select id="city">
            {% for item in city %}
            <option value="{{ item.id }}"
            {% if(item.id==city_id) %}selected="selected"{% endif %}>{{ item.value }}</option>
            {% endfor %}
        </select>
        <a href="{{ url }}/?page=consultant_list&city_id={{ city_id }}" id="change">切换</a>

        <div id="pullUp">
            <span>上拉刷新</span>
        </div>
    </div>
</div>
<div id="template" style="display: none">
    <p data-attr="name"></p>

    <div style="height: 42px;">
        <span>星级：</span><input type="hidden" value="" data-attr="score">
    </div>
    <span data-attr="mobile"></span>
    <p><a href="" data-attr="url">&gt;</a></p>
</div>
<script>
    var index = 0;
    var myScroll;
    var template;
    var consultant_info_url = '{{ url }}/?page=consultant_info';
    $(document).ready(function () {
        var i = 0;
        $('#city').on('change', function () {
            var city_id = $(this).find('option:selected').val();
            $('#change').attr('href', '{{ url }}/?page=consultant_list&city_id=' + city_id);
        });
        var pullUpFlag = false;
        myScroll = new IScroll('#wrapper');
        myScroll.on("scrollStart", function () {
            console.log(this.maxScrollY);
            console.log(this.y);
            if (this.maxScrollY >= this.y) {
                pullUpFlag = true;
            }
        });
        myScroll.on("scrollEnd", function () {
            if (pullUpFlag) {
                pullUpFlag = false;
                ajax_get_consultant();
            }
        });
        template = $('#template').html();
        ajax_get_consultant();
    });

    function ajax_get_consultant() {
        $.ajax({
            type: 'POST',
            url: '{{ url }}/wp-admin/admin-ajax.php/',
            data: 'action=get_consultant&city_id={{ city_id }}&index=' + index,
            success: function (data) {
                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]').val(value.average_score);
                        div.find('[data-attr=mobile]').text('电话联系：' + value.mobile);
                        div.find('[data-attr=url]').attr('href', consultant_info_url + '&consultant_id=' + value.id);
                        $('#pullUp').before(div);
                    });
                    $('input[data-attr=score]').rating({
                        size: 'xs',
                        showClear: false,
                        showCaption: false,
                        hoverEnabled: false,
                        readonly: true
                    });
                    index += 20;
                    myScroll.refresh();
                } else {
                }
            }
        });
    }
</script>
</body>
</html>