<template>
  <div class="DetailPeople" v-if="data.resident">

    <div class="top">
      <div class="photos">
        <img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
        <img src="./components/img/44.png" alt="" v-else />
      </div>

      <div class="right">
        <div class="rightTop">
          <span class="names">{{ data.resident && data.resident.name }}<span v-if="data.resident.fileStatus == 1" class="fileStatuss"> 已注销 </span></span>
          <span class="householdNames" v-if="data.resident && data.resident.householdName == 1">户主</span>
          <span class="householdNames" v-else>
            {{ $dict.getLabel('householdRelation', data.resident && data.resident.householdRelation) }}
          </span>
        </div>

        <div class="rightBottom" v-if="data.resident && data.resident.phone">{{ data.resident.phone }}</div>
      </div>
    </div>

    <div class="line"></div>

    <div class="tab-list">
      <div v-for="(item, index) in tabList" :key="index" :class="tabIndex == index ? 'tab-item active' : 'tab-item' " @click="tabIndex=index">
        <div v-if="index == 0">
          <img :src="item.activeIcon" alt="" v-if="tabIndex==0">
          <img :src=" item.icon" alt="" v-if="tabIndex!=0">
        </div>
        <div v-if="index != 0">
          <img src="./components/img/tsrq备份@2x.png" alt="" v-if="tabIndex==index && index != 0">
          <img src="./components/img/tsrq@2x.png" alt="" v-if="tabIndex!=index && index != 0">
        </div>
        
        <p v-if="index==0">{{item.name}}</p>
        <p v-else class="type">{{item.applicationName}}</p>
      </div>
    </div>
    <!-- 基本信息 -->
    <div v-if="tabIndex == 0">
      <div class="middle">
      <div class="hint">个人基本信息</div>

      <div class="contents">
        <div class="item">
          <span>籍贯</span>
          <span>{{ data.resident && data.resident.birthplaceAreaName }}</span>
        </div>

        <div class="item">
          <span>身份证号</span>
          <span>{{ data.resident && data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
        </div>

        <div class="item">
          <span>民族</span>
          <span v-if="data.resident && data.resident.nation"> {{ $dict.getLabel('nation', data.resident.nation) }}</span>
        </div>

        <div class="item">
          <span>文化程度</span>
          <span v-if="data.resident && data.resident.education">{{ $dict.getLabel('education', data.resident.education) }}</span>
        </div>

        <div class="item">
          <span>婚姻状况</span>
          <span v-if="data.resident && data.resident.maritalStatus">{{ $dict.getLabel('maritalStatus', data.resident.maritalStatus) }}</span>
        </div>

        <div class="item">
          <span>政治面貌</span>
          <span v-if="data.resident && data.resident.politicsStatus">{{ $dict.getLabel('politicsStatus', data.resident.politicsStatus) }}</span>
        </div>

        <div class="item">
          <span>兵役状况</span>
          <span v-if="data.resident && data.resident.militaryStatus">{{ $dict.getLabel('militaryStatus', data.resident.militaryStatus) }}</span>
        </div>

        <div class="item">
          <span>宗教信仰</span>
          <span v-if="data.resident && data.resident.faithType">{{ $dict.getLabel('faithType', data.resident.faithType) }}</span>
        </div>

        <div class="item">
          <span>职业</span>
          <span v-if="data.resident && data.resident.job">{{ $dict.getLabel('job', data.resident.job) }}</span>
        </div>
      </div>
    </div>

    <div class="lines"></div>

    <div class="bottom">
      <div class="hint">联络信息</div>

      <div class="contents">
        <div class="item">
          <span>联系方式</span>
          <span class="phones" v-if="data.resident && data.resident.phone" @click="callPhone(data.resident.phone)">{{ data.resident.phone }}</span>
        </div>

        <div class="item">
          <span class="label">现住址</span>
          <span class="value" v-if="data.resident && data.resident.currentAreaName">{{ data.resident.currentAreaName }}</span>
        </div>

        <div class="item">
          <span class="label">现住详细地址</span>
          <span class="value" v-if="data.resident && data.resident.currentAddress">{{ data.resident.currentAddress }}</span>
        </div>

        <div class="item">
          <span class="label">户籍地址</span>
          <span class="value" v-if="data.resident && data.resident.householdAreaName">{{ data.resident.householdAreaName }}</span>
        </div>

        <div class="item">
          <span class="label">户籍详细地址</span>
          <span class="value" v-if="data.resident && data.resident.householdAddress">{{ data.resident.householdAddress }}</span>
        </div>

        <div class="item" v-if="type == 1 && data.resident.auditStatus != 0">
          <span class="label">处理结果</span>
          <span class="value">{{ data.resident.auditStatus == 1 ? '通过' : '不通过' }}</span>
        </div>

        <div class="item"  v-if="type == 1 && data.resident.auditStatus != 0">
          <span class="label">原因</span>
        </div>
        <div class="item">{{data.resident.auditOpinion || ''}}</div>
      </div>
    </div>
    </div>
    <!-- 特殊人群 -->
    <div v-if="tabIndex != 0 &&  tabList &&  tabList.length">
      <div class="spacial" v-for="(item,index) in tabList" :key="index" v-if="tabIndex == index">
        <div class="specialList" v-for="(t,indexs) in item.tableInfos" :key="indexs" v-if="item.tableInfos && item.tableInfos.length">
          <div class="spacial-row">
            <div>{{ t.fieldName }}</div>
            <div>{{ t.fieldValue }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="pad-b112" v-if="data.resident.auditStatus == 0 && type == 1"></div>
    <div class="footer" v-if="data.resident.auditStatus == 0 && type == 1">
      <div @click="toContent">不通过</div>
      <div class="pass" @click="examine(1)">通过</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailPeople',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      data: [],
      type: 0, //0查看详情  1审核详情
      tabList:[],
      tabIndex: 0,
    }
  },
  computed: {},
  watch: {},
  onLoad(o) {
    this.id = o.id
    this.type = o.type
    this.$dict.load('householdRelation', 'nation', 'education', 'maritalStatus', 'politicsStatus', 'militaryStatus', 'faithType', 'job', 'fileStatus').then(() => {
      this.getDetail()
    })
    uni.$on('updatePeople', res => {
      this.getDetail()
    })
  },
  onShow() {
    document.title = '家庭成员信息'
  },
  methods: {
    getDetail() {
      this.$instance.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
        if (res.code == 0) {
          this.data = res.data
          if (res.data.resident.tsrqInfos) {
          this.tabList = res.data.resident.tsrqInfos
          let info = {
            icon: require('./components/img/icon1n@2x.png'),
            activeIcon:  require('./components/img/icon1h@2x.png'),
            name: '基本信息',
          }
          this.tabList.unshift(info)
          } else {
            this.tabList =[{
              icon: require('./components/img/icon1n@2x.png'),
              activeIcon:  require('./components/img/icon1h@2x.png'),
              name: '基本信息',
            }]
          }
        }
      })
    },
    callPhone(phone) {
      uni.makePhoneCall({ phoneNumber: phone })
    },
    examine(pass) {
      this.$confirm('确认通过该审核？').then(() => {
        this.$instance.post(`/app/appresident/examine?id=${this.id}&pass=${pass}`).then((res) => {
          if (res.code == 0) {
            uni.$emit('updatePeople')
            this.$u.toast('审核成功')
            setTimeout(() => {
              uni.navigateBack()
            }, 600)
          }
        })
      })
      
    },
    toContent() {
      uni.navigateTo({url: `./Content?id=${this.id}`})
    }
  },
}
</script>

<style scoped lang="scss">
.DetailPeople {
  height: 100%;
  background: #fff;
  .top {
    display: flex;
    padding: 48px 32px 32px 32px;
    .photos {
      img {
        width: 112px;
        height: 112px;
        border-radius: 50%;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-left: 24px;
      .rightTop {
        display: flex;
        justify-content: space-between;
        .fileStatuss {
          display: inline-block;
          margin-left: 30px;
          color: #ff4466;
          background: #ffecef;
          border-radius: 8px;
          width: 120px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-weight: 400;
          font-size: 28px;
        }
        .names {
          font-size: 32px;
          font-weight: 600;
        }
        .householdNames {
          margin-left: 30px;
          font-size: 26px;
          font-weight: 500;
          color: #5aad6a;
        }
      }
      .rightBottom {
        margin-top: 16px;
      }
    }
  }

  .tab-list{
  padding-top: 32px;
  display: flex;
  word-wrap: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  .tab-item{
    display: inline-block;
    width: 148px;
    height: 136px;
    background-color: #F8F9FB;
    border-radius: 8px;
    text-align: center;
    margin-left: 32px;
    img{
      width: 40px;
      height: 40px;
      margin-top: 30px;
    }
    p{
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #C5C9CD;
      line-height: 32px;
      margin-top: 8px;
    }
  }
  .type {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .active{
    background-color: #357CE3;
    p{
      color: #fff;
    }
  }
}

  .line {
    height: 8px;
    background: #f5f5f5;
  }

  .middle,
  .bottom {
    padding: 0 32px;

    .hint {
      font-weight: 600;
      padding: 32px 0;
    }

    .contents {
      .item {
        display: flex;
        justify-content: space-between;
        padding: 14px 0;
        .phones {
          color: #3d94fb;
        }
        .label{
          width: 200px;
        }
        .value{
          width: calc(100% - 200px);
          text-align: right;
          word-break: break-all;
        }
      }
    }
  }

  .lines {
    height: 4px;
    background: #f5f5f5;
  }

  .spacial {
    margin-top: 30px;
    .specialList {
      padding: 14px 32px;
      .spacial-row {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .pad-b112{
    padding-bottom: 112px;
    background-color: #f5f5f5;
  }
  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    font-size: 32px;
    font-family: PingFangSC-Regular, PingFang SC;
    height: 112px;
    line-height: 112px;
    text-align: center;
    div{
      flex: 1;
      background: #fff;
      color: #FF4466;
    }

    .pass {
      background: #1365DD;
      color: #FFF;
    }
  }
}
</style>
