<template>
<div>
  <div class="list-container flex column">
    <div class="title">
      <span style="float:left;color:#fff;margin-left:30px;">信息关联</span>
      <span style="float:right;color:#fff;cursor:pointer;"  @click="$emit('close')">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <div class="householdercontainer flex-1 flex column">
      <div class="fz-14 fc-w flex ai-c">
        <span>{{ peoInfoData.name }}（{{ peoInfoData.passIdCard }}）</span>
        <span class="areaLabel">{{ peoInfoData.areaName }}</span>
      </div>
      <div class="flex-1 flex fz-14 fc-w ai-c">
        <div class="tab-li flex ai-c" v-for="(item,index) in tableData" :key="index" :class="tabIndex==index?'active':''" @click="tabliClick(index)">
          <div class="lefts max-h">{{ item.name }}</div>
          <div class="rights max-h">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</div>  

</template>
<script>
import { getMethodCommonCity, postMethodCommonCity } from '../../../api/cityManageApi';
export default {
  name:"HouseHolderList",
  props:["searchKeyword"],
  data(){
    return{
      tableData:[],
      peoInfoData: {},
      tabIndex: null
    }
  },
  watch:{
    'searchKeyword':function(e){
      this.peoInfoData = e;
      this.getList();
    }
  },
  created(){
    this.peoInfoData = this.searchKeyword;
    this.getList();
  },
  methods:{
    getList(){
      getMethodCommonCity("/Agro_Screen/LoadInfoByIdCard",{idcard:this.peoInfoData.idCard}).then(res => {
        let rel = res.data
        this.tableData = [
          { name: '宅基地' , value: rel.buildcount },
          { name: '承包地' , value: rel.landCount },
          { name: '未承包到户土地' , value: rel.wasteCount }
        ]
      })
    },
    tabliClick(index){
      this.tabIndex = index
      let obj = {
        index: index,
        idCard: this.peoInfoData.idCard
      }
      this.$emit("getPeoAreaData",obj);
    },
  }
}
</script>
<style scoped>
.list-container{
  width: 740px;
  padding:12px;
  height: 160px;
  background: rgba(13,48,72,0.8);
  border: 1px solid #1081FF;
}
.title{
  cursor:move;
  height:40px;
  background:url(/images/cim/titlebg.png);
  background-repeat: no-repeat;
}
.areaLabel{
  height: 24px;
  line-height: 24px;
  background: #FF943A;
  border-radius: 12px;
  padding: 0 15px;
  margin-left: 20px;
  font-size: 12px;
}
.householdercontainer{
  padding: 0 20px;
}
.tab-li{
  background: #1361B8;
  height: 40px;
  margin-right: 20px;
  cursor: pointer;
}
.tab-li.active{
  height: 38px;
  border: 1px solid #03EDFF;
}
.tab-li .lefts{
  padding: 0 15px;
  background: #1B75D9;
  line-height: 40px;
}
.tab-li .rights{
  width: 45px;
  line-height: 40px;
}
  
</style>