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

        $(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/>');
                    });
                }

                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;
            });
            $("#carouselModal").bind("click",function(){
                $("#carouselModal").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('收藏失败');
                        }
                    }
                });
            });

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

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

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

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

<p class="collect">
    <i class="iconfont"></i>
</p>

<!-- 图片滚动 -->
<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>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>
        {% if result.house_type == 1%}
            <li class="col-xs-5">
                <button type="button" class="btn btn-xs" id="calculator">房贷计算器</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">单价：
                {% if result.average_price>=10000 %}
                    {{(result.average_price/10000)|round(2, 'floor')}}万
                {% else %}
                    {{result.average_price}}
                {% endif %}
            </li>
        {% else %}
            <li class="col-xs-5">
            </li>
            <li class="col-xs-7 price">
                租金：<span><em>{{result.rent}}/月</em></span>
            </li>
        {% endif %}
    </ul>
    <!-- 二手房详细 -->
</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 infoCont" id="collapseExample" style="min-height:60px;display:block;overflow:hidden;height:0;">
        <li>户型：{{result.buildproperty}}</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">
    <a class="collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false">
        <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: 0px;" aria-expanded="false">
        {{result.overview}}
    </p>
</div>
<div class="detail_row">
    <a class="collapsed" data-toggle="collapse" href="#collapseAddress">
        <p class="detail_title">位置及周边<span class="pull-right"></span></p>
    </a>
    <ul class="list-unstyled collapse" id="collapseAddress" 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>
{% 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="multiLine_omit">
                        {{item.name}}
                    </li>
                    <li>{{item.community_name}}</li>
                    <li>
                        <span>{{item.value}}</span>
                        {% if result.house_type == 2 %}
                            <span>{{item.decoration}}</span>
                        {% endif %}
                        <span>{{item.covered_area}}平米</span>
                    </li>
                    <li>
                        {% for tag in item.tags|split(',') %}
                            {% if loop.index <=3 %}
                                <span class="label">{{tag}}</span>
                            {% endif %}
                        {% endfor %}
                        <span class="pull-right">
                            {% if result.house_type == 1 %}
                                <em>
                                    {{(item.total_price/10000)|round(2, 'floor')}}万
                                </em>
                            {% elseif result.house_type == 2 %}
                                <em>
                                    {% if item.rent>=10000 %}
                                    {{(item.rent/10000)|round(2, 'floor')}}万
                                    {% else %}
                                    {{item.rent}}
                                    {% endif %}
                                    /月
                                </em>
                            {% endif %}
                        </span>
                    </li>
                </ul>
            </div>
            {% endfor %}
        </div>
    </div>
{% endif %}
{% 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="{{siteUrl}}?page=view&house_id={{hid}}&consultant_id={{consultant[0].id}}" class="btn btn-wechat">
                    <span></span>
                    <span>一键预约</span>
                </a>
            </li>
        </ul>
    <!-- 二手房详细 -->
</footer>
{% endif %}

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


</body>
</html>