<?php get_header() ?>
<?php /* PostType Page Template: 出售详细页 */ ?>

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

<!--主体-->
			<div class="content">
				
			


				<!--housingwarp-->
				<div class="housingwarp">
<!-- 					<div class="sellmbx"> -->
<!--                         <a href="/" class="fa fa-home"></a> -->
<!--                         <i></i> -->
<!--                         <a href="/lease/">出租房源</a> -->
<!--                     </div> -->
					<div class="housing01">
						<div class="toback" aos="fade-up">
							<a href="/sell/"><i></i>返回列表</a>
						</div>
						
						<div class="min">
							<h3 class="top" aos="fade-up"><?php the_title() ?></h3>
							<!--表格-->
							<table border="1" cellspacing="0" cellpadding="0" aos="fade-up">
								<tr>
									<td>
										<p>面积</p>
										<h3><?php echo replace_text_wps(get_field('m')); ?>平米</h3>
									</td>
									<td>
										<p>单价</p>
										<h3><?php echo replace_text_wps(get_field('price1')); ?>万元</h3>
									</td>
									<td>
										<p>朝向</p>
										<h3><?php echo replace_text_wps(get_field('way')); ?></h3>
									</td>
									<td>
										<p>房型</p>
										<h3><?php echo replace_text_wps(get_field('model')); ?></h3>
									</td>
									<td>
										<p>年代</p>
										<h3><?php echo replace_text_wps(get_field('year')); ?></h3>
									</td>
									
									<td>
										<p>售价</p>
										<h3><?php echo replace_text_wps(get_field('price')); ?>万元</h3>
									</td>
								</tr>
								<tr>
									<td>
										<p>楼层</p>
										<h3><?php echo replace_text_wps(get_field('hieh')); ?></h3>
									</td>
									<td>
										<p>装修</p>
										<h3><?php echo replace_text_wps(get_field('tyoe')); ?></h3>
									</td>
									<td>
										<p>小区</p>
										<h3><?php echo replace_text_wps(get_field('places')); ?></h3>
									</td>
									<td>
										<p>编号</p>
										<h3><?php echo replace_text_wps(get_field('num')); ?></h3>
									</td>
									<td colspan="2">
										<p>地址</p>
										<h4><font><?php echo replace_text_wps(get_field('address')); ?></font><a href="<?php the_field('links') ?>" target="_blank">地理位置<i class="fa fa-angle-right" aria-hidden="true"></i></a></h4>
									</td>
									
								</tr>
							</table>
						</div>
						
						<!--轮播-->
						<div class="imgmin">
							<strong class="linetwo" aos="fade-up"></strong>
							<div class="imgslider" aos="fade-up">
								<div class="swiper-container gallery-top">
								    <div class="swiper-wrapper">
								      <?php $imgs = wpdit_get_post_images(get_the_content())[1]; ?>
									<?php foreach($imgs as $img): ?>
								      <div class="swiper-slide">
								      	<div class="bigimgbox">
								      		<img src="<?php echo $img; ?>" />
								      	</div>
								      </div>
							      	<?php endforeach; ?>
								    </div>
								    <!-- Add Arrows -->
									<div class="swiper-button-prev fa fa-angle-left"></div>
								    <div class="swiper-button-next fa fa-angle-right"></div>
								</div>
								<div class="swiper-container gallery-thumbs">
								    <div class="swiper-wrapper">
								    <?php $imgs = wpdit_get_post_images(get_the_content())[1]; ?>
									<?php foreach($imgs as $img): ?>
								      <div class="swiper-slide indexP-swiper-items" data-index="1">
								      	<div class="smallimgbox">
								      		<img src="<?php echo $img; ?>" />
								      	</div>
								      </div>
							      	<?php endforeach; ?>
								  </div>
							</div>
							

							<script type="text/javascript" src="/style/js/swiper.min.js" ></script>
							<script>
							    var galleryThumbs = new Swiper('.gallery-thumbs', {
							      spaceBetween: 10,
							      slidesPerView: 6,
							      // loop: true,
							      freeMode: true,
							      loopedSlides: 5, //looped slides should be the same
							      watchSlidesVisibility: true,
							      watchSlidesProgress: true,
							      breakpoints: {
						            750: {
						                slidesPerView: 4,
						                spaceBetween: 10
						            },}
							    });
							    var galleryTop = new Swiper('.gallery-top', {
							      spaceBetween: 10,
							      // loop:true,
							      loopedSlides: 5, //looped slides should be the same
							      navigation: {
							        nextEl: '.swiper-button-next',
							        prevEl: '.swiper-button-prev',
							      },
							      thumbs: {
							        swiper: galleryThumbs,
							      },
							    });

							    // $(".indexP-swiper-items").hover(function(e) {
							    //   // 取到绑定在indexP-swiper-items上的data-index
							    //   console.log(e.currentTarget.dataset.index);
							    //   let indexTo = e.currentTarget.dataset.index;
							    //   // 然后调用swiper的mySwiper.slideTo(index, speed, runCallbacks)
							    //   galleryTop.slideTo(indexTo, 1000, false); //切换到第一个slide，速度为1秒
							    // },function(){
							    //   // 鼠标移出回复自动轮播
							    //   galleryTop.autoplay.start();
							    // });


							</script>
						</div>
					</div>	
						<?php if(get_field('linkvideo')): ?>
						<!-- 视频 -->
						<div class="videowarp">
							<h3 class="top">视频看房</h3>
							<div id="video">
								<video class="js-media" poster="<?php the_field('imgs222') ?>" id="videoShow">
									  <source src="<?php the_field('linkvideo') ?>" type="video/mp4" />
									<p>你的浏览器不支持 HTML5 Video。</p>
								</video>
								<span class="VideoBtn"><img src="/style/img/bo1.png"></span>
							</div>
						</div>
						<script type="text/javascript" src="/style/js/jsmodern.min.js" ></script>
						<!--视频插件调用方法-->
						<script>
						$(function () {
							//视频
							jsModern.video("#video");
							//播放视频
							$(".VideoBtn").click(function () {
								var video = document.getElementById("videoShow");
								video.play();
								$('.VideoBtn').hide();
								
							})
							//监听视频的播放状态
							var video = document.getElementById("videoShow");
							video.oncanplay = function () {
								$(".VideoBtn").show();
								//$("#video").attr("poster","");
							}
							//视频播放事件
							video.onplay = function () {
								$("#videoShow").attr("poster", "");
								$(".VideoBtn").hide();
							};
							video.onplaying = function () {
								$(".VideoBtn").hide();
							};
						
							//视频暂停事件
							video.onpause = function () {
								$(".VideoBtn").show();
							};
							//点击视频周围暂停播放图片出现
							video.onclick = function () {
								if (video.paused) {
									$(".VideoBtn").hide();
									video.play();
								} else {
									$(".VideoBtn").show();
									video.pause();
								}
							};
						})
						</script>
						<?php endif; ?>
						
						<!--文字-->
						<div class="fontinfo">
							<div class="font-title" aos="fade-up"> 
								<h3>房屋简介</h3>
								<strong class="linetwo"></strong>
							</div>
							
							<div class="item" aos="fade-up">
								<h3>房屋描述</h3>
								<?php echo replace_text_wps(get_field('desc')); ?>
								<!-- <h4>建面270平，占地250平米，花园110平，1935年竣工，沿街独栋洋房，开间20米。本案为上海建筑营造商公和洋行（Palmer & Turner Group，P&T），在香港的中文名称又称为巴马丹拿集团，是一个在远东地区历史悠久的英资建筑与工程事务所，服务范围包括规划设计、建筑结构以及机电工程。自1868年成立以来，该机构已经在许多亚洲城市，特别是上海和香港，留下了大批风格多样的优秀作品，对于这两个城市的（外滩和中环）风貌的行成起到重要作用。作品有：外滩12号汇丰银行大楼；外滩3号有利大楼；外滩26号扬子大楼；外滩28号格林邮船大楼；外滩18号麦加利银行大楼；外滩24号横滨正金银行大楼</h4> -->
							</div>
							<div class="item" aos="fade-up">
								<h3>地段位置</h3>
								<?php echo replace_text_wps(get_field('poalca')); ?>
								<!-- <h4>淮海中路靠近宛平路，淮海中路：1900年越界筑路，初名叫西江路；不久又以公董局总董宝昌之名，改称宝昌路；1922年3月9日，以法国将军霞飞命名为霞飞路。1943年改泰山路；1945年又以国民党元老林森之名，改为林森中路。解放后，1950年5月为纪念淮海战役胜利，改名为淮海中路。一条淮海中路住过多少名人志士，有些别墅被拆除了，有的住宅被改造了，这里您看到的只是其中的一部分------ </h4> -->
							</div>
							
							<div class="item" aos="fade-up">
								<img src="<?php the_field('imgsss') ?>" />
							</div>
							
							<div class="item" aos="fade-up">
								<h3>历史趣谈</h3>
								<?php echo replace_text_wps(get_field('hah')); ?>
								<!-- <h4>本案原为法国领事在上海官邸之部分，后为爱国药业先驱项松茂家族购入，项松茂，中国新药业先驱。浙江宁波人，幼读私塾，于十四岁到苏州当学徒。1900年学成后投身中国新药制药业，先后在上海中英药房、汉口中英药房分店，汉口商会任职。1911年任上海五洲药房总经理后，将中国新药业发扬光大，曾多次到日本、欧美考察学习，引进制药先进技术。1922年斥巨资盘进原德商上海固本肥皂厂，改名上海五洲固本药厂，至1929年，项的企业横跨众多工商业领域，成为上海实业巨头之一。 </h4> -->
							</div>
							<div class="item" aos="fade-up">
								<h3>房屋现况</h3>
								<?php echo replace_text_wps(get_field('jiukou')); ?>
								<!-- <h4>诚意出售，目前带租约出售，售价1.25亿到手</h4> -->
							</div>
							<?php if(get_field('sel')): ?>
							<div class="item" aos="fade-up">
								<h3>相关房源</h3>
								<div class="list clearfix">
									<?php 
										$id = get_the_ID();
										$args = array('post_type' => 'post','post__in' => get_field('sel') );
										$new = new WP_query($args);
								 	?>
								 	<?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') ?>" /></div>
										<p><?php the_title() ?></p></a>
									<?php endwhile;endif;wp_reset_postdata(); ?>
								</div>
							</div>
							<?php endif; ?>
							
							<div class="user" aos="fade-up">
								<div class="imgbox">
									<img src="<?php the_field('face') ?>" />
								</div>
								<div class="text">
									<h3><?php the_field('names') ?></h3>
									<p><?php $infos = explode("\r\n", replace_text_wps(get_field('infos'))); ?>
										<?php foreach($infos as $in): ?>
										<?php echo $in; ?>	<br />
										<?php endforeach; ?>
									</p>
								</div>
							</div>
							
							<div class="item" aos="fade-up">
								<h3>个人简介</h3>
								<?php echo replace_text_wps(get_field('descinfo')); ?>
								
							</div>
							
						</div>
						
						
					</div>
<?php endwhile;endif; ?>
					
					<div class="housing02warp">
						<div class="housing02">
							<div class="top" aos="fade-up">
								<h3>公恒地产</h3>
								<p>Straight & Steady Estate</p>
								<h4>心起点，圆您海上旧梦</h4>
								<strong class="linetwo"></strong>
							</div>
							<ul class="min" aos="fade-up">
								<li>
									<span>影响力</span>
									<p>SMG上海老洋房估值节目合作伙伴</p>
								</li>
								<li>
									<span>术业有专攻</span>
									<p>扎根上海老洋房经纪行业十八年</p>
								</li>
								<li>
									<span>市场占有率</span>
									<p>连续十年成交老洋房达到65%的市场占有率</p>
								</li>
								<li>
									<span>资源丰富</span>
									<p>拥有上海老房子市场超过95%以上的房源信息</p>
								</li>
								<li>
									<span>永恒的事业</span>
									<p>携手文化出版社著作《上海老洋房的故事》，研究与推广上海海派文化与城市记忆</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
				
				
			</div>

				

<?php get_footer() ?>