<!DOCTYPE html>
<html>
<head>
    <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>{{result.community_name}}</title>
    <!--CSS-->
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/detail.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/swipe.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.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/bootstrap.min.js"></script>
    <script type="text/javascript">
        var myScroll;
        var carouselScroll;
        window.addEventListener("load",function(){
            var bullets = document.getElementById('indicator').getElementsByTagName('li');
            window.mySwipe = new Swipe(document.getElementById('slider'), {
                auto: 3000,
                callback: function(pos) {
                    var i = bullets.length;
                    while (i--) {
                        bullets[i].className = ' ';
                    }
                    bullets[pos].className = 'active';
                }
            });
            myScroll = new IScroll('#wrapper', {
                eventPassthrough: true,
                scrollX: true,
                scrollY: false,
                preventDefault: false,
                click: true
            });

        },false);

        $(document).ready(function(){
            $("#slider").bind("tap",function(){
                $("#carousel_wrapper").parent().show();
                var carousel = $("#carousel_wrapper");
                var carouselWidth = carousel.width();
                carousel.find("#carousel_scroller ul li").css({"width":carouselWidth});
                carousel.find("#carousel_indicator li").removeClass("carousel_active");
                carousel.find("#carousel_indicator li:first").addClass("carousel_active");

                carouselScroll = new IScroll('#carousel_wrapper', {
                    bounce: false,
                    scrollX: true,
                    scrollY: false,
                    momentum: false,
                    snap: true,
                    snapSpeed: 400,
                    click: true
                });
                carouselScroll.on('scrollEnd',function(){
                    $("#carousel_indicator li").removeClass("carousel_active");
                    $("#carousel_indicator li").eq(this.currentPage.pageX).addClass("carousel_active");
                });
                return false;
            });
            $("#carousel_wrapper").parent().bind("click",function(){
                $(this).hide();
                return false;
            });

            $(".collect").bind("tap",function(){
                $.ajax({
                    type: 'POST',
                    url: '{{ siteUrl }}/wp-admin/admin-ajax.php/',
                    data: 'action=add_collect&hid={{hid}}',
                    success: function (data) {
                        if (data.code == 2000) {
                            alert('收藏成功');
                        } else {
                            alert('收藏失败');
                        }
                    }
                });
            });

            $(".map").bind("tap",function(){
                location.href = "{{ siteUrl }}/?page=map&a={{result.address}}&c={{cityName}}&hn={{result.community_name}}<br>{{result.address}}&p={{result.location}}";
            });

            $(".col-xs-2").bind("tap",function(){
                location.href = "{{siteUrl}}?page=consultant_info&consultant_id={{ consultant[0].id }}";
            });
        });
    </script>
</head>
<body>

<p class="collect">
    <i class="iconfont">&#xe604;</i>
</p>

<!-- 图片滚动 -->
<div class="addWrap">
    <div id="slider" class="swipe">
        <div class="swipe-wrap">
            {% for item in images %}
            <div>
                <img src="{{siteUrl}}{{item.path}}">
            </div>
            {% endfor %}
        </div>
    </div>
    <ul id="indicator" class="list-inline text-center">
        {% for i in 1..images|length %}
        <li {% if loop.index0 == 0 %}class="active"{% endif %}></li>
        {% endfor %}
    </ul>
</div>
<!-- /图片滚动 -->

<div class="detail_row priceCont">
    <p class="detail_title">{{result.name}}</p>
    <!-- <ul class="list-unstyled">
        <li class="col-xs-7 price">
            均价：<span><em>2.35万</em>/m<em>2</em></span>
        </li>
        <li class="col-xs-5">
            <button type="button" class="btn btn-xs">房贷计算器</button>
        </li>
    </ul>-->

    <!-- 二手房详细 -->
    <ul class="list-unstyled">
        <li class="col-xs-7">房源编号：{{result.house_number}}</li>
        <li class="col-xs-5">
            <button type="button" class="btn btn-xs">房贷计算器</button>
        </li>
        <li class="col-xs-7 price">
            售价：<span><em>{{(result.total_price/10000)|round(2, 'floor')}}万</em></span>
        </li>
        <li class="col-xs-5">单价：{{(result.average_price/10000)|round(2, 'floor')}}万</li>
    </ul>
    <!-- 二手房详细 -->
</div>
<div class="detail_row">
    <a class="collapsed" data-toggle="collapse" href="#collapseExample">
        <p class="detail_title">基本信息<i class="iconfont pull-right"></i></p>
    </a>
    <ul class="list-unstyled collapse infoCont" id="collapseExample">
        <li>户型：{{result.covered_area}}</li>
        <li>面积：{{result.covered_area}}</li>
        <li>楼层：{{result.floor}}</li>
        <li>朝向：{{result.faceto}}</li>
        <li>装修：{{result.decoration}}</li>
        <li>年代：{{result.age}}</li>
    </ul>
</div>
<div class="detail_row">
    <p class="detail_title">房源点评</p>
    <p>{{result.overview}}</p>
</div>
<div class="detail_row">
    <p class="detail_title">位置及周边</p>
    <ul class="list-unstyled">
        <li>地址：{{result.address}}</li>
        <li>交通线路：{{result.traffic}}</li>
        <li>周边配套：{{result.periphery}}</li>
    </ul>
    <p class="map">
        <span></span>
    </p>
</div>
<div class="detail_row">
    <p class="detail_title pull-left">推荐房源</p>
    <ul class="list-unstyled recommendCont">
        {% for item in recommends %}
        <a href="{{siteUrl}}?page=detail&hid={{item.id}}"><li class="col-xs-3"><p style="background-image:url({{siteUrl}}{{ item.path }});"></p></li></a>
        {% endfor %}
    </ul>
</div>
{% if consultant[0] %}
<footer class="footer navbar-fixed-bottom">
        <ul class="list-unstyled">
            <li class="col-xs-2">
                {% if item.imageUrl %}
                    <img src="{{ consultant[0].imageUrl }}">
                {% else %}
                    <img src="{{ theme }}/img/head.png">
                {% endif %}
            </li>
            <li class="col-xs-5">
                <div>
                    <span class="pull-left">{{consultant[0].name}}</span>
                    <div class="star-rating rating-xs rating-disabled" style="font-size:14px;height:25px;">
                        <div class="rating-container rating-gly-star" data-content="">
                            <div class="rating-stars" data-content="" style="width: {{consultant[0].average_score*2*10}}%;"></div>
                        </div>
                    </div>
                </div>
                <div>置业顾问</div>
            </li>
            <li class="col-xs-5 text-right">
                {% if consultant[0].mobile %}
                    <a href="tel:{{consultant[0].mobile}}" class="btn btn-phone">
                        <span></span>
                        <span>电话联系</span>
                    </a>
                {% endif %}
                <!--<a href="#" class="btn btn-wechat">
                    <span></span>
                    <span>微信联系</span>
                </a>-->
            </li>
        </ul>
    <!-- 二手房详细 -->
</footer>
{% endif %}

<div class="modal">
    <div id="carousel_wrapper">
        <div id="carousel_scroller">
            <ul class="list-inline text-nowrap">
                {% for item in images %}
                <li>
                    <p>
                        <span><img src="{{siteUrl}}{{item.path}}"></span>
                    </p>
                </li>
                {% endfor %}
            </ul>
        </div>
        <ul id="carousel_indicator" class="list-inline text-center indicators">
            {% for i in 1..images|length %}
            <li></li>
            {% endfor %}
        </ul>
    </div>
</div>


</body>
</html>