<template>
  <popup title="居民详情" v-if="popupShow" @close="handleClose">
    <template v-slot:cnt>
      <div class="m-info">
        <div class="subtitle">
          <i class="i-chunk"></i>
          <span>基本信息</span>
          <i class="i-line"></i>
        </div>
        <div class="row">
          <div class="item">
            <div class="field">所属网格：</div>
            <div class="value">
              <span v-if="info.community">{{ info.community ? info.community : "" }}</span>
              <span v-if="info.grid"> - {{ info.grid ? info.grid : "" }}</span>
            </div>
          </div>
          <div class="item">
            <div class="field">所属房屋：</div>
            <div class="value">
              <span v-if="info.village">{{ info.village ? info.village : "" }}</span>
              <span v-if="info.building"> - {{ info.building ? info.building : "" }}</span>
              <span v-if="info.unit"> - {{ info.unit ? info.unit : "" }}</span>
              <span v-if="info.room"> - {{ info.room ? info.room : "" }}</span>
            </div>
          </div>
          <div class="item">
            <div class="field">本地户籍：</div>
            <div class="value">{{ info.census_type ? info.census_type : "" }}</div>
          </div>
        </div>
        <div class="row">
          <div class="item">
            <div class="field">居民姓名：</div>
            <div class="value">{{ info.name ? info.name : "" }}</div>
          </div>
          <div class="item">
            <div class="field">出生日期：</div>
            <div class="value">{{ info.birthday ? info.birthday : "" }}</div>
          </div>
          <div class="item">
            <div class="field">性别：</div>
            <div class="value">{{ info.gender ? info.gender : "" }}</div>
          </div>
          <div class="item">
            <div class="field">民族：</div>
            <div class="value">{{ info.ethnic ? info.ethnic : "" }}</div>
          </div>
          <div class="item">
            <div class="field">联系电话：</div>
            <div class="value">{{ info.telephone ? info.telephone : "" }}</div>
          </div>
          <div class="item">
            <div class="field">证件号：</div>
            <div class="value">{{ info.idcard ? $sensitive(info.idcard, 0, 14) : "" }}</div>
          </div>
          <div class="item">
            <div class="field">备注：</div>
            <div class="value">{{ info.resident_remark ? info.resident_remark : "" }}</div>
          </div>
        </div>

        <div class="subtitle">
          <i class="i-chunk"></i>
          <span>分类信息</span>
          <i class="i-line"></i>
        </div>

        <div class="row">
          <div class="item">
            <div class="field">居民分类：</div>
            <div class="value">
              <div class="u-categorys">
                <span v-if="info.crowd">党员</span>
                <span v-if="info.mlsp">低保人员</span>
                <span v-if="info.srs">保障房人员</span>
                <span v-if="info.unemployed">失业人员</span>
                <span v-if="info.woca">育龄妇女</span>
                <span v-if="info.exs">退役军人</span>
                <span v-if="info.ufs">统战人员</span>
                <span v-if="info.petitioner">信访人员</span>
                <span v-if="info.volunteer">志愿者</span>
                <span v-if="info.in_person">特扶人员</span>
                <span v-if="info.tenant">租户</span>
                <span v-if="info.float_popu">流动人口</span>
                <span v-if="info.special_popu">特殊人群</span>
                <span v-if="info.aaaa">独居老人</span>
                <span v-if="info.empty_nest">空巢老人</span>
                <span v-if="info.disability">失能老人</span>
                <span v-if="info.dementia">失智老人</span>
                <span v-if="info.adisability">残疾</span>
                <span v-if="info.ser_ill">大病</span>
                <span v-if="info.ncd">慢病</span>
              </div>
            </div>
          </div>
        </div>

        <div class="subtitle">
          <i class="i-chunk"></i>
          <span>其他信息</span>
          <i class="i-line"></i>
        </div>

        <div class="m-tabs">
          <div class="tab-btn" @click="subStartTabIndex" v-if="tabList.length > 7">
            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
          </div>
          <div v-show="index >= startTabIndex && index < startTabIndex + 7" class="tab" :class="currentTabIndex % tabList.length == index ? 'z-on' : ''" :key="'tab' + index" @click="currentTabIndex = index" v-for="(item, index) in tabList">
            {{ item }}
          </div>
          <div class="tab-btn" @click="addStartTabIndex" v-if="tabList.length > 7">
            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
          </div>
        </div>

        <div v-if="currentTab == '教育信息'">
          <div class="row">
            <div class="item">
              <div class="field">文化程度：</div>
              <div class="value">{{ info.education ? info.education : "" }}</div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.education_remark ? info.education_remark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '兴趣爱好'">
          <div class="row">
            <div class="item">
              <div class="field">兴趣：</div>
              <div class="value">{{ info.hobby ? info.hobby : "" }}</div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.hobby_remark ? info.hobby_remark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '宗教'">
          <div class="row">
            <div class="item">
              <div class="field">宗教：</div>
              <div class="value">{{ info.belief ? info.belief : "" }}</div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.belief_remark ? info.belief_remark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '健康'">
          <div class="row">
            <div class="item">
              <div class="field">残疾类别：</div>
              <div class="value">{{ info.disable_type ? info.disable_type : "" }}</div>
            </div>
            <div class="item">
              <div class="field">残疾等级：</div>
              <div class="value">{{ info.disable_degree ? info.disable_degree : "" }}</div>
            </div>
            <div class="item">
              <div class="field">残疾证号：</div>
              <div class="value">{{ info.disable_idcard ? info.disable_idcard : "" }}</div>
            </div>
            <div class="item">
              <div class="field">残疾说明：</div>
              <div class="value">{{ info.disable_remark ? info.disable_remark : "" }}</div>
            </div>
            <div class="item">
              <div class="field">监护人：</div>
              <div class="value">{{ info.guardian ? info.guardian : "" }}</div>
            </div>
            <div class="item">
              <div class="field">劳动能力：</div>
              <div class="value">{{ info.skill ? info.skill : "" }}</div>
            </div>
            <div class="item">
              <div class="field">非义务教育阶段助学：</div>
              <div class="value">
                {{ info.voluntaryEducationFlag ? info.voluntaryEducationFlag : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">所患大病：</div>
              <div class="value">
                {{ info.voluntaryEducationFlag ? info.voluntaryEducationFlag : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">大病患病时间：</div>
              <div class="value">{{ info.illnessCode ? info.illnessCode : "" }}</div>
            </div>
            <div class="item">
              <div class="field">所患慢性病：</div>
              <div class="value">
                {{ info.chronicDiseaseCode ? info.chronicDiseaseCode : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">慢病患病时间：</div>
              <div class="value">
                {{ info.chronicDiseaseTime ? info.chronicDiseaseTime : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">是否参保：</div>
              <div class="value">
                {{ info.chronicDiseaseTime ? info.chronicDiseaseTime : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">自付金额：</div>
              <div class="value">{{ info.selfPayAmount ? info.selfPayAmount : "" }}</div>
            </div>
            <div class="item">
              <div class="field">救助金额：</div>
              <div class="value">{{ info.selfPayAmount ? info.selfPayAmount : "" }}</div>
            </div>
            <div class="item">
              <div class="field">救助时间：</div>
              <div class="value">
                {{ info.deliveranceAmount ? info.deliveranceAmount : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">享受救助明细序号：</div>
              <div class="value">{{ info.deliveranceTime ? info.deliveranceTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.deliveranceNum ? info.deliveranceNum : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '工作'">
          <div class="row">
            <div class="item">
              <div class="field">工作单位：</div>
              <div class="value">{{ info.workunit ? info.workunit : "" }}</div>
            </div>
            <div class="item">
              <div class="field">职业：</div>
              <div class="value">{{ info.career ? info.career : "" }}</div>
            </div>
            <div class="item">
              <div class="field">离退休时间：</div>
              <div class="value">{{ info.retire_date ? info.retire_date : "" }}</div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.retire_remark ? info.retire_remark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '经济状况'">
          <div class="row">
            <div class="item">
              <div class="field">退休金额：</div>
              <div class="value">{{ info.retire_income ? info.retire_income : "" }}</div>
            </div>
            <div class="item">
              <div class="field">月收入：</div>
              <div class="value">{{ info.income ? info.income : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '居住'">
          <div class="row">
            <div class="item">
              <div class="field">籍贯：</div>
              <div class="value">{{ info.native ? info.native : "" }}</div>
            </div>
            <div class="item">
              <div class="field">户籍所在地：</div>
              <div class="value">{{ info.native_place ? info.native_place : "" }}</div>
            </div>
            <div class="item">
              <div class="field">现居住地：</div>
              <div class="value">
                {{ info.residence_current ? info.residence_current : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">人户状况：</div>
              <div class="value">{{ info.household ? info.household : "" }}</div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.household_remark ? info.household_remark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '家庭'">
          <div class="row">
            <div class="item">
              <div class="field">与户主关系：</div>
              <div class="value">{{ info.holdingrel ? info.holdingrel : "" }}</div>
            </div>
            <div class="item">
              <div class="field">居住情况：</div>
              <div class="value">{{ info.residence ? info.residence : "" }}</div>
            </div>
            <div class="item">
              <div class="field">婚姻状况：</div>
              <div class="value">{{ info.marital ? info.marital : "" }}</div>
            </div>
            <div class="item">
              <div class="field">配偶状况：</div>
              <div class="value">{{ info.spouse ? info.spouse : "" }}</div>
            </div>
            <div class="item">
              <div class="field">有无赡养人：</div>
              <div class="value">{{ info.supporters ? info.supporters : "" }}</div>
            </div>
            <div class="item">
              <div class="field">与赡养人关系：</div>
              <div class="value">
                {{ info.supporters_relation ? info.supporters_relation : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">赡养人联系电话：</div>
              <div class="value">
                {{ info.dependantMobile ? info.dependantMobile : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.familyInfoRemark ? info.familyInfoRemark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '党员'">
          <div class="row">
            <div class="item">
              <div class="field">入党时间：</div>
              <div class="value">{{ info.joinTime ? info.joinTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">转正时间：</div>
              <div class="value">{{ info.positiveTime ? info.positiveTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">所属支部：</div>
              <div class="value">{{ info.branchId ? info.branchId : "" }}</div>
            </div>
            <div class="item">
              <div class="field">是否流动党员：</div>
              <div class="value">{{ info.flowFlag ? info.flowFlag : "" }}</div>
            </div>
            <div class="item">
              <div class="field">流动党员活动证号：</div>
              <div class="value">{{ info.flowActNum ? info.flowActNum : "" }}</div>
            </div>
            <div class="item">
              <div class="field">职务：</div>
              <div class="value">{{ info.partyJob ? info.partyJob : "" }}</div>
            </div>
            <div class="item">
              <div class="field">是否退休：</div>
              <div class="value">{{ info.retiredFlag ? info.retiredFlag : "" }}</div>
            </div>
            <div class="item">
              <div class="field">是否党员中心户：</div>
              <div class="value">{{ info.centerFlag ? info.centerFlag : "" }}</div>
            </div>
            <div class="item">
              <div class="field">入党时所在党支部：</div>
              <div class="value">{{ info.joinBranchName ? info.joinBranchName : "" }}</div>
            </div>
            <div class="item">
              <div class="field">组织关系转入社区时间：</div>
              <div class="value">
                {{ info.joinCommunityTime ? info.joinCommunityTime : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">是否请长假：</div>
              <div class="value">{{ info.longHolidayFlag ? info.longHolidayFlag : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '保障房'">
          <div class="row">
            <div class="item">
              <div class="field">住房性质：</div>
              <div class="value">{{ info.housingNature ? info.housingNature : "" }}</div>
            </div>
            <div class="item">
              <div class="field">保障类型：</div>
              <div class="value">{{ info.securityType ? info.securityType : "" }}</div>
            </div>
            <div class="item">
              <div class="field">发证日期：</div>
              <div class="value">{{ info.certificateDate ? info.certificateDate : "" }}</div>
            </div>
            <div class="item">
              <div class="field">补贴编号：</div>
              <div class="value">{{ info.subsidyNum ? info.subsidyNum : "" }}</div>
            </div>
            <div class="item">
              <div class="field">补贴金额：</div>
              <div class="value">{{ info.subsidyAmount ? info.subsidyAmount : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '失业'">
          <div class="row">
            <div class="item">
              <div class="field">原工作单位：</div>
              <div class="value">{{ info.originWorkUnit ? info.originWorkUnit : "" }}</div>
            </div>
            <div class="item">
              <div class="field">失业时间：</div>
              <div class="value">{{ info.unemploymentTime ? info.unemploymentTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">失业证号：</div>
              <div class="value">{{ info.unemploymentTime ? info.unemploymentTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">再就业优惠证号：</div>
              <div class="value">{{ info.employmentNum ? info.employmentNum : "" }}</div>
            </div>
            <div class="item">
              <div class="field">技术特长：</div>
              <div class="value">{{ info.specialSkill ? info.specialSkill : "" }}</div>
            </div>
            <div class="item">
              <div class="field">失业原因：</div>
              <div class="value">
                {{ info.unemploymentReason ? info.unemploymentReason : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">是否就业困难对象：</div>
              <div class="value">
                {{ info.employmentHardFlag ? info.employmentHardFlag : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">劳动能力就业愿望：</div>
              <div class="value">{{ info.employmentWish ? info.employmentWish : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '退役军人'">
          <div class="row">
            <div class="item">
              <div class="field">入伍时间：</div>
              <div class="value">{{ info.joinArmyTime ? info.joinArmyTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">退伍时间：</div>
              <div class="value">{{ info.leaveArmyTime ? info.leaveArmyTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">服役单位：</div>
              <div class="value">{{ info.serviceUnit ? info.serviceUnit : "" }}</div>
            </div>
            <div class="item">
              <div class="field">接收单位：</div>
              <div class="value">{{ info.receiveUnit ? info.receiveUnit : "" }}</div>
            </div>
            <div class="item">
              <div class="field">待安置补助金：</div>
              <div class="value">{{ info.settlementAmount ? info.settlementAmount : "" }}</div>
            </div>
            <div class="item">
              <div class="field">培训状况：</div>
              <div class="value">{{ info.trainDesc ? info.trainDesc : "" }}</div>
            </div>
            <div class="item">
              <div class="field">参战时间开始日期：</div>
              <div class="value">{{ info.joinWarStartTime ? info.joinWarStartTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">参战时间截止日期：</div>
              <div class="value">{{ info.joinWarEndTime ? info.joinWarEndTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">现就业状况：</div>
              <div class="value">
                {{ info.employmentSituation ? info.employmentSituation : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">是否办理公益性岗位：</div>
              <div class="value">
                {{ info.pubWelfareJobFlag ? info.pubWelfareJobFlag : "" }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '统战人员'">
          <div class="row">
            <div class="item">
              <div class="field">职务：</div>
              <div class="value">{{ info.duty ? info.duty : "" }}</div>
            </div>
            <div class="item">
              <div class="field">探亲情况：</div>
              <div class="value">{{ info.visitation ? info.visitation : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '志愿者'">
          <div class="row">
            <div class="item">
              <div class="field">志愿者类别：</div>
              <div class="value">
                {{ info.volunteerCategory ? info.volunteerCategory : "" }}
              </div>
            </div>
            <div class="item">
              <div class="field">备注：</div>
              <div class="value">{{ info.volunteerRemark ? info.volunteerRemark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '老年人'">
          <div class="row">
            <div class="item">
              <div class="field">高龄补助：</div>
              <div class="value">{{ info.volunteerRemark ? info.volunteerRemark : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '特殊人群'">
          <div class="row">
            <div class="item">
              <div class="field">特殊人群类别：</div>
              <div class="value">
                {{ info.specialCategoryCode ? info.specialCategoryCode : "" }}
              </div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '出生信息'">
          <div class="row">
            <div class="item">
              <div class="field">出生地：</div>
              <div class="value">{{ info.birthplace ? info.birthplace : "" }}</div>
            </div>
            <div class="item">
              <div class="field">父亲姓名：</div>
              <div class="value">{{ info.father ? info.father : "" }}</div>
            </div>
            <div class="item">
              <div class="field">母亲姓名：</div>
              <div class="value">{{ info.mother ? info.mother : "" }}</div>
            </div>
            <div class="item">
              <div class="field">胎次：</div>
              <div class="value">{{ info.count ? info.count : "" }}</div>
            </div>
            <div class="item">
              <div class="field">申报日期：</div>
              <div class="value">{{ info.reportDate ? info.reportDate : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '死亡信息'">
          <div class="row">
            <div class="item">
              <div class="field">死亡时间：</div>
              <div class="value">{{ info.deathDate ? info.deathDate : "" }}</div>
            </div>
            <div class="item">
              <div class="field">加入原因：</div>
              <div class="value">{{ info.deathReason ? info.deathReason : "" }}</div>
            </div>
            <div class="item">
              <div class="field">移除时间：</div>
              <div class="value">{{ info.removeDate ? info.removeDate : "" }}</div>
            </div>
            <div class="item">
              <div class="field">移除原因：</div>
              <div class="value">{{ info.removeReason ? info.removeReason : "" }}</div>
            </div>
          </div>
        </div>

        <div v-if="currentTab == '迁出'">
          <div class="row">
            <div class="item">
              <div class="field">迁出信息：</div>
              <div class="value">{{ info.outOfTime ? info.outOfTime : "" }}</div>
            </div>
            <div class="item">
              <div class="field">迁出类别：</div>
              <div class="value">{{ info.type ? info.type : "" }}</div>
            </div>
            <div class="item">
              <div class="field">迁出原因：</div>
              <div class="value">{{ info.reason ? info.reason : "" }}</div>
            </div>
            <div class="item">
              <div class="field">迁出至组织：</div>
              <div class="value">{{ info.deptId ? info.deptId : "" }}</div>
            </div>
            <div class="item">
              <div class="field">小区：</div>
              <div class="value">{{ info.villageName ? info.villageName : "" }}</div>
            </div>
            <div class="item">
              <div class="field">楼号：</div>
              <div class="value">{{ info.buildName ? info.buildName : "" }}</div>
            </div>
            <div class="item">
              <div class="field">单元：</div>
              <div class="value">{{ info.unitName ? info.unitName : "" }}</div>
            </div>
            <div class="item">
              <div class="field">房屋：</div>
              <div class="value">{{ info.homeName ? info.homeName : "" }}</div>
            </div>
            <div class="item">
              <div class="field">外迁地址：</div>
              <div class="value">{{ info.address ? info.address : "" }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </popup>
</template>

<script>
import popup from "@/views/dataBoard/cpts/popup";
import { requestPostBi } from "@/js/dai/request-bipass";

export default {
  name: "residentDetails",
  props: {
    resiId: {
      type: String,
      default: "",
    },
    popupShow: {
      type: Boolean,
      default: false,
    },
  },

  components: { popup },

  data() {
    return {
      info: {
        woca: true,
        exs: false,
        srs: true,
        household: "--",
        holdingrel: "--",
        ethnic: "--",
        community: "--",
        user_id: "--",
        census_type: "--",
        aged: true,
        spouse: "--",
        mlsp: false,
        ncp: true,
        disable_idcard: "--",
        volunteer: false,
        village: "--",
        disable_degree: "--",
        marital: "--",
        native_place: "--",
        disable_type: "--",
        building: "--",
        disable_remark: "--",
        skill: "--",
        petitioner: true,
        unemployed: true,
        needs_group: "--",
        hobby: "--",
        unit: "--",
        gender: "--",
        retire_income: "--",
        workunit: "--",
        ufs: false,
        birthday: "--",
        in_person: false,
        adisability: false,
        household_remark: "--",
        belief: "--",
        education_remark: "--",
        education: "--",
        residence_current: "--",
        career: "--",
        empty_nest: false,
        idcard: "--",
        room: "--",
        guardian: "--",
        tenant: true,
        residence: "--",
        supporters: "--",
        ser_ill: false,
        ncd: true,
        belief_remark: "--",
        dementia: false,
        disability: true,
        telephone: "--",
        income: "--",
        native: "--",
        crowd: false,
        resident_remark: "--",
        hobby_remark: "--",
        retire_remark: "--",
        special_popu: true,
        street: "--",
        float_popu: true,
        supporters_relation: "--",
        name: "--",
        grid: "--",
        retire_date: "--",

        joinTime: "--",
        positiveTime: "--",
        branchId: "--",
        flowFlag: "--",
        flowActNum: "--",
        partyJob: "--",
        retiredFlag: "--",
        centerFlag: "--",
        joinBranchName: "--",
        joinCommunityTime: "--",
        longHolidayFlag: "--",
        ensure_house_id: "--",
        housingNature: "--",
        securityType: "--",
        certificateDate: "--",
        subsidyNum: "--",
        subsidyAmount: "--",
        unemployed_id: "--",
        originWorkUnit: "--",
        unemploymentTime: "--",
        unemploymentNum: "--",
        employmentNum: "--",
        specialSkill: "--",
        unemploymentReason: "--",
        employmentHardFlag: "--",
        employmentWish: "--",
        veteran_id: "--",
        joinArmyTime: "--",
        leaveArmyTime: "--",
        serviceUnit: "--",
        receiveUnit: "--",
        settlementAmount: "--",
        trainDesc: "--",
        joinWarStartTime: "--",
        joinWarEndTime: "--",
        employmentSituation: "--",
        pubWelfareJobFlag: "--",
        united_front_id: "--",
        duty: "--",
        visitation: "--",
        volunteer_id: "--",
        volunteerCategory: "--",
        volunteerRemark: "--",
        old_people_id: "--",
        oldSubsidy: "--",
        special_id: "--",
        specialCategoryCode: "--",
        birth_record_id: "--",
        birthplace: "--",
        father: "--",
        mother: "--",
        count: "--",
        reportDate: "--",
        death_record_id: "--",
        deathDate: "--",
        deathReason: "--",
        removeDate: "--",
        removeReason: "--",
        move_out_record_id: "--",
        outOfTime: "--",
        type: "--",
        reason: "--",
        deptId: "--",
        villageId: "--",
        villageName: "--",
        buildId: "--",
        buildName: "--",
        unitId: "--",
        unitName: "--",
        homeId: "--",
        homeName: "--",
        address: "--",
        residence_current: "--",
      },

      currentTabIndex: 0,
      startTabIndex: 0,
      BaseTabList: ["教育信息", "兴趣爱好", "宗教", "健康", "工作", "经济状况", "居住", "家庭"],
      tabList: [],
    };
  },
  watch: {
    popupShow: {
      handler(val) {
        if (val) {
          this.getApiData();
        }
      },
      immediate: true,
    },
  },
  computed: {
    currentTab() {
      return this.tabList[this.currentTabIndex];
    },
  },

  mounted() {
    this.getApiData();
  },

  methods: {
    addStartTabIndex() {
      const { startTabIndex, tabList } = this;
      if (startTabIndex < tabList.length - 7) {
        this.startTabIndex = startTabIndex + 1;
      } else {
        this.startTabIndex = tabList.length - 7;
      }
    },
    subStartTabIndex() {
      const { startTabIndex, tabList } = this;
      if (startTabIndex > 0) {
        this.startTabIndex = startTabIndex - 1;
      } else {
        this.startTabIndex = 0;
      }
    },

    handleClose() {
      this.$emit("close");
    },

    async getApiData() {
      this.getInfo();
    },

    // 根据房屋id获取详情
    async getInfo() {
      const url = "resident_info";
      const { data, code, msg } = await requestPostBi(
        url,
        {
          queryParam: {
            resident_id: this.resiId,
          },
        },
        {
          // mockId: 61172054,
        }
      );

      if (code === 0) {
        this.info = { ...this.info, ...data[0] };

        const { info } = this;
        let tabList = this.BaseTabList;
        info.crowd && tabList.push("党员");
        info.srs && tabList.push("保障房");
        info.unemployed && tabList.push("失业");
        info.exs && tabList.push("退役军人");
        info.ufs && tabList.push("统战人员");
        info.volunteer && tabList.push("志愿者");
        info.aged && tabList.push("老年人");
        info.special_popu && tabList.push("特殊人群");
        tabList.push("出生信息");
        tabList.push("死亡信息");
        tabList.push("迁出");
        this.tabList = tabList;
      } else {
        this.$message.error(msg);
      }
    },

    // 根据房屋id获取详情
    handlePageNoChange(page_num) {
      this.page_num = page_num;
      this.getList();
    },

    handleSizeChange(page_size) {
      localStorage.setItem("dataBoard_page_size", page_size);
      this.page_size = page_size;
      this.getList();
    },
    async getList() {
      const { org_id, listType, page_num, page_size, searchDate } = this;
      const start_date = searchDate[0];
      const end_date = searchDate[1];

      let peop_type = this.type2;

      this.loading = true;
      const url = "person_resour_list";
      const { data, code, msg } = await requestPostBi(
        url,
        {
          queryParam: {
            page_num,
            page_size,
            start_date,
            end_date,
            org_id,
            peop_type,
          },
        },
        {
          // mockId: 60068051,
        }
      );

      this.loading = false;

      if (code === 0) {
        this.srcTableData = data;
        // this.total = data.total;
        // service_num   avg_satisfaction
        this.list = data.map((item, index) => {
          return [
            index + 1,
            item.peop_name ? item.peop_name : "--",
            // item.peop_id ? item.peop_id : '--',
            item.peop_child_type ? item.peop_child_type : "--",
            item.service_num ? item.service_num : "--",
            item.service_ratio ? item.service_ratio : "--",
            item.avg_satisfaction ? item.avg_satisfaction : "--",
            item.sum_point ? item.sum_point : "--",
            { type: "operate", list: ["查看"] },
          ];
        });
      } else {
        this.$message.error(msg);
      }
      this.list = [
        {
          index: 1,
          peop_name: "置南于可",
          peop_child_type: "in nostrud commodo dolore",
          service_num: 57,
          service_ratio: 94,
          avg_satisfaction: 65,
          sum_point: 63,
          "": { type: "operate", list: ["查看"] },
        },
      ];
    },
    // async getInfo() {
    // 	const url = "resident_info";

    // 	const { data, code, msg } = await requestPostBi(
    // 		url,
    // 		{
    // 			queryParam: {
    // 				resident_id: this.resiId,
    // 			},
    // 		},
    // 		{
    // 			// mockId: 60235478,
    // 		}
    // 	);

    // 	if (code === 0) {
    // 		this.info = { ...this.info, ...data[0] };
    // 	} else {
    // 		this.$message.error(msg);
    // 	}
    // },
    async getCount() {
      const { org_id, listType, page_num, page_size, searchDate } = this;
      const start_date = searchDate[0];
      const end_date = searchDate[1];
      const url = "person_resour_list_num";
      let peop_type = this.type2;
      const { data, code, msg } = await requestPostBi(
        url,
        {
          queryParam: {
            org_id,
            start_date,
            end_date,
            peop_type,
          },
        },
        {
          // mockId: 63070189,
        }
      );

      if (code === 0) {
        this.total = parseInt(data[0].total);
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>
<style lang="scss" scoped>
@import "~@/assets/scss/c/config.scss";
@import "~@/assets/scss/c/function.scss";

.u-categorys {
  display: flex;
  flex-wrap: wrap;
}
.u-categorys span {
  display: block;
  width: 90px;
}
.m-tabs {
  margin-top: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;

  .tab-btn {
    width: 30px;
    text-align: center;
    cursor: pointer;
  }

  .tab {
    @include toe;
    margin: 0 5px;
    min-width: 72px;
    padding: 0 8px;
    height: 24px;
    box-shadow: inset 0px 0px 12px 0px rgba(26, 149, 255, 0.45);
    border-radius: 2px;
    border: 1px solid #1a95ff;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 23px;
    cursor: pointer;
    transition: all ease 0.5s;
    &.z-on {
      background: linear-gradient(90deg, #1a5afd, #009cff);
      box-shadow: none;
    }
  }
}
</style>
