<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="houseDetailInfo.layoutToggle" @click="addCollection" aria-hidden="true">
		    		     <use xlink:href="#icon-feiguanzhu"/>    
		    		</svg>
		    		<svg class="icon concern__icon" v-if="!houseDetailInfo.layoutToggle" @click="refuseCollection(houseDetailInfo.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 houseDetailInfo.imgList" :key="index">
	    	       <img :src="`${hostUrl}${image.propValue}`" >
	    	       <p class="img_nums">{{index+1+'/'+houseDetailInfo.imgList.length}}</p>
	    	   </van-swipe-item>
	    	 </van-swipe>
    	</div>
    	<div class="project_title">
    		<p class="project_name">
    		   {{houseDetailInfo.layoutName }}
    		   <router-link v-show="houseDetailInfo.layoutType === 1" class="link see_sample_room" :to="`/sampleRoomDetails/${houseDetailInfo.id}`">
    		   	  查看样板间
    		   </router-link>
    	    </p>
    		<p class="project_address">   		   
    		   {{houseDetailInfo.regionName }}
    		</p>
    	</div>
    	<div class="project_range">
    		<p class="rang_info" style="width: 140px;">
    			<span class="rang_title" style="width: 140px;">房租</span>
    			<b class="rang_sum" style="" style="width: 140px;">{{houseDetailInfo.minimumPrice | currency}}元/月起</b> 
    			<i class="right_border"></i>
    		</p>
    		<p class="rang_info">
    			<span class="rang_title">户型</span>
    			<b class="rang_sum">{{houseDetailInfo.room }}室{{houseDetailInfo.livingRoom }}厅</b>  
    			<i class="right_border"></i>
    		</p>
    		<p class="rang_info">
    			<span class="rang_title">面积</span>
    			<b class="rang_sum">{{houseDetailInfo.acreage }}㎡</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 houseDetailInfo.supList" :key="index">
    			<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-saidingtubiao-v_huabanfuben1"></use>
    			</svg>
    			<b class="facilitie_name">天然气</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben11"></use>
    			</svg>
    			<b class="facilitie_name">宽带</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben3"></use>
    			</svg>
    			<b class="facilitie_name">电视</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben9"></use>
    			</svg>
    			<b class="facilitie_name">暖气</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben8"></use>
    			</svg>
    			<b class="facilitie_name">热水器</b>
    		</span>
    		<span class="facilitie">
    			<svg class="icon facilitie__icon" aria-hidden="true">
    			     <use xlink:href="#icon-_huabanfuben7"></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="detailed_information">
    		<p class="informations">
    			<span class="informations_name">小区：</span>
    			<b class="informations_content">{{houseDetailInfo.regionName }}</b>
    		</p>
    		<p class="informations">
    			<span class="informations_name">押金：</span>
    			<b class="informations_content">{{houseDetailInfo.deposit | currency }}元</b>
    		</p>
    		<p class="informations">
    			<span class="informations_name">户型：</span>
    			<b class="informations_content">
    			{{houseDetailInfo.room }}室
    			{{houseDetailInfo.livingRoom}}厅
    			{{houseDetailInfo.kitchen}}厨
    			{{houseDetailInfo.toilet}}卫
    		    </b>
    		</p>
    		<p class="informations">
    			<span class="informations_name">装修：</span>
    			<b class="informations_content">{{dMap[houseDetailInfo.decorateFlag]}}</b>
    		</p>
    		<p class="informations">
    			<span class="informations_name">电梯：</span>
    			<b class="informations_content">{{houseDetailInfo.liftFlag == 'y' ? '是' : '否'}}</b>
    		</p>
    		
    	</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 homeLayoutListInfo" :key="index">
                <router-link class="link link-block" :to="`/housingTypeDetails/${layout.id}`">          
                   <HotHouseTypeCard :index="index" :data="layout" class="HotHouseTypeCard"/>
                </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:'+(houseDetailInfo.servicePhone)">
    				<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 HotProjectCard from "@/common/widget/hotProjectCard.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,
    //HotProjectCard,
    HotHouseTypeCard,
    swiper,
    swiperSlide
  },
  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/houseFindDetailOnCApp", {
        id: id
      })
      .then(res => {
        weixin.initShareMessage({
          title: res.data.data.layoutName,
          desc: `${res.data.data.layoutName}, 所属项目：${res.data.data.regionName}`,
        });
        weixin.initShareTimeline({
          title: res.data.data.layoutName,
          desc: `${res.data.data.layoutName}, 所属项目：${res.data.data.regionName}`,
        });
        Toast.clear();
        // this.$store
        // 	.dispatch("findMoreRegionsModule/findAllOnCApp", {
        // 		//户型
        // 		pn: 1,
        // 		pageSize: 10,
        // 		status: 0
        // 	})
        // 	.then(res => {
						
        // 	});
      });
    next();
  },
  computed: {
    ...mapState({
      houseDetailInfo: state =>
        state.finddetailOnCAppModule.houseDetailInfo,
      homeLayoutListInfo: state =>
        state.findMoreRegionsModule.homeLayoutListInfo //获取热门户型列表数据
    }),
    sumPrice() {
      if (!this.houseDetailInfo.rent) {
        return 0;
      }
      return (
        this.houseDetailInfo.rent +
          this.houseDetailInfo.deviceFee
      );
    }
  },
  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,
      dMap: {
        "1": "精装修",
        "2": "简装"
      },
      HotHouseSwiperOption: {
        slidesPerView: "2",
        lazy: true,
        spaceBetween: -15,
        //freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  asyncData({ store, route }) {
    let id = route.params.id;
    return store
      .dispatch("finddetailOnCAppModule/houseFindDetailOnCApp", {
        id: id
      })
      .then(res => {
        weixin.initShareMessage({
          title: res.data.data.layoutName,
          desc: `${res.data.data.layoutName}, 所属项目：${res.data.data.regionName}`,
        });
        weixin.initShareTimeline({
          title: res.data.data.layoutName,
          desc: `${res.data.data.layoutName}, 所属项目：${res.data.data.regionName}`,
        });
        return store
          .dispatch("findMoreRegionsModule/findAllOnCApp", {
            //户型
            pn: 1,
            pageSize: 10,
            status: 0
          })
          .then(res => {
            //
          });
      });
  },
  methods: {
    share() {
      Toast("请点击右上角进行分享");
    },
    back() {
      this.$router.push('/')
    },
    addCollection() {
      this.$store
        .dispatch("addCollectionModule/addCollection", {
          id: this.houseDetailInfo.id, //项目或户型id
          type: 2, //类型（1:项目，2:户型
          platfrom: 3 //来源/平台（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.houseDetailInfo.layoutToggle = false;
            this.houseDetailInfo.collectionId = res.data.data;
          } else {
            Toast.fail({
              duration: 1000,
              message: res.data.msg
            });
          }
        });
    },
    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.houseDetailInfo.layoutToggle = 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-border: #f2f2f2;
@nice-nameColor: #323232;
@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;
	.link-block {
		display: block;
	}
	.project_img {
		width: 375px;
		height: 236px;
		position: relative;
		.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 {
			width: 375px;
			height: 236px;
		}
		.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;
			.see_sample_room {
				display: block;
				width: 83.53px;
				height: 21px;
				float: right;
				border: 1px solid @nice-green;
				color: @nice-green;
				font-size: 12px;
				text-align: center;
				line-height: 23px;
				border-radius: 11px;
				margin-top: 3.5px;
			}
		}
		.project_address {
			width: 334px;
			height: 17px;
			margin-top: 10px;
			font-size: 12px;
			color: @nice-addressColor;
			line-height: 17px;
			float: left;
		}
	}
	.project_range {
		width: 334px;
		height: 85px;
		margin: 0 auto;
		padding-bottom: 10px;
		border-bottom: 1px solid @nice-border;
		display: flex;
		text-align: left;
		.rang_info {
			width: 90px;
			height: 85px;
			padding-right: 10px;
			position: relative;
			.rang_title {
				width: 90px;
				height: 20px;
				font-size: 14px;
				color: @nice_rangeName;
				line-height: 20px;
				padding-top: 20px;
				display: block;
			}
			.rang_sum {
				width: 90px;
				height: 22px;
				color: @nice_rangeSum;
				font-size: 13px;
				line-height: 22px;
				margin-top: 5px;
				display: block;
			}
			.right_border {
				position: absolute;
				display: block;
				width: 1px;
				height: 36px;
				background: @nice-border;
				top: 25px;
				right: 10px;
			}
		}
	}
	.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;
		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;
			}
		}
	}
	.detailed_information {
		width: 334px;
		overflow: hidden;
		margin: 0px auto 20px;
		border-bottom: 1px solid @nice-border;
		padding-bottom: 20px;
		.informations {
			width: 167px;
			height: 20px;
			float: left;
			margin-top: 15px;
			font-size: 14px;
			color: @nice-nameColor;
			display: flex;
			.informations_name {
				width: 50px;
				height: 20px;
				line-height: 20px;
				display: inline-block;
			}
			.informations_content {
				display: inline-block;
				height: 20px;
				line-height: 20px;
				flex: 1;
				text-align: left;
			}
		}
	}
	.houseTypeIntruduce {
		width: 375px;
		overflow: hidden;
		margin: 20px auto 80px;
		display: flex;
		.HotHouseTypeCard {
			margin-left: 15px;
		}
		.swiper-container {
			width: 100%;
		}
	}

	.operation {
		width: 375px;
		height: 56px;
		position: fixed;
		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;
		background: @nice-bgwhite;
		.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>
