<template>
  <sail-page type="loading-view" title="房源详情">
    <div slot="content" class="project_detail_box">   	  
    	<div class="project_img">
    	   <div class="project__detail-top">
	    		<div class="top_mske">
		    		<svg class="icon back__icon" @click="back" aria-hidden="true">
		    		     <use xlink:href="#icon-fanhui"/>
		    		</svg>
		    		<svg class="icon concern__icon" v-if="projectDetailInfo.regionToggle" @click="addCollection" aria-hidden="true">
		    		     <use xlink:href="#icon-feiguanzhu"/>    
		    		</svg>
		    		<svg class="icon concern__icon" v-if="!projectDetailInfo.regionToggle" @click="refuseCollection(projectDetailInfo.collectionId )" aria-hidden="true">
		    		     <use xlink:href="#icon-guanzhu"/>    
		    		</svg>
		    		
		    		<svg @click="share" class="icon share__icon" aria-hidden="true">
		    		     <use xlink:href="#icon-fenxiang"/>
		    		</svg>
	    		</div>
    	    </div> 
	    	<van-swipe>	    	  
	    	    <van-swipe-item v-for="(image, index) in projectDetailInfo.imgList" :key="index">
	    	        <img :src="`${hostUrl}${image.propValue}`">
	    	        <p class="img_nums">{{index+1+'/'+projectDetailInfo.imgList.length}}</p>
	    	    </van-swipe-item>
	    	</van-swipe>
	    	
    	</div>
    	<div class="project_title">
    		<p class="project_name">{{projectDetailInfo.name}}</p>
    		<p class="project_address">
    		   <svg class="icon address" aria-hidden="true">
    			    <use xlink:href="#icon-zuola"/>
    		   </svg>
    		   {{projectDetailInfo.address}}
    		</p>
    	</div>
    	<div class="project_range">
    		<p class="rang_info" style="width: 150px;">
    			<span class="rang_title">房租</span>
    			<b class="rang_sum" style="width: 150px;">{{projectDetailInfo.minimumPrice | currency}}元/月起</b>
    		</p>
    		<p class="rang_info">
    			<span class="rang_title">户型</span>
    			<b class="rang_sum">共{{projectDetailInfo.layoutCount}}个</b>
    		</p>
    		<p class="rang_info">
    			<span class="rang_title">房源</span>
    			<b class="rang_sum">{{projectDetailInfo.houseCount}}套</b>
    		</p>
    	</div>
    	<div class="basic_facilities">
    		<svg class="icon node__icon" aria-hidden="true">
    		     <use xlink:href="#icon-jiedian"/>
    		</svg>
    		基础设施
    	</div>
    	<div class="all_basic_facilities">
    		<span class="facilitie" v-for="(suppo, index) in projectDetailInfo.supList">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use :xlink:href="`#${suppo.propValue.slice(9)}`"/>
    			</svg>
    			<b class="facilitie_name">{{suppo.propValueDesc}}</b>
    		</span>
    		<!-- <span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben18"></use>
    			</svg>
    			<b class="facilitie_name">停车场</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben20"></use>
    			</svg>
    			<b class="facilitie_name">篮球场</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben17"></use>
    			</svg>
    			<b class="facilitie_name">健身房</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben14"></use>
    			</svg>
    			<b class="facilitie_name">地铁</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben19"></use>
    			</svg>
    			<b class="facilitie_name">活动场地</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben15"></use>
    			</svg>
    			<b class="facilitie_name">银行</b>
    		</span> -->
    		
    	</div>
    	<div class="basic_facilities">
    		<svg class="icon node__icon" aria-hidden="true">
    		     <use xlink:href="#icon-jiedian"/>
    		</svg>
    		户型介绍
    	</div>
    	<div class="houseTypeIntruduce">
    		<swiper :options="HotHouseSwiperOption">
    		  <swiper-slide v-for="(layout, index) in projectDetailInfo.layoutListPos" :key="index">
    		  	<router-link class="link" :key="index" :to="`/housingTypeDetails/${layout.id}`">
    		  		<HotHouseTypeCard :index="index" class="HotHouseTypeCard" :data="layout"/>
    		  	</router-link>   
    		  </swiper-slide>
    		                 
    		</swiper> 		   		
    	</div>
    	<div class="basic_facilities">
    		<svg class="icon node__icon" aria-hidden="true">
    		     <use xlink:href="#icon-jiedian"/>
    		</svg>
    		联系我们
    	</div>
    	<div class="call_us">
    		<p class="call_us_info">
    			<svg class="icon call__icon" aria-hidden="true">
    			     <use xlink:href="#icon-dianhua"/>
    			</svg>
                <span class="call_us_methods">服务电话：
                <a :href="'tel:'+(projectDetailInfo.telephone)">
    				{{projectDetailInfo.telephone}}
    			</a>
                </span>
    		</p>
			<p class="call_us_info" @click="openMap">
				<svg class="icon call__icon" aria-hidden="true">
				     <use xlink:href="#icon-zuola"/>
				</svg>
	            <span class="call_us_methods">{{projectDetailInfo.address}}</span>  
			</p>
    	</div>
    	<div class="map_api">
    		<Bmap :data="projectDetailInfo"/>
    		<!-- <img src="~@/assets/img/application_pic_banner@3x.png"> -->
    	</div>
    	<div class="basic_facilities">
    		<svg class="icon node__icon" aria-hidden="true">
    		     <use xlink:href="#icon-jiedian"/>
    		</svg>
    		项目介绍
    	</div>
    	<div class="project_intruduce">
    		{{projectDetailInfo.abstracts}}
    	</div>
    	<div class="basic_facilities">
    		<svg class="icon node__icon" aria-hidden="true">
    		     <use xlink:href="#icon-jiedian"/>
    		</svg>
    		热门项目
    	</div>
    	<div class="hot_project_show">
    		<swiper :options="HotProjectSwiperOption">
    		  <swiper-slide v-for="(project, index) in homeProjectListInfo" :key="index">
	              <router-link class="link" :to="`/projectDetails/${project.id}`">
	              	 <HotProjectCard :index="index" :data="project" class="HotProjectCard" isPrice/>
	              </router-link>
              </swiper-slide>
    		</swiper>
    	</div>
    	<div class="operation">   		
    		<p class="call_phone">
    			<svg class="icon phone__icon" aria-hidden="true">
    			     <use xlink:href="#icon-dianhuazixun"/>
    			</svg>
    			<!-- <a :href="'tel:'+(projectDetailInfo.telephone)">
    				<span class="phone_consultation">电话咨询</span>
    			</a> -->
    			<a @click="callCustomerService">
    				<span class="phone_consultation">电话咨询</span>
    			</a>
    		</p>
    		<router-link class="link" to="/subscribeHouse">
    			<p class="operatio_button gradient-green">
    				预约看房
    			</p>
    		</router-link>
    		<router-link class="link" to="/applyCheckIn">
    			<p class="operatio_button gradient-green">
    				申请入住
    			</p>
    		</router-link>
    	</div>

    </div>	
  </sail-page>
</template>

<script>
import sailPage from "@/components/sail-page.vue";
import Bmap from "@/components/map.vue";
//import HotProjectCard from "@/common/widget/hotProjectCard.vue";
import HotProjectCard from "@/common/widget/swiperHotProjectCard.vue";
//import HotHouseTypeCard from "@/common/widget/hotHouseTypeCard.vue";
import HotHouseTypeCard from "@/common/widget/swiperHotHouseTypeCard.vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { mapState } from "vuex";
import { Toast } from "vant";
import { Dialog } from "vant";

import api from "@/api/index.js";
import weixin from "@/utils/wx.config.js";
let URL = api.serverURI;

export default {
  components: {
    sailPage,
    Bmap,
    HotProjectCard,
    HotHouseTypeCard,
    swiper,
    swiperSlide
  },
  computed: {
    ...mapState({
      projectDetailInfo: state =>
        state.finddetailOnCAppModule.projectDetailInfo,
      //获取热门项目详情数据
      homeProjectListInfo: state =>
        state.findMoreRegionsModule.homeProjectListInfo
      //获取热门项目列表数据
    })
  },
  data: function() {
    return {
      // images: [
      //    'http://pic2.58.com/zp_images/allimg/131225/21_131225140321_1.jpg',
      //    'http://pic2.58.com/zp_images/allimg/131225/21_131225140321_1.jpg'
      // ],
      hostUrl: URL,
      HotHouseSwiperOption: {
        slidesPerView: "2",
        spaceBetween: -15,
        //freeMode: true,
        lazy: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      HotProjectSwiperOption: {
        //slidesPerView: "auto",
        lazy: true,
        spaceBetween: -40,
        //freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      toggle:true
    };
  },
  beforeRouteUpdate(to, from, next) {
    //
    let id = to.params.id;
    Toast.loading({
      duration: 0,       // continuous display toast
      forbidClick: true, // forbid click background
      loadingType: "spinner",
      message: "正在加载数据"
    });
    this.$store
      .dispatch("finddetailOnCAppModule/findDetailOnCApp", {
        id: id
      })
      .then(res => {
        weixin.initShareMessage({
          title: res.data.data.name,
          desc: `${res.data.data.name}, 地址：${res.data.data.address}`,
        });
        weixin.initShareTimeline({
          title: res.data.data.name,
          desc: `${res.data.data.name}, 地址：${res.data.data.address}`,
        });
        Toast.clear();
      });
    next();
  },
  asyncData({ store, route }) {
    let id = route.params.id;
    //
    return store
      .dispatch("finddetailOnCAppModule/findDetailOnCApp", {
        id: id
      })
      .then(res => {
        weixin.initShareMessage({
          title: res.data.data.name,
          desc: `${res.data.data.name}, 地址：${res.data.data.address}`,
        });
        weixin.initShareTimeline({
          title: res.data.data.name,
          desc: `${res.data.data.name}, 地址：${res.data.data.address}`,
        });
        return store
          .dispatch("findMoreRegionsModule/findMoreRegions", {
            // 项目
            pn: 1,
            pageSixe: 10
          })
          .then(res => {
            //
          });
      });
  },
  methods: {
    openMap() {
      //
      wx.openLocation({
        latitude: this.projectDetailInfo.latitude, // 纬度，浮点数，范围为90 ~ -90
        longitude: this.projectDetailInfo.longitude, // 经度，浮点数，范围为180 ~ -180。
        name: "", // 位置名
        address: "", // 地址详情说明
        scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    share() {
      Toast("请点击右上角进行分享");
    },
    back() {
      this.$router.push('/')
    },
    callCustomerService() {
      let me = this;
      Dialog.confirm({
        title: "提示",
        message: "你确认拨打"+ me.projectDetailInfo.telephone,
        closeOnClickOverlay:true,
        confirmButtonText: "致电"
      }).then(() => {
        // on confirm
        window.location.href = "tel:"+ me.projectDetailInfo.telephone;
      }).catch(() => {
        // on cancel
      });
    },
    addCollection() {
			
      this.$store.dispatch("addCollectionModule/addCollection",{
        id:this.projectDetailInfo.id, //项目或户型id
        type:1,   //类型（1:项目，2:户型
        platfrom:2 //来源/平台（1.pc端2.微信3.app
      }).then(res => {
        //
        if(res === undefined) {
          Toast.fail({
            duration: 1000,
            message: "请先登录，再收藏"
          });
          setTimeout(() => {
            this.$router.push({path:"/login"});
          },500);
					
          return; 
        }
        if(res.data.code === 10000) {
          res.Toast.success({
            duration: 1000,
            message: "收藏成功"
          });
          this.projectDetailInfo.regionToggle = false;
          this.projectDetailInfo.collectionId = res.data.data;
        }else {
          Toast.fail({
            duration: 1000,
            message: res.data.data
          });
        }
                
        //store('toggle', this.toggle)
      });           
    },
    refuseCollection(id ) {
      Dialog.confirm({
        message: "确定要取消收藏吗？"
      }).then(() => {       			
        this.$store.dispatch("addCollectionModule/cancelCollection",{
          id
        }).then(res => {  
          if(res === undefined) {
            Toast.fail({
              duration: 1000,
              message: "请先登录，再取消收藏"
            });
            setTimeout(() => {
              this.$router.push({path:"/login"});
            },500);
   						
            return; 
          }    				
          if(res.data.code === 10000) {
            res.Toast.success({
              duration: 1000,
              message: res.data.data
            });
            this.projectDetailInfo.regionToggle = true;
          }
          else {
            Toast.fail({
              duration: 1000,
              message: res.data.data
            });
          }
        });

      }).catch(() => {
        // on cancel
      });			
    }
  }
};
</script>
<style lang="less">
@import "~@/common/less/variable.less";
.node__icon {
	width: 24px;
	height: 24px;
	color: @nice-green;
	margin-right: 12.05px;
	font-size: 100%;
	position: absolute;
	top: 0;
	left: -10px;
}
.swiperHotHouseType{
    .hot__house_type {
      height: 195px !important;
    }
   }
</style>
<style lang="less" scoped>
@import "~@/common/less/variable.less";
@nice-addressColor: #585858;
@nice_rangeName: #999999;
@nice_rangeSum: #de4d4d;
@nice_baseName: #666666;
@nice_bottom: #dddddd;
.project_detail_box {
	width: 375px;
	overflow: hidden;
	background: @nice-bgwhite;
	.project_img {
		width: 375px;
		height: 236px;
		position: relative;
		img {
			width: 375px;
			height: 236px;
		}
		.project__detail-top {
			width: 375px;
			height: 24px;
			background: rgba(0, 0, 0, 0);
			position: absolute;
			left: 0;
			top: 15px;
			z-index: 999;
			.top_mske {
				width: 375px;
				height: 24px;
				position: relative;
				.icon {
					width: 24px;
					height: 24px;
					position: absolute;
					top: 0;
					color: @nice-bgwhite;
				}
				.back__icon {
					left: 15.66px;
				}
				.concern__icon {
					right: 55.55px;
				}
				.share__icon {
					right: 11.95px;
				}
			}
		}
		.img_nums {
			width: 54px;
			height: 19px;
			border-radius: 10px;
			color: @nice-bgwhite;
			background: rgba(0, 0, 0, 0.5);
			right: 9px;
			bottom: 13px;
			position: absolute;
			text-align: center;
			line-height: 19px;
			font-size: 14px;
		}
	}
	.project_title {
		width: 334px;
		height: 85.5px;
		margin: 0 auto;
		border-bottom: 1px solid @nice-border;
		text-align: left;
		.project_name {
			width: 334px;
			height: 30px;
			line-height: 30px;
			margin-top: 13px;
			font-size: 22px;
			float: left;
			color: @nice-nameColor;
		}
		.project_address {
			width: 334px;
			height: 17px;
			margin-top: 10px;
			font-size: 12px;
			color: @nice-addressColor;
			line-height: 17px;
			float: left;
			.address {
				margin-right: 5px;
				color: @nice_addressIcon;
			}
		}
	}
	.project_range {
		width: 334px;
		height: 85px;
		margin: 0 auto;
		border-bottom: 1px solid @nice-border;
		display: flex;
		text-align: left;
		.rang_info {
			width: 90px;
			height: 85px;
			.rang_title {
				width: 90px;
				height: 20px;
				font-size: 14px;
				color: @nice_rangeName;
				line-height: 20px;
				padding-top: 20px;
				display: block;
				white-space: nowrap;
			}
			.rang_sum {
				width: 90px;
				height: 22px;
				color: @nice_rangeSum;
				font-size: 13px;
				line-height: 22px;
				margin-top: 5px;
				display: block;
			}
		}
	}
	.basic_facilities {
		width: 375px;
		height: 25px;
		font-size: 18px;
		color: @nice-nameColor;
		line-height: 25px;
		text-align: left;
		margin-top: 13.5px;
		position: relative;
		padding-left: 20.5px;
	}
	.all_basic_facilities {
		width: 334px;
		overflow: hidden;
		margin: 20px auto 0;
		padding-bottom: 20px;
		border-bottom: 1px solid @nice-border;
		.facilitie {
			float: left;
			width: 60px;
			height: 60px;
			text-align: center;
			.facilitie__icon {
				width: 28px;
				height: 22px;
				display: block;
				margin-left: 16px;
			}
			.facilitie_name {
				width: 60px;
				height: 18px;
				line-height: 18px;
				font-size: 13px;
				color: @nice_baseName;
				margin-top: 7.08px;
				display: block;
			}
		}
	}
	.houseTypeIntruduce {
		width: 375px;
		overflow: hidden;
		margin: 20px auto;
		display: flex;
		.HotHouseTypeCard {
			margin-left: 10px;
		}
	}
	.call_us {
		width: 334px;
		height: 68px;
		margin: 0 auto;
		.call_us_info {
			width: 334px;
			height: 34px;
			text-align: left;
			line-height: 34px;
			color: @nice-addressColor;
			.call__icon {
				margin-right: 9px;
				color: @nice_addressIcon;
			}
		}
	}
	.map_api {
		width: 375px;
		height: 212px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.project_intruduce {
		width: 338px;
		overflow: hidden;
		border-bottom: 1px solid @nice-border;
		margin: 15px auto;
		text-indent: 2em;
		text-align: left;
		font-size: 13px;
		color: @nice-nameColor;
		line-height: 30px;
		padding-bottom: 10px;
	}
	.hot_project_show {
		width: 375px;
		height: 200px;
		margin: 30px 0 80px;
		.HotProjectCard {
			margin-left: 14px;
		}
	}
	.operation {
		width: 375px;
		height: 56px;
		position: fixed;
		background: @nice-bgwhite;
		left: 0;
		bottom: 0;
		border: 1px solid @nice_bottom;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
		display: flex;
		z-index: 999;
		.call_phone {
			width: 80px;
			height: 40px;
			margin: 6px 0 0 10px;
			color: @nice_baseName;
			text-align: center;
			.phone__icon {
				width: 18.95px;
				height: 18.95px;
				margin-left: 30px;
				display: block;
			}
			.phone_consultation {
				width: 80px;
				height: 17px;
				display: block;
				font-size: 12px;
				line-height: 17px;
				margin-top: 2px;
			}
		}
		.operatio_button {
			width: 115.31px;
			height: 40px;
			margin: 7px 0 0 20.05px;
			text-align: center;
			line-height: 40px;
			font-size: 17px;
			color: @nice-bgwhite;
			border-radius: 2px;
		}
	}
}
</style>
