<!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 class="btn btn-block" data-toggle="modal" data-target="#scoreDiv">评分</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>
<div class="modal fade" id="scoreDiv">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <h4 class="modal-title">评分</h4>
            <p>
                <input type="hidden" id="score" name="score" value="0">
                <input type="hidden" name="user_id" value="{{ user_id }}">
                <input type="hidden" name="consultant_id" value="{{ consultant_id }}">
            </p>
            <p>
                <button id="add_score" type="button" class="btn btn-lg">评分</button>
                <button type="button" class="btn btn-lg" data-dismiss="modal">取消</button>
            </p>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    var houseType = 0;
    var userId = '{{ consultant_id }}';
    var index = 0;
    var myScroll;
    var template;
    var loading;
    var score = 0;
    $(document).ready(function () {
        $('#score').rating({
            min: 0,
            max: 5,
            step: 0.5,
            size: 'sm',
            showClear: false,
            showCaption: false,
            hoverEnabled: false,
            starCaptions: function (data) {
                console.log(data);
                score = data;
                $(this).val(score);
            }
        });
        $("#add_score").bind("tap", function () {
            if (score > 0) {
                $.ajax({
                    type: 'POST',
                    url: '{{ url }}/wp-admin/admin-ajax.php/',
                    data: 'action=add_score&user_id={{user_id}}&consultant_id={{consultant_id}}&score='+$("#score").val(),
                    success: function (data) {
                        if (data.code == 2000) {
                            alert('评分成功');
                        }else{
                            alert('您已经提交过评分了');
                        }
                    },
                    complete:function(){
                        $("#scoreDiv").modal('toggle');
                    }
                });
            } else {
                alert('请选择后再评分');
            }
        });
        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>