<?php /* Template Name: page-Villa */ ?>
<?php get_header() ?>

<!--主体-->
            <div class="content">
                
                <!--s-banner-->
                <div class="s-banner">
                    <img src="/style/img/rentbanner2-2.jpg" />
                    <div class="text" aos="fade-in">
                        <h3>洋房商用</h3>
                        
                        <form  class="clearfix" onsubmit="return false">
                            <input type="text" placeholder="输入搜索内容" name="search" value=""/>
                            <button class="btn" type="button"><i class="fa fa-search" aria-hidden="true"></i>搜索房源</button>
                        </form>
                    </div>
                    <div class="mbx" aos="fade-in">
                        <div class="left">
                            <a href="/" class="fa fa-home"></a>
                            <i></i>
                            <a href="/sell/">洋房商用</a>
                        </div>
                        <div class="right">
                            <a href="/form2/">出租/承租委托</a>
                        </div>
                    </div>
                </div>
                
                <!--sell01-->
                <?php $terms = get_terms('rents-cat'); ?>
                <div class="sell01warp" aos="fade-up">
                    <ul class="sell01">
                        <li>
                            <h3 class="name">租价：</h3>
                            <div class="info">
                                <a slug="price2=no" class="defaultActive">不限</a>
                                 <?php foreach($terms as $term): ?> 
                                     <?php if($term->parent == 93): ?>
                                         <a slug="price2=<?=$term->slug?>"><?php echo $term->name; ?></a> 
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </li>
                        <li>
                            <h3 class="name">地点：</h3>
                            <div class="info">
                                <a slug="place=no" class="defaultActive">不限</a>
                                <?php foreach($terms as $term): ?>
                                    <?php if($term->parent == 99): ?>
                                        <a slug="place=<?=$term->slug?>"><?php echo $term->name; ?></a>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </li>
                       <!--  <li>
                            <h3 class="name">类型：</h3>
                            <div class="info">
                                <a slug="type=no" class="defaultActive">不限</a>
                                <?php foreach($terms as $term): ?>
                                    <?php if($term->parent == 106): ?>
                                        <a slug="type=<?=$term->slug?>"><?php echo $term->name; ?></a>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </li> -->
                         <li>
                            <h3 class="name">面积：</h3>
                            <div class="info">
                                <a slug="areas=no" class="defaultActive">不限</a>
                                <?php foreach($terms as $term): ?>
                                    <?php if($term->parent == 114): ?>
                                        <a slug="areas=<?=$term->slug?>"><?php echo $term->name; ?></a>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </li>
                        <li>
                            <h3 class="name">房型：</h3>
                            <div class="info">
                                <a slug="room=no" class="defaultActive">不限</a>
                                <?php foreach($terms as $term): ?>
                                    <?php if($term->parent == 118): ?>
                                        <a slug="room=<?=$term->slug?>"><?php echo $term->name; ?></a>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </li>
                        <li>
                            <h3 class="name">委托：</h3>
                            <div class="info">
                                <a slug="full=no" class="defaultActive">不限</a>
                                <?php foreach($terms as $term): ?>
                                    <?php if($term->parent == 124): ?>
                                        <a slug="full=<?=$term->slug?>"><?php echo $term->name; ?></a>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </li>
                        
                       
                    </ul>
                    
                    <div class="s-tab">
                        <h3>排序方式：</h3>
                        <a class="activ reset">默认</a>
                        <a class="area">面积<i class="fa fa-long-arrow-down" aria-hidden="true"></i></a>
                        <a class="price">价格<i class="fa fa-long-arrow-down" aria-hidden="true"></i></a>
                        <a class="time">时间<i class="fa fa-long-arrow-down" aria-hidden="true"></i></a>
                        <!-- <a href="javascript:;">默认<i class="fa fa-long-arrow-down" aria-hidden="true"></i></a> -->
                        <!-- <a href="javascript:;">默认<i class="fa fa-long-arrow-down" aria-hidden="true"></i></a> -->
                    </div>
                    
                </div>
                
                <!--sell02warp-->
                <div class="sell02warp">
                    <div class="sell02 clearfix">
                        <div class="left mainContent" aos="fade-right">

                            
                            
                            
                        </div>

                        <div class="right" aos="fade-left">
                            <h3>专任委托</h3>
                            <div class="list">
                                <?php 
                                    $arg = array(
                                    'tax_query' => array( 
                                      'relation' => 'AND', 
                                      array(
                                        'taxonomy' => 'rents-cat', 
                                        'field' => 'slug', 
                                        'terms' => array( 'full1' ), 
                                        'include_children' => true, 
                                        'operator' => 'IN' 
                                      ),
                                    ),
                                    'posts_per_page' => 6
                                    );
                                    $new = new WP_Query($arg); 
                                ?>
                                <?php if($new->have_posts()) : while($new->have_posts()) : $new->the_post();?>
                                <a href="<?php the_permalink() ?>">
                                    <div class="imgbox">
                                        <img src="<?php the_field('img') ?>" />
                                        <p><?php the_field('price') ?>元</p>
                                    </div>
                                    <h4><?php the_title() ?></h4>
                                </a>
                                <?php endwhile;?><?php endif; ?>
                            </div>
                        </div>
                         <div class="fy sellfy" aos="fade-up">
                               
                        </div>
                       
                        
                        
                        
                        
                    </div>
                </div>
<script>
    $(function(){
        var url = '/data2/'
        var activepage = 1 //当前所在页
        var allpages = 1 //所有页面
        var postObj = {
            activepage:1,
            type: "commercial-house"
        }

        $("a[slug='type=no']").removeClass("defaultActive")
        $("a[slug='type=commercial-house'").addClass("defaultActive")

        $(".btn").click(function(){
            var search = $("input[name='search']").val()
            $(".info a").removeClass("defaultActive")
            $(".info a:first-child").addClass("defaultActive")
            if(search){
                var postObj = {
                    activepage:1,
                    search:search
                }
                delete postObj['price2']
                getDate(url,postObj)
            }
            console.log(postObj)
            console.log('搜索')
        })

        $(".info a").click(function(){
            $(this).addClass("defaultActive")
            $(this).siblings().removeClass("defaultActive")
            $("input[name='search']").val("")
            delete postObj['search']
            var can = $(this).attr("slug").split("=")
            var key = can[0]
            var value = can[1]
            postObj.activepage = 1
            activepage = 1
            if(!postObj[key]){//判断是否有这个 对象属性
                eval(postObj[key]={});//没有就添加
            }
            if(!postObj[key].hasOwnProperty([value])){//判断这个属性有没有 这个 值
                postObj[key] = value;//没有就添加
            }
            if(value == "no"){
                delete postObj[key]
            }
            getDate(url,postObj)
            console.log(postObj)
            console.log('列表筛选')
        })

        $(".s-tab a").click(function(){
            $(this).addClass("activ")
            $(this).siblings().removeClass("activ")
            $(this).siblings().removeClass("next")
            $(this).siblings().removeClass("prev")
            delete postObj['search']
            $("input[name='search']").val("")
            console.log('排序方式')
        })

        $(".price").click(function(){
            delete postObj['area']
            delete postObj['time']
            var price = postObj.price
            if(!price){
                postObj.price = 'prev'
                $(this).removeClass('next')
                $(this).addClass('prev')
            }
            if(price == 'prev'){
                postObj.price = 'next'
                $(this).removeClass('prev')
                $(this).addClass('next')
            }else{
                postObj.price = 'prev'
                $(this).removeClass('next')
                $(this).addClass('prev')
            }
            getDate(url,postObj)
            console.log(postObj)
            console.log('价格排序')
        })

        $(".area").click(function(){
            delete postObj['price']
            delete postObj['time']
            var area = postObj.area
            if(!area){
                postObj.area = 'prev'
                $(this).removeClass('next')
                $(this).addClass('prev')
            }
            if(area == 'prev'){
                postObj.area = 'next'
                $(this).removeClass('prev')
                $(this).addClass('next')
            }else{
                postObj.area = 'prev'
                $(this).removeClass('next')
                $(this).addClass('prev')
            }
            getDate(url,postObj)
            console.log(postObj)
            console.log('面积排序')
        })

        $(".time").click(function(){
            delete postObj['price']
            delete postObj['area']
            var time = postObj.time
            if(!time){
                postObj.time = 'prev'
                $(this).removeClass('next')
                $(this).addClass('prev')
            }
            if(time == 'prev'){
                postObj.time = 'next'
                $(this).removeClass('prev')
                $(this).addClass('next')
            }else{
                postObj.time = 'prev'
                $(this).removeClass('next')
                $(this).addClass('prev')
            }
            getDate(url,postObj)
            console.log(postObj)
            console.log('时间排序')
        })

        $(".reset").click(function(){
            delete postObj['price']
            delete postObj['area']
            delete postObj['time']
            activepage = 1
            postObj.activepage = 1
            getDate(url,postObj)
            console.log(postObj)
            console.log('重置')
        })



        $(".fy").on('click','.next',function(e){//下一页
            activepage++
            if(activepage >= allpages){
                activepage = allpages
            }
            var search = $("input[name='search']").val()
            if(search){
                postObj.search = search
                delete postObj['type']
                delete postObj['price2']
                delete postObj['place']
                delete postObj['areas']
                delete postObj['room']
                delete postObj['full']
            }
            postObj.activepage = activepage
            getDate(url,postObj)
            $(".fy .active").removeClass("active").next().addClass("active")
            console.log(postObj)
            console.log('下一页')
        });
        

        $(".fy").on('click','.prev',function(e){//上一页
            activepage--
            if(activepage <= 1){
                activepage = 1
            }
            var search = $("input[name='search']").val()
            if(search){
                postObj.search = search
                delete postObj['type']
                delete postObj['price2']
                delete postObj['place']
                delete postObj['areas']
                delete postObj['room']
                delete postObj['full']
            }
            postObj.activepage = activepage
            getDate(url,postObj)
            $(".fy .active").removeClass("active").prev().addClass("active")
            console.log(postObj)
            console.log('上一页')
        });


        $(".fy").on('change','.link',function(e){//随意页跳转
            var num = $(this).val()
            activepage = num
            postObj.activepage = activepage
            var search = $("input[name='search']").val()
            if(search){
                postObj.search = search
                delete postObj['type']
                delete postObj['price2']
                delete postObj['place']
                delete postObj['areas']
                delete postObj['room']
                delete postObj['full']
            }
            getDate(url,postObj)
            $(".fy .active").removeClass("active")
            $(this).addClass("active")
            console.log(postObj)
            console.log('选择页码')
        });



        function getDate(url,postObj){
            $.post(url,postObj,function(res){
                var allCount = res.found_posts
                allpages = res.max_num_pages
                var html = ''
                if(res.content){
                    $.each(res.content,function(k,v){
                        html += '<a href="'+v.link+'" class="item" target="_blank"><div class="imgbox"><img src="'+v.img+'" /></div>'
                        html += '<div class="text"><div class="top"><h3>'+v.title+'</h3><font>¥'+v.price+'</font></div><h4>'+v.title2+'</h4>'
                        html += '<ul><li><div class="li"><p><img src="/style/img/p1.png" />价格</p><h3>'+v.price+'元/月</h3></div>'
                        html += '<div class="li"><p><img src="/style/img/p2.png" />地址</p><h3>'+v.address+'</h3></div></li>'
                        html += '<li><div class="li"><p><img src="/style/img/p3.png" />房型</p><h3>'+v.model+'</h3></div>'
                        html += '<div class="li"><p><img src="/style/img/p4.png" />面积</p><h3>'+v.m+'平米</h3></div>'
                        html += '</li></ul></div></a>'
                    })

                }else{
                    html += '<p>没有搜索到数据</p>'
                }
                $(".mainContent").html(html)
                allPage(allpages,activepage,allCount)
            })
        }


        function allPage(allpages,activepage,allCount){
            if(allpages <= 1) {
                $(".fy").html('')
                return 
            }

            var pages = '' 
            if(allpages > 1){pages+='<a href="javascript:void(0);" class="prev">上一页</a>';}
            pages+='<span>'+activepage+'</span>'
            pages+= '<select class="link">'
            for(var i = 1;i <= allpages;i++){
                if(activepage == i){
                    pages+= '<option selected>'+i+'</option>'
                    // pages+= '<a  href="javascript:void(0);" class="active" >'+i+'</a>'
                }else{
                    // pages+= '<a  href="javascript:void(0);" class="link">'+i+'</a>'
                    pages+= '<option>'+i+'</option>'
                }
            }           
            pages+= '</select>'
            if(allpages > 1){pages+='<a href="javascript:void(0);" class="next">下一页</a>';}


            pages += '<div>'
            pages += '<span>共有'+allCount+'条数据</span>'+' <span>共有'+allpages+'页</span>'
            pages += '</div>'
            $(".fy").html(pages);
        }
        console.log(postObj)

        getDate(url,postObj)

    })
</script>

<?php get_footer() ?>