<template>
   <div class="MyResidentStatus" @click="checkPerson">
      <div class="resident__main_theme">
         <div class="resident-wrap">
           <van-cell-swipe :right-width="65">
             <div class="resident-wrap-main">
               <div class="resident-wrap-theme">
                <span class="resident-wrap-portrait">
                  <img class="active-wrap_img" src="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 class="resident-wrap-small resident-wrap_relation">{{data.relationshipName || '无关系数据'}}</span>
                    </span>
                    <span class="resident-wrap-small resident-wrap_num">
                        {{data.phoneFilter}}
                        <span class="mark-info" v-if="data.bindHouseStatus === 2">待审核</span>
                    </span>
                  </span >
               </div>
             </div>   
             <span slot="right" @click="deleteLiveWiths(data.id)">删除</span>
           </van-cell-swipe>
         </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: "template"
    };
  },
  methods: {
    deleteLiveWiths(id) {
      
      this.$store.dispatch("bindHouseModule/deleteLiveWith", id).then(res => {
        if(res) {
          res.Toast.success({
            duration: 1000,
            message: "删除该同住人成功"
          });
          this.$store.dispatch("bindHouseModule/viewHouseInfo");
        }
      });
    },
    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;
    }
  }
};
</script>
<style lang="less">
  .MyResidentStatus {
    .van-cell-swipe__right {
      background: red;
      padding: 0 16px;
      line-height: 80px;
      color: white;
    }
  }
</style>
<style scoped lang='less'>
@imgSize:38px;
@wordsSize:40px;
@numSize:5px;
    .MyResidentStatus {
       .mark-info {
          color: #FF2929;
        }
      .resident__main_theme{
        position: relative;
        .resident-icon {
          position: absolute;
          right: 10px;
          top: -10px;
          font-size: 22.4px;
          color: red;
        }
      }
      .resident-wrap {
        width: 350px;
        border-radius: 5px;
        margin-bottom: 15px;
        margin-left: 12px;
        background: #fff;
        .resident-wrap-main{
          padding-top: 15px;
          padding-bottom: 10px;
          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 {
              text-align: left;
              height: 10px;
              line-height: 30px;
              width: 100%; 
            }
          }
        }
      }
    }
</style>