 <template>
  <sail-page type="loading-view" title="我的同住人">
    <div slot="content">     
        <div class="fellowResident">
          <div class="fellowResident-header">
            <div class="fellowResident-header_nave">
                <p class="fellowResident-header_icon">
                  <router-link class="link" to="/MyPage">
                    <svg class="icon nav-icon" aria-hidden="true">
                      <use xlink:href="#icon-fanhui"/>
                    </svg>
                  </router-link>
                </p>
                <p class="fellowResident-header_words">我的同住人</p>
                <p class="fellowResident-header_manage manage_ststus" @click="handleClose">{{message}}</p>
            </div> 
          </div>
          <emptyPageCard :isEmptyType="otherLivers.length === 0?'fellowRent':'normal'"/>
          <div class="fellowResident-content">
            <!-- <myResidentStatus></myResidentStatus> -->
            <myResidentStatus :data="item" v-for="(item, index) in otherLivers" :key="index"/>
          </div>
        </div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import myResidentStatus from "@/common/widget/myResidentStatus.vue";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
import { mapState } from "vuex";
export default {
  components: {
    sailPage,
    myResidentStatus,
    emptyPageCard
  },
  computed: {
    ...mapState({
      myInfo: state => state.bindHouseModule.myInfo,
    }),
    otherLivers(){
      if(this.myInfo){
        return this.myInfo.otherLivers;
      }
      return [];
         
    }
  },
  mounted(){
    
  },
  asyncData({store, route}) {
    //let id = route.params.id;
    return store.dispatch("bindHouseModule/viewHouseInfo").then(res => {
          
    });
  },
  data: function(){
    return {
      message:"",
    }; 
  },
  methods: {
    handleClose(){
      this.showIcon = !this.showIcon;
      this.message = "完成";
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
   .fellowResident {
     .fellowResident-header {
      background: #fff;
      margin:auto;
      min-height: 45px;
      position: relative;
      .fellowResident-header_nave {
        display: flex;
        width: 340px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        justify-content: space-between;
        height: 25px;
        line-height: 28px;
        .nav-icon {
          color: #8C8C8C;
          font-size: 18px;
        }
        .fellowResident-header_words {
          font-size: 17px;
        }
        .fellowResident-header_manage {
          font-size: 15px;
        }
      }
     }
     .fellowResident-content {
      margin-top: 15px;
     }
   }
</style>