<template>
  <div class="DetailPeople" v-if="data.resident">
    <u-navbar back-icon-color="#000" title="居民管理" title-color="#000" title-width="300" title-size="32" 
        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
    <div class="header-content-bg">
      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
    </div>
    <div class="top">
      <div class="photos">
        <img :src="data.resident.photo" alt="" v-if="data.resident && data.resident.photo" />
        <img src="https://cdn.sinoecare.com/i/2024/07/16/66963d7ce4040.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>
        <span class="item-tag" v-for="(items, indexs) in data.resident.residentLabelList" :key="indexs">{{items.labelName}}</span>
      </div>
    </div>
    <div class="user-content">
      <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="https://cdn.sinoecare.com/i/2024/07/16/66963d8648531.png" alt="" v-if="tabIndex==index && index != 0">
            <img src="https://cdn.sinoecare.com/i/2024/07/16/66963d8c2c8fe.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 class="label">籍贯</span>
            <span class="value">{{ data.resident && data.resident.birthplaceAreaName }}</span>
          </div>

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

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

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

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

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

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

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

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

    <!-- <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',
  appName: '居民档案',
  customNavigation: true,
  data() {
    return {
      id: '',
      data: [],
      type: 0, //0查看详情  1审核详情
      tabList:[],
      tabIndex: 0,
      backgroundNavbar: {
        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
        backgroundSize: 'cover',
      },
    }
  },
  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() {
    uni.setNavigationBarColor({
      frontColor: 'black',
      backgroundColor: '#ffffff'
    })
  },
  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: 'https://cdn.sinoecare.com/i/2024/07/16/66963dd133cfd.png',
            activeIcon:  'https://cdn.sinoecare.com/i/2024/07/16/66963dd974ad1.png',
            name: '基本信息',
          }
          this.tabList.unshift(info)
          } else {
            this.tabList =[{
              icon: 'https://cdn.sinoecare.com/i/2024/07/16/66963dd133cfd.png',
              activeIcon:  'https://cdn.sinoecare.com/i/2024/07/16/66963dd974ad1.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%;
  .header-content-bg {
    width: 100%;
    position: fixed;
    z-index: -1;
    img {
      width: 100%;
      height: 592px; 
    }
  }
  .top {
    display: flex;
    padding: 48px 32px 32px 32px;
    box-sizing: border-box;
    width: calc(100% - 64px);
    margin: 0 0 32px 32px;
    border-radius: 16px;
    background-color: #fff;
    .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;
          width: 88px;
          line-height: 40px;
          text-align: center;
          background: #FFECEF;
          border-radius: 8px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 24px;
          color: #F46;
          margin-right: 16px;
        }
        .names {
          font-size: 32px;
          font-weight: 600;
        }
        .householdNames {
          line-height: 44px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 32px;
          color: #5AAD6A;
        }
      }
      .rightBottom {
        margin: 8px 0 16px 0;
        line-height: 40px;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #999;
      }
      .item-tag {
        display: inline-block;
        line-height: 44px;
        padding: 0 10px;
        background-color: #F0F2F5;
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #8891A1;
        margin: 0 12px 8px 0;
        border-radius: 6px;
      }
    }
  }

  .user-content {
    width: calc(100% - 64px);
    border-radius: 16px;
    background-color: #fff;
    padding-bottom: 64px;
    margin: 0 0 68px 32px;
  }

  .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 {
      padding: 32px 0;
      font-family: PingFangSC-SNaNpxibold;
      font-weight: 600;
      font-size: 32px;
      color: #333;
      line-height: 44px;
    }

    .contents {
      .item {
        display: flex;
        justify-content: space-between;
        padding: 14px 0;
        line-height: 44px;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #999;
        .phones {
          color: #3d94fb;
        }
        .label{
          width: 200px;
          color: #999;
        }
        .value{
          width: calc(100% - 200px);
          text-align: right;
          word-break: break-all;
          color: #333;
        }
      }
    }
  }

  .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>
