<template>
   <div class="LivingCard" @click="checkPerson">
     <div class="resident-wrap">
       <div class="resident-wrap-main">
         <div class="resident-wrap-theme">
          <span class="resident-wrap-portrait">
            <img class="active-wrap_img" :src="data.headImg || 'https://tse4-mm.cn.bing.net/th?id=OIP.7OUBGGzEuAzrCdBS9vcLRQAAAA&w=199&h=198&c=7&o=5&pid=1.7'"> 
          </span>
           <span class="resident-wrap-words">
            <span class="resident-wrap-words_header">
              <span class="resident-wrap-big">{{data.userName || '无名氏'}}</span>
            </span>
            <span class="resident-wrap-small resident-wrap_num">
                {{data.relationshipName}}
                <span class="mark-info" v-if="data.bindHouseStatus === 2">待审核</span>
            </span>
           </span>
         </div>
       </div>      
     </div>
    </div>
</template>

<script>
//import { mapState } from 'vuex'
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  name: "this",
  props: ["data", "iconType"],
  components: {
    //addPane
  },
  computed: {
    // ...mapState({
          
    // })
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "checkPerson",
    };
  },
  methods: {
    checkPerson() {
      //
        
      //
      if(this.data.bindHouseStatus === 2) {
        Dialog.confirm({
          title: "审核同住人",
          message: `<p>姓名：${this.data.userName || "无名氏"}</p> <p>联系电话：${this.data.phoneFilter}</p> <p>身份：${this.data.relationshipName || "无关系数据"}</p> <p>申请时间：${new Date().Format("yyyy-MM-dd")}</p>`
        }).then(() => {
          Toast.loading({
            duration: 0,       // continuous display toast
            forbidClick: true, // forbid click background
            loadingType: "spinner",
            message: "正在发送请求"
          });
          return this.$store.dispatch("bindHouseModule/checkLiveWith", this.data.id).then(res => {
            if(res) {
              Toast.clear();
              this.$store.dispatch("bindHouseModule/viewHouseInfo");
            }
          });
        }).catch(() => {
          // on cancel
          Toast.clear();
        });
      }
        
      //this.Personnice = true;
        
        
      //this.Personnice = true;
    }
  }
};
</script>
<style scoped lang='less'>
@imgSize:38px;
@wordsSize:40px;
@numSize:5px;
    .LivingCard {
      .live-person-info {
        text-align: left;
        padding-top: 10px;
        padding-left: 20px;
        padding-bottom: 10px;
      }
      .clean:after {
        content:'';
        height: 0;
        line-height: 0;
        display: block;
        overflow: hidden;
        clear: both;
      };
      .resident-wrap {
        width: 168px;
        height: 69px;
        border-radius: 5px;
        margin-bottom: 15px;
        margin-left: 12px;
        background: #fff;
        .mark-info {
          color: #FF2929;
        }
        .resident-wrap-main{
          padding-top: 15px;
          text-align: center;
          .resident-wrap-theme {
            display: flex;
            padding-left: 15px;
            .resident-wrap-words {
              margin-top: -8px;
              height: @wordsSize;
              line-height: @wordsSize;
              padding-left: 10px;
              display: flex;
              flex-direction: column;
              .resident-wrap-words_header {
                display: flex;
              }
            }
            .active-wrap_img {
              background: #ccc;
              width: @imgSize;
              height: @imgSize;
              line-height: @imgSize;
              border-radius: 50%;
            }
            .resident-wrap-big {
              font-size: 14px;
            }
            .resident-wrap-small {
              font-size: 12px;  
            }
            .resident-wrap_relation {
              padding-left: 5px;
            }
            .resident-wrap_num {
              width: 100%;
              height: @numSize;
              line-height: 15px;  
              text-align: left;
            }
          }
        }
      }
    }
</style>