<template>
  <sail-page type="loading-view" title="我的房屋" isHead>
    <div slot="content">
    	<div class="manage-owned-house">
    		<div class="owonedHouse-login">
    			<span>
    				<img class="login_img" src="@/assets/img/myhouse_pic_banner@3x.png"> 
    			</span>
    		</div>
    		<div class="owonedHouse-details" v-show="loginInfo.cappUserInfo.regionName">
    			<div class="MyowonedHouseStatus">
            <div class="owonedHouse-wrap">
                  <van-cell-swipe :right-width="65">
                    <div class="owonedHouse-wrap-main">
                        <div class="owonedHouse-wrap-theme">
                           <span class="owonedHouse-wrap-portrait">
                             <img class="active-wrap_img" src="@/assets/img/myhouse_icon_house@3x.png">
                           </span>
                          <span class="owonedHouse-wrap-words">
                              <span class="owonedHouse-wrap-big">{{loginInfo.cappUserInfo.regionName}}{{loginInfo.cappUserInfo.buildingNum}}栋{{loginInfo.cappUserInfo.unit}}单元{{loginInfo.cappUserInfo.floor}}层{{loginInfo.cappUserInfo.roomNum}}号</span>
                              <span v-if="loginInfo.cappUserInfo.cuserType === 1" class="owonedHouse-wrap-small owonedHouse-wrap_period">合同期限：{{loginInfo.cappUserInfo.liveStartTime|normalDate}}至{{loginInfo.cappUserInfo.liveEndTime|normalDate}}</span>
                              <span class="owonedHouse-wrap-small owonedHouse-wrap_relation">{{loginInfo.cappUserInfo.applicantName}}</span >
                          </span>
                          <p class="check-txt rel-position" v-if="myInfo.bindHouseStatus === 2">待审核
                          </p>
                        </div>
                    </div>
                      <span slot="right" @click="outBindHouse">删除</span>
                  </van-cell-swipe>
                </div>
    			  </div>
    		</div>
        <div class="mark-warn-info" v-if="myInfo.bindHouseStatus === 2">
          <p>经过承租人审核成为同住人，开启更多功能。</p>
        </div>
    		<div class="owonedHouse-footer-others" v-if="myInfo.bindHouseStatus === 1">
    			<div class="others_households" v-if="myInfo.otherLivers.length !== 0">房屋其他住户:</div>
    			<div class="owonedHouse_resident">
            <livingCard v-show="loginInfo.cappUserInfo.cuserType === 1 || (loginInfo.cappUserInfo.cuserType === 2 && item.bindHouseStatus !== 2)" :data="item" v-for="(item, index) in myInfo.otherLivers" :key="index"/>
          </div>
    		</div> 
    	</div>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
import sailPage from "@/components/sail-page.vue";
import livingCard from "@/common/widget/livingCard.vue";
export default {
  components: {
    sailPage,
    livingCard,
  },
  computed: {
    ...mapState({
      loginInfo: state => state.loginModule.loginInfo,
      myInfo: state => state.bindHouseModule.myInfo
    })
  },
  asyncData({store, route}) {
    //let id = route.params.id;
    return store.dispatch("bindHouseModule/viewHouseInfo").then(res => {
      if(!res) {
        //
        setTimeout(() => {
          location.href = "#/bindHouseCheck";
        }, 1000);
      }
    });
  },
  data: function() {
    return {
      name: "template",
      active: 2,
      showIcon:false,
      message:"管理",
      mapName: {
        1: "承租人",
        2: "同住人"
      }
    };
  },
  methods: {
    outBindHouse() {
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在解绑房屋"
      });
      this.$store.dispatch("bindHouseModule/outBindHouse").then(res => {
          
        if(res) {
          Toast.clear();
          res.Toast.success({
            duration: 1000,
            message: "解绑成功"
          });
          this.$router.push({ path: "/MyPage" }); // -> 编程式跳转
          this.$store.commit("loginModule/CLEAR_LOGIN_HOUSE_INFO");
        }
      });
    },
    handleClose(){
      this.showIcon = !this.showIcon;
      this.message = "完成";
    }
  }
};
</script>
<style lang='less'>
  .manage-owned-house {
    .van-cell-swipe__right {
      background: red;
      padding: 0 16px;
      line-height: 80px;
      color: white;
    }
  }
</style>
<style lang="less" scoped>
@imgSize:38px;
@wordsSize:40px;
@numSize:5px;
  .check-txt {
    color: red;
    font-size: 14px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
  }
  .manage-owned-house{
    .mark-warn-info {
      font-size: 14px;
      color: #FF2929;
      text-align: left;
      padding-left: 12px;
    }
  	.manage_ststus {
  		color: red;
  	}
  	.owonedHouse-header {
  		background: #fff;
  		margin:auto;
  		min-height: 45px;
  		position: relative;
  		.owonedHouse-header_nave {
  		  display: flex;
  		  font-size: 12px;
  		  width: 340px;
  		  position: absolute;
  		  left: 50%;
  		  top: 50%;
  		  transform: translate(-50%,-50%);
  		  text-align: center;
  		  justify-content: space-between;
  		  height: 25px;
  		  line-height: 25px;
  		  .nav-icon {
  		    color: #8C8C8C;
  		    text-align: center;
  		  }
  		  .owonedHouse-header_icon {
  		    color: #8C8C8C;
  		    width: 13px;
  		    height: 21px;
  		    line-height: 25px;
  		  }
  		  .owonedHouse-header_words {
  		    font-size: 17px;
  		  }
  		  .owonedHouse-header_manage {
  		    font-size: 15px;
  		  }
  		}
  	}
    .owonedHouse_resident {
      display: flex;
      flex-wrap: wrap;
    }
  	.owonedHouse-login {
  		width: 375px;
  		height: 175px;
  		.login_img {
  			width: 375px;
  		}
  	}
  	.owonedHouse-details {
  		margin-top: 15px;
		.MyowonedHouseStatus {
			position: relative;
			.owonedHouse-icon {
				position: absolute;
				right: 10px;
				top: -10px;
				font-size: 22.4px;
				color: red;
			}
		  .owonedHouse-wrap {
		    width: 350px;
		    // min-height: 90px;
		    border-radius: 5px;
		    margin-bottom: 15px;
		    margin-left: 12px;
		    background: #fff;
        box-shadow: 0px 1px #fff;
		    .owonedHouse-wrap-main{
          padding-top: 15px;
		      padding-bottom: 10px;
		      text-align: center;
		      .owonedHouse-wrap-theme {
		        display: flex;
		        padding-left: 15px;
		        .owonedHouse-wrap-words {
		          display: flex;
		          flex-direction: column;
		          text-align: left;
		          padding-left: 15px;
              justify-content: center;
		        }
		        .owonedHouse-wrap-portrait {
		        	width: 30px;
		        	height: 28.77px;
		        	padding-top: 10px;
              padding-bottom: 10px;
					.active-wrap_img {
					  width: 30px;
					  overflow: hidden;
					}
		        }
		        .owonedHouse-wrap-big {
		          font-size: 14px;
		          height: 14px;
		          line-height: 14px;
		        }
		        .owonedHouse-wrap_relation {
		          padding-top: 5px; 
		        }
		        .owonedHouse-wrap_period {
		          padding-top: 8px; 
		        }
		        .owonedHouse-wrap-small {
				  font-size: 12px;
				  color: #AFAFAF;
		        }
		      }
		    }
		  }
		}
  	}
  	.owonedHouse-footer-others {
      margin-bottom: 100px;
  		.others_households {
        margin: 25px 0px 20px 15px;
  			font-size: 14px;
  			color: #AFAFAF;
  			text-align: left;
  		}
  	}
  }
</style>