<!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"/>
    <meta name="format-detection" content="telephone=no"/>
    <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('收藏失败');
                        }
                    }
                });
            });

            $('#calculator').bind('tap',function(){
                window.location.href = '{{ siteUrl }}/?page=loan_calculator';
            });

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

<p class="collect">
</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>
                        {% if result.average_price>=10000 %}
                            {{(result.average_price/10000)|round(2, 'floor')}}万
                        {% else %}
                            {{result.average_price}}元
                        {% endif %}
                    </em>/m<em>2</em></span>
        </li>
        <li class="col-xs-5">
            <button type="button" class="btn btn-xs" id="calculator">房贷计算器</button>
        </li>
    </ul>
</div>
<div class="detail_row">
    <p class="detail_title">最新动态</p>
    <p class="single_omit">{{result.latest_news}}</p>
</div>
<div class="detail_row">
    <p class="detail_title">主力户型</p>
    <div id="wrapper">
        <div id="scroller">
            <ul class="list-inline text-nowrap">
                {% for item in mainImage %}
                    <li>
                        <p><img src="{{siteUrl}}{{ item.path }}"></p>
                        <p>{{item.type}}</p>
                        <p>{{item.area}}/m<em>2</em></p>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
<div class="detail_row">
    <a class="collapsed" data-toggle="collapse" href="#collapseExample">
        <p class="detail_title">位置及周边<span class="pull-right"></span></p>
    </a>
    <ul class="list-unstyled collapse" id="collapseExample" style="min-height:60px;display:block;overflow:hidden;height:0;">
        <li>地址：{{result.address}}</li>
        <li>交通线路：{{result.traffic}}</li>
        <li>周边配套：{{result.periphery}}</li>
    </ul>
    <p class="map">
    </p>
</div>
<div class="detail_row">
    <a class="collapsed" data-toggle="collapse" href="#collapseInfoCont">
        <p class="detail_title">基本信息<span class="pull-right"></span></p>
    </a>
    <ul class="list-unstyled collapse infoCont" id="collapseInfoCont" style="min-height:60px;display:block;overflow:hidden;height:0;">
        <li>开发商：<span>{{result.developer}}</span></li>
        <li>建筑类型：{{result.periphery}}</li>
        <li>装修状况：{{result.decoration}}</li>
        <li>容积率：{{result.volume_rate}}</li>
        <li>规划户数：{{result.households}}</li>
        <li>物业公司：{{result.property_management}}</li>
        <li>入住时间：<span>{{result.check_in_time}}</span></li>
        <li>产权年限：{{result.property_age}}</li>
        <li>建筑面积：{{result.covered_area}}</li>
        <li>绿化率：{{result.greening_rate}}</li>
        <li>车位数：{{result.parking_spaces}}</li>
        <li>物业费：{{result.property_money}}</li>
    </ul>
</div>
<div class="detail_row">
    <a class="collapsed" data-toggle="collapse" href="#collapseSummary">
        <p class="detail_title">楼盘概述<span class="pull-right"></span></p>
    </a>
    <p class="collapse" id="collapseSummary" style="min-height:60px;display:block;overflow:hidden;height:0;">
        {{result.overview}}
    </p>
</div>
<div class="detail_row">
    <p class="detail_title pull-left">推荐房源</p>
    <div class="detail_row recommend">
        <p class="detail_title">推荐房源</p>
        <div class="recommendCont">

        </div>
    </div>
    <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>
<div class="detail_row" id="consultantDiv">
    <p class="detail_title">置业顾问</p>
    <ul class="list-unstyled peopleCont">
        {% for item in consultant %}
            <a href="{{siteUrl}}?page=consultant_info&consultant_id={{ item.id }}">
            <li>
                <ol class="col-xs-2 text-center">
                    {% if item.imageUrl %}
                        <img src="{{ item.imageUrl }}">
                    {% else %}
                        <img src="{{ theme }}/img/head.png">
                    {% endif %}
                </ol>
                <ol class="col-xs-4">
                    <p>{{item.name}}</p>
                    <div class="star-rating rating-xs rating-disabled" style="font-size:15px;height:25px;">
                        <div class="rating-container rating-gly-star" data-content="">
                            <div class="rating-stars" data-content="" style="width: {{item.average_score*2*10}}%;"></div>
                        </div>
                    </div>
                </ol>
                <ol class="col-xs-6">
                    {% if not item.mobile %}
                        <a class="btn btn-xs btn-phone" disabled="disabled">
                    {% else %}
                        <a href="tel:{{item.mobile}}" class="btn btn-xs btn-phone">
                    {% endif %}
                        <span></span>电话联系
                    </a>
                    <a href="{{siteUrl}}?page=view&house_id={{hid}}&consultant_id={{item.id}}" class="btn btn-xs btn-booking">
                        <span></span>一键预约
                    </a>
                </ol>
            </li>
                </a>
        {% endfor %}
    </ul>
</div>

<footer class="footer navbar-fixed-bottom">
    <a href="#consultantDiv" class="btn">置业顾问</a>
    <a href="{{siteUrl}}?page=view&house_id={{hid}}" class="btn">预约看房</a>
    <!-- 二手房详细 -->
    <!--     <ul class="list-inline text-right">
            <li class="text-center phone">
                <p></p>
                <p>电话联系</p>
            </li>
            <li class="text-center wechat">
                <p></p>
                <p>微信联系</p>
            </li>
        </ul> -->
    <!-- 二手房详细 -->
</footer>

<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>