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

        $(document).ready(function(){
            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);
            var sliderTap = false;
            $("#slider").bind("tap",function(){
                $("#carouselModal").modal('show');

                var carousel = $("#carousel_wrapper");
                var carouselWidth = carousel.width();

                if (!sliderTap) {
                    $.each(JSON.parse('{{ images|json_encode() }}'), function (index, item) {
                        carousel.find('#carousel_scroller ul').append('<li><p><span>' +
                        '<img src="{{ siteUrl }}' + item.path + '">' +
                        '</span></p></li>');
                        $('#carousel_indicator').append('<li/>');
                    });
                    sliderTap = true;
                }

                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");
                });
                sliderTap = true;
                return false;
            });
            $("#carouselModal,#photoModal").bind("click",function(){
                $(this).modal('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}}";
            });

            $(".recommendCont").on("tap",".row",function(){
                window.location.href =  '{{ siteUrl }}/?page=detail&hid=' + $(this).attr("data-id");
            });

            $("#scroller").on("tap","*[data-image-url]",function(){
                $("#photoModal").find("img").eq(0).attr("src",$(this).attr("data-image-url"));
                $("#photoModal").modal("show");
                return false;
            });

            $(".iconList > li").click(function(){
                location.href = $(this).attr("data-url");
            });
        });
    </script>
</head>
<body>

<p class="collect"></p>
<ul class="list-unstyled iconList">
    {% if result.publicize %}
    <li class="video" data-url="{{result.publicize}}"></li>
    {% endif %}
    {% if result.threeD %}
    <li class="eye" data-url="{{result.threeD}}"></li>
    {% endif %}
    {% if result.roundLook %}
    <li class="panorama" data-url="{{result.roundLook}}"></li>
    {% endif %}
</ul>
<!-- 图片滚动 -->
<div class="addWrap">
    <div id="slider" class="swipe">
        <div class="swipe-wrap">
            {% for item in normalImages %}
                <div>
                    <img src="{{siteUrl}}{{item.path}}">
                </div>
            {% endfor %}
        </div>
    </div>
    <ul id="indicator" class="list-inline text-center">
        {% for i in 1..normalImages|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">
    <a class="collapsed" data-toggle="collapse" href="#latestNews">
        <p class="detail_title">最新动态<span class="pull-right"></span></p>
    </a>
    <p id="latestNews" style="min-height:20px;display:block;overflow:hidden;height:0;">{{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 data-image-url="{{siteUrl}}{{ item.path }}">
                        <p><img src="{{siteUrl}}{{ item.smallPath }}"></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>开发商：{{result.developer}}</li>
        <li>建筑类型：{{result.room}}</li>
        <li>装修状况：{{result.decoration}}</li>
        <li>容积率：{{result.volume_rate}}</li>
        <li>规划户数：{{result.households}}</li>
        <li>物业公司：{{result.property_management}}</li>
        <li>入住时间：{{result.check_in_time}}</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>
{% if recommends %}
    <div class="detail_row recommend">
        <p class="detail_title">推荐房源</p>
        <div class="recommendCont">
            {% for item in recommends %}
                <div data-id="{{item.id}}" class="row">
                    <p>
                        {% if item.path %}
                            <img src="{{siteUrl}}{{item.path}}">
                        {% else %}
                            <img src="{{siteUrl}}/wp-content/themes/tospur/img/img.jpg">
                        {% endif %}
                    </p>
                    <ul class="list-unstyled">
                        <li class="address">
                            <span>{{item.name}}</span>
                            <span class="pull-right">{{item.literal}}</span>
                        </li>
                        <li>{{item.address}}</li>
                        <li>{{item.latest_news}}</li>
                        <li>
                            {% for tag in item.tags|split(',') %}
                                <span class="label">{{tag}}</span>
                            {% endfor %}
                        <span class="pull-right">
                            <em>
                                {% if item.average_price>=10000 %}
                                    {{(item.average_price/10000)|round(2, 'floor')}}万
                                {% else %}
                                    {{item.average_price}}元
                                {% endif %}
                            </em>/m<em>2</em>
                        </span>
                        </li>
                    </ul>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}
{% if consultant %}
    <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>
{% endif %}

<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" id="carouselModal">
    <div id="carousel_wrapper">
        <div id="carousel_scroller">
            <ul class="list-inline text-nowrap">
            </ul>
        </div>
        <ul id="carousel_indicator" class="list-inline text-center indicators">
        </ul>
    </div>
</div>
<div class="modal" id="photoModal">
    <p>
        <span><img></span>
    </p>
</div>
</body>
</html>