<template>
  <div class="g-main" v-loading="loading">
    <div class="left">
      <div class="user">
        <img src="@/assets/images/index/nan.png" alt="" />
        <span v-if="resiDetailObj.baseInfoDto">
          {{ resiDetailObj.baseInfoDto.name }}（{{ age }}岁）</span
        >
        <span v-else> -- </span>
      </div>
      <div class="menu">
        <div class="progress">
          <div class="text">
            <span>信息完整度</span> <span>{{ score }}</span>
          </div>
          <el-progress :percentage="70" :show-text="false"></el-progress>
        </div>

        <div class="list">
          <div
            :class="{ item: true, active: index == active }"
            v-for="(item, index) in menuList"
            @click="handelCLickMenu(item.id, index)"
            v-show="item.filledQty != 0"
          >
            <span>{{ item.name }}</span
            ><span
              :class="{
                incomplete: item.filledQty != item.totalQty && index != active,
                full: item.filledQty == item.totalQty,
              }"
              >（{{ item.filledQty }}/{{ item.totalQty }}）</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="editBtn">
        <el-button
          class="diy-button--add"
          type="primary"
          size="small"
          @click.native="handelClickJumpEdit"
          >编辑</el-button
        >
      </div>
      <div class="title-small" id="base">基础信息</div>
      <el-row type="flex" justify="" class="f-m-top23">
        <el-col :span="6" class="f-flex">
          <div class="f-label"><b>国籍：</b></div>

          <div
            class="f-left8 f-font-color"
            v-if="this.resiDetailObj.baseInfoDto"
          >
            {{ nationalityText() }}
          </div>
          <div class="f-left8 f-font-color" v-else>--</div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label"><b>证件类型：</b></div>
          <div
            class="f-left8 f-font-color"
            v-if="this.resiDetailObj.baseInfoDto"
          >
            {{ idTypeText() }}
          </div>
          <div class="f-left8 f-font-color" v-else>--</div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label"><b>证件号：</b></div>
          <div class="f-left8 f-font-color">
            {{
              resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.idNum
                ? resiDetailObj.baseInfoDto.idNum
                : "--"
            }}
          </div>
          <img
            v-show="showFlagIdCardBtn"
            src="@/assets/img/yanjing1.png"
            alt=""
            width="14px"
            style="margin-left: 10px"
          />
          <img
            v-show="!showFlagIdCardBtn"
            src="@/assets/img/yanjing2.png"
            alt=""
            width="14px"
            style="margin-left: 10px"
          />
          <el-button
            type="text"
            class="div-table-button--blue"
            size="small"
            @click="handelCLickShowCheckPassword('idCard')"
            >{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button
          >
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label"><b>联系电话：</b></div>
          <div class="f-left8 f-font-color">
            {{
              resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.mobile
                ? resiDetailObj.baseInfoDto.mobile
                : "--"
            }}
          </div>
          <img
            v-show="showFlagMobileBtn"
            src="@/assets/img/yanjing1.png"
            alt=""
            width="14px"
            style="margin-left: 10px"
          />
          <img
            v-show="!showFlagMobileBtn"
            src="@/assets/img/yanjing2.png"
            alt=""
            width="14px"
            style="margin-left: 10px"
          />
          <el-button
            type="text"
            class="div-table-button--blue"
            size="small"
            @click="handelCLickShowCheckPassword('mobile')"
            >{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button
          >
        </el-col>
      </el-row>
      <el-row type="flex" justify="" class="f-m-top23">
        <el-col :span="6" class="f-flex">
          <div class="f-label">性别：</div>
          <div class="f-left8 f-font-color">
            {{
              resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.genderName
                ? resiDetailObj.baseInfoDto.genderName
                : "--"
            }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">出生日期：</div>
          <div class="f-left8 f-font-color" v-if="resiDetailObj.baseInfoDto">
            {{ resiDetailObj.baseInfoDto.birthday || "--" }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">民族：</div>
          <div class="f-left8 f-font-color">
            {{
              resiDetailObj.baseInfoDto && resiDetailObj.baseInfoDto.nationName
                ? resiDetailObj.baseInfoDto.nationName
                : "--"
            }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">文化程度：</div>
          <span class="f-left8 f-font-color">
            {{
              resiDetailObj.eduInfoDto &&
              resiDetailObj.eduInfoDto.cultureLevelName
                ? resiDetailObj.eduInfoDto.cultureLevelName
                : "--"
            }}</span
          >
        </el-col>
      </el-row>
      <el-row type="flex" justify="" class="f-m-top23">
        <el-col :span="6" class="f-flex">
          <div class="f-flex">
            <div class="f-label">婚姻状况：</div>
            <span
              class="f-left8 f-font-color"
              v-if="resiDetailObj.familyInfoDto"
            >
              {{ categoryDictText() }}</span
            >
            <span v-else> -- </span>
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-flex">
            <div class="f-label">配偶情况：</div>
            <span
              class="f-left8 f-font-color"
              v-if="resiDetailObj.familyInfoDto"
              >{{ spouseText() }}</span
            >
            <span v-else> -- </span>
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">备注：</div>
          <div class="f-left8 f-font-color" v-if="resiDetailObj.baseInfoDto">
            {{
              resiDetailObj.baseInfoDto.remark
                ? resiDetailObj.baseInfoDto.remark
                : "--"
            }}
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label">创建日期：</div>
          <span class="f-left8 f-font-color" v-if="resiDetailObj.baseInfoDto">
            {{
              resiDetailObj.baseInfoDto.createdTime
                ? resiDetailObj.baseInfoDto.createdTime
                : "--"
            }}</span
          >
        </el-col>
      </el-row>
      <el-row type="flex" justify="" class="f-m-top23">
        <el-col :span="24" class="f-flex">
          <div class="f-flex">
            <div class="f-label">更新时间：</div>
            <span class="f-left8 f-font-color" v-if="resiDetailObj.baseInfoDto">
              {{
                resiDetailObj.baseInfoDto.updatedTime
                  ? resiDetailObj.baseInfoDto.updatedTime
                  : "--"
              }}</span
            >
          </div>
        </el-col>
      </el-row>
      <div class="title-small">居住信息</div>
      <section
        v-for="(item, indexK) in resiDetailObj.resideInfoDtos"
        :key="indexK"
      >
        <el-row type="flex" justify="" class="f-m-top23">
          <el-col :span="12" class="f-flex">
            <div class="f-flex">
              <div class="f-label"><b>所属网格：</b></div>
              <span class="f-left8 f-font-color">
                {{ item.gridName || "--" }}
              </span>
            </div>
          </el-col>
          <el-col :span="12" class="f-flex">
            <div class="f-flex">
              <div class="f-label"><b>所属房屋：</b></div>
              <span class="f-left8 f-font-color">
                {{ item.gridName + "-" + item.homeName || "--" }}
              </span>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="" class="f-m-top23">
          <el-col :span="6" class="f-flex">
            <div class="f-flex">
              <div class="f-label"><b>人房关系：</b></div>
              <span class="f-left8 f-font-color">
                {{
                  item.resiHouseRel != null
                    ? item.resiHouseRel === 0
                      ? "自住"
                      : item.resiHouseRel === 1
                      ? "租住"
                      : "--"
                    : "--"
                }}
              </span>
            </div>
          </el-col>
          <el-col :span="6" class="f-flex">
            <div class="f-flex">
              <div class="f-label"><b>人户状况：</b></div>
              <span class="f-left8 f-font-color">{{
                householdSituationText(indexK)
              }}</span>
            </div>
          </el-col>
          <el-col :span="6" class="f-flex">
            <div class="f-label"><b>户籍所在地：</b></div>
            <div class="f-left8 f-font-color">
              {{ item.placeOfDomicile || "--" }}
            </div>
          </el-col>
          <el-col :span="6" class="f-flex">
            <div class="f-label"><b>与户主关系：</b></div>
            <span class="f-left8 f-font-color">{{
              houseHolderRelText(indexK)
            }}</span>
          </el-col>
        </el-row>
      </section>

      <div class="title-small" id="ext">拓展信息</div>
      <el-row type="flex" justify="" class="f-m-top23">
        <el-col :span="6" class="f-flex">
          <div class="f-flex">
            <div class="f-label">宗教信仰：</div>
            <span class="f-left8 f-font-color">{{
              resiDetailObj.religionDto && resiDetailObj.religionDto.religion
                ? resiDetailObj.religionDto.religion
                : "--"
            }}</span>
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-flex">
            <div class="f-label">籍贯：</div>
            <span class="f-left8 f-font-color">{{
              resiDetailObj.baseInfoDto
                ? resiDetailObj.baseInfoDto.nativePlace
                  ? resiDetailObj.baseInfoDto.nativePlace
                  : "--"
                : "--"
            }}</span>
          </div>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label"><b>就业状态：</b></div>
          <span class="f-left8 f-font-color" v-if="resiDetailObj.workInfoDto">
            {{ careerStatusText() }}
          </span>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            resiDetailObj.workInfoDto.careerStatus >= 1 &&
            resiDetailObj.workInfoDto.careerStatus <= 5
          "
        >
          <div class="f-label">工作单位：</div>
          <span class="f-left8 f-font-color">{{
            resiDetailObj.workInfoDto
              ? resiDetailObj.workInfoDto.workUnit
                ? resiDetailObj.workInfoDto.workUnit
                : "--"
              : "--"
          }}</span>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            (resiDetailObj.workInfoDto.careerStatus == 0 ||
              resiDetailObj.workInfoDto.careerStatus == 6) &&
            resiDetailObj.workInfoDto
          "
        >
          <div class="f-label">原工作单位：</div>
          <span class="f-left8 f-font-color">{{
            resiDetailObj.unemployedDto
              ? resiDetailObj.unemployedDto.originWorkUnit
                ? resiDetailObj.unemployedDto.originWorkUnit
                : "--"
              : "--"
          }}</span>
        </el-col>
      </el-row>
      <el-row type="flex" class="f-m-top23">
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            resiDetailObj.workInfoDto.careerStatus >= 1 &&
            resiDetailObj.workInfoDto.careerStatus <= 5
          "
        >
          <div class="f-flex">
            <div class="f-label">职业：</div>
            <span class="f-left8 f-font-color">{{
              resiDetailObj.workInfoDto
                ? resiDetailObj.workInfoDto.occupation
                  ? resiDetailObj.workInfoDto.occupation
                  : "--"
                : "--"
            }}</span>
          </div>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            (resiDetailObj.workInfoDto.careerStatus == 0 ||
              resiDetailObj.workInfoDto.careerStatus == 6) &&
            resiDetailObj.workInfoDto
          "
        >
          <div class="f-label">失业时间：</div>
          <span class="f-left8 f-font-color">{{
            resiDetailObj.unemployedDto
              ? resiDetailObj.unemployedDto.unemploymentTime
                ? resiDetailObj.unemployedDto.unemploymentTime
                : "--"
              : "--"
          }}</span>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            resiDetailObj.workInfoDto.careerStatus >= 1 &&
            resiDetailObj.workInfoDto.careerStatus <= 5
          "
        >
          <div class="f-flex">
            <div class="f-label">月收入：</div>
            <span class="f-left8 f-font-color">{{
              resiDetailObj.economyDto
                ? resiDetailObj.economyDto.monthIncome
                  ? resiDetailObj.economyDto.monthIncome
                  : "--"
                : "--"
            }}</span>
          </div>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            (resiDetailObj.workInfoDto.careerStatus == 0 ||
              resiDetailObj.workInfoDto.careerStatus == 6) &&
            resiDetailObj.workInfoDto
          "
        >
          <div class="f-label">失业证号：</div>
          <span class="f-left8 f-font-color">{{
            resiDetailObj.unemployedDto
              ? resiDetailObj.unemployedDto.unemploymentNum
                ? resiDetailObj.unemployedDto.unemploymentNum
                : "--"
              : "--"
          }}</span>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            (resiDetailObj.workInfoDto.careerStatus == 0 ||
              resiDetailObj.workInfoDto.careerStatus == 6) &&
            resiDetailObj.workInfoDto
          "
        >
          <div class="f-label">失业原因：</div>
          <span class="f-left8 f-font-color">{{
            resiDetailObj.unemployedDto
              ? resiDetailObj.unemployedDto.unemploymentReason
                ? resiDetailObj.unemployedDto.unemploymentReason
                : "--"
              : "--"
          }}</span>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            resiDetailObj.workInfoDto.careerStatus >= 1 &&
            resiDetailObj.workInfoDto.careerStatus <= 5
          "
        >
          <div class="f-label">有无赡养人：</div>
          <div class="f-left8 f-font-color">
            {{
              resiDetailObj.familyInfoDto &&
              resiDetailObj.familyInfoDto.elderlyFlag == 1
                ? "有"
                : resiDetailObj.familyInfoDto &&
                  resiDetailObj.familyInfoDto.elderlyFlag == 0
                ? "无"
                : "--"
            }}
          </div>
        </el-col>
        <el-col
          :span="6"
          class="f-flex"
          v-if="
            (resiDetailObj.workInfoDto.careerStatus == 0 ||
              resiDetailObj.workInfoDto.careerStatus == 6) &&
            resiDetailObj.workInfoDto
          "
        >
          <div class="f-label" style="width: 113px">再就业优惠证号：</div>
          <span class="f-left8 f-font-color">{{
            resiDetailObj.unemployedDto
              ? resiDetailObj.unemployedDto.employmentNum
                ? resiDetailObj.unemployedDto.employmentNum
                : "--"
              : "--"
          }}</span>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        class="f-m-top23"
        v-if="
          (resiDetailObj.workInfoDto.careerStatus == 0 ||
            resiDetailObj.workInfoDto.careerStatus == 6) &&
          resiDetailObj.workInfoDto
        "
      >
        <el-col :span="6" class="f-flex">
          <div class="f-label" style="width: 113px">再就业优惠证号：</div>
          <span class="f-left8 f-font-color">{{
            resiDetailObj.unemployedDto
              ? resiDetailObj.unemployedDto.specialSkill
                ? resiDetailObj.unemployedDto.specialSkill
                : "--"
              : "--"
          }}</span>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label" style="width: 113px">是否领取失业金：</div>
          <span class="f-left8 f-font-color">
            {{
              resiDetailObj.unemployedDto.unempCompensationFlag != null
                ? resiDetailObj.unemployedDto.unempCompensationFlag === 0
                  ? "否"
                  : resiDetailObj.unemployedDto.unempCompensationFlag === 1
                  ? "是"
                  : "--"
                : "--"
            }}
          </span>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label" style="width: 113px">是否就业困难对象：</div>
          <span class="f-left8 f-font-color">
            {{
              resiDetailObj.unemployedDto.employmentHardFlag != null
                ? resiDetailObj.unemployedDto.employmentHardFlag === 0
                  ? "否"
                  : resiDetailObj.unemployedDto.employmentHardFlag === 1
                  ? "是"
                  : "--"
                : "--"
            }}
          </span>
        </el-col>
        <el-col :span="6" class="f-flex">
          <div class="f-label" style="width: 113px">劳动就业愿望：</div>
          <span class="f-left8 f-font-color">
            {{
            resiDetailObj.workInfoDto
              ? resiDetailObj.workInfoDto.employmentWish
                ? resiDetailObj.workInfoDto.employmentWish
                : "--"
              : "--"
          }}
           
          </span>
        </el-col>
      </el-row>
      <el-row v-if="
          (resiDetailObj.workInfoDto.careerStatus == 0 ||
            resiDetailObj.workInfoDto.careerStatus == 6) &&
          resiDetailObj.workInfoDto
        "  class="f-m-top23">
        <el-col
          :span="6"
          class="f-flex"
         
        >
          <div class="f-label">有无赡养人：</div>
          <div class="f-left8 f-font-color">
            {{
              resiDetailObj.familyInfoDto &&
              resiDetailObj.familyInfoDto.elderlyFlag == 1
                ? "有"
                : resiDetailObj.familyInfoDto &&
                  resiDetailObj.familyInfoDto.elderlyFlag == 0
                ? "无"
                : "--"
            }}
          </div>
        </el-col>
      </el-row>
      <div class="title-small">关系图谱</div>
      <graph
        :userInfo="resiDetailObj.baseInfoDto"
        v-if="resiDetailObj.baseInfoDto"
      />
      <div class="title-small">人员标签</div>
      <staff-tag
        :userInfo="resiDetailObj"
        ref="staffTag"
        v-if="Object.keys(resiDetailObj).length !== 0"
        :formType="'detail'"
      ></staff-tag>
      <section
        v-for="(sectionItem, sectionIndex) in expandList"
        :key="sectionIndex"
      >
        <div class="title-small" :id="sectionItem.scrollId">
          {{ sectionItem.title }}
        </div>
        <el-row
          type="flex"
          justify=""
          class="f-m-top23"
          v-for="(row, rowIndex) in sectionItem.rows"
          :key="rowIndex + sectionItem.id"
        >
          <el-col
            :span="8"
            class="f-flex"
            v-for="(item, itemIndex) in row"
            :key="itemIndex"
          >
            <div class="f-flex">
              <div class="f-label">{{ item.label }}：</div>
              <span class="f-left8 f-font-color">{{
                item.value ? item.value : "--"
              }}</span>
            </div>
          </el-col>
        </el-row>
      </section>

      <div class="title-small" id="businessRecord">业务记录</div>
      <business-record :userInfo="resiDetailObj"></business-record>
      <div class="title-small" id="updateRecord">更新记录</div>
      <change-record :tableData="changeRecordList"></change-record>
    </div>
    <el-dialog title="密码验证" :visible.sync="showCheckPassword">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            autocomplete="off"
            type="password"
            placeholder="请输入当前账号密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showCheckPassword = false">取 消</el-button>
        <el-button type="primary" @click="handelClickCheckPassword"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import graph from "./cpts/graph.vue";
import staffTag from "./cpts/staffTag.vue";
import businessRecord from "./cpts/businessRecord.vue";
import changeRecord from "./cpts/table/changeRecord.vue";
import { idTypeList } from "@/js/columns/constants";

export default {
  data() {
    return {
      loading: true,
      checkType: "edit", //edit或者view
      changeRecordList: [], //更新记录
      resiDetailObj: {}, //居民详情
      showFlagIdCardBtn: true,
      showFlagMobileBtn: true,
      active: 0,
      menuList: [],
      score: null,
      age: null,

      nationalityList: [], //国籍字典
      marriageArr: [], //婚姻状况字典
      spouseArr: [], //配偶情况字典
      careerStatusArr: [], //就业状况字典
      householdSituationArr: [], //户籍情况字典
      houseHolderRelArr: [], //与户主关系字典
      idTypeList, //证件类型字典
      showCheckPassword: false,
      originalExpandList: [
        {
          id: "healthDto",
          title: "残疾信息",
          scrollId: "disability",
          children: [
            {
              label: "残疾类别",
              itemType: "select1",
              formName: "disabilityCategoryCode",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "disability_category_code" },
              opction: [],
            },
            {
              label: "残疾等级",
              itemType: "select1",
              formName: "disabilityLevel",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "disability_level" },
              opction: [],
            },
            {
              label: "残疾证号",
              itemType: "input1",
              formName: "disabilityNum",
            },
            {
              label: "残疾说明",
              itemType: "input1",
              formName: "disabilityDesc",
            },
            {
              label: "监护人",
              itemType: "radio1",
              formName: "guardianFlag",
              opction: [
                { label: "有", formName: "", value: 1 },
                { label: "无", formName: "", value: 0 },
              ],
            },
            {
              label: "监护人姓名",
              itemType: "input1",
              formName: "guardianName",
            },
            {
              label: "监护人联系电话",
              itemType: "input1",
              formName: "guardianMobile",
            },
            {
              label: "技能特长",
              itemType: "radio1",
              formName: "specialSkillFlag",
              opction: [
                { label: "有", formName: "", value: 1 },
                { label: "无", formName: "", value: 0 },
              ],
            },
            {
              label: "劳动能力",
              itemType: "radio1",
              formName: "workCapacityFlag",
              opction: [
                { label: "有", formName: "", value: 1 },
                { label: "无", formName: "", value: 0 },
              ],
            },
          ],
        },
        {
          id: "seriousIllnessDto",
          title: "大病信息",
          scrollId: "serious_illness",
          children: [
            {
              label: "所患大病",
              itemType: "checkbox",
              formName: "illnessCodes",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "illness_code" },
              opction: [],
            },
          ],
        },
        {
          id: "chronicDiseaseDto",
          title: "慢病信息",
          scrollId: "chronic_disease",
          children: [
            {
              label: "所患慢病",
              itemType: "checkbox",
              formName: "chronicDiseaseCodes",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "chronic_disease_code" },
              opction: [],
            },
          ],
        },
        {
          id: "deathDto",
          title: "死亡信息",
          scrollId: "death",
          children: [
            {
              label: "死亡时间",
              itemType: "datepicker1",
              formName: "deathTime",
            },
          ],
        },
        {
          id: "oldPeopleDto",
          title: "老年人信息",
          scrollId: "old_people",
          children: [
            {
              label: "老年人分类",
              itemType: "select1",
              multiple: true,
              formName: "oldPeopleCategories",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "oldPeople_categories" },
            },
            {
              label: "居住情况",
              itemType: "select1",
              formName: "resideSituation",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "reside_situation" },
            },
            {
              label: "高龄补助",
              itemType: "inputNum",
              formName: "oldSubsidy",
            },
          ],
        },
        {
          id: "subsistenceAllowanceDto",
          title: "低保信息",
          scrollId: "subsistence_allowance",
          children: [
            {
              label: "低保类别",
              itemType: "select1",
              formName: "category",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "subsistence_allowance_category" },
            },
            {
              label: "低保享受原因",
              itemType: "checkbox",
              formName: "reasons",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "subsistence_allowance_reasons" },
              opction: [],
            },
          ],
        },
        {
          id: "parymemberInfoDto",
          title: "党员信息",
          scrollId: "party_member",
          children: [
            {
              label: "入党时间",
              itemType: "datepicker1",
              formName: "joinTime",
              opction: [],
            },
            {
              label: "转正时间",
              itemType: "datepicker1",
              formName: "positiveTime",
              opction: [],
            },
            {
              label: "所属党组织",
              itemType: "cascader1",
              formName: "partyOrgId",
              opction: [],
            },
            {
              label: "流动党员",
              itemType: "radio1",
              formName: "flowFlag",
              opction: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
            },
            {
              label: "流动党员活动证号",
              itemType: "input1",
              formName: "flowActNum",
            },
            {
              label: "职务",
              itemType: "select1",
              formName: "partyJob",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "party_job" },
              opction: [],
            },
            {
              label: "工作职责",
              itemType: "input1",
              formName: "duty",
            },
            {
              label: "是否退休",
              itemType: "radio1",
              formName: "retiredFlag",
              opction: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
            },
            {
              label: "党员中心户",
              itemType: "radio1",
              formName: "centerFlag",
              opction: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
            },
            {
              label: "免学习",
              itemType: "radio1",
              formName: "studyNotNeed",
              opction: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
            },
            {
              label: "入党时所在党支部",
              itemType: "input1",
              formName: "joinBranchName",
            },
            {
              label: "组织关系转入社区时间",
              itemType: "datepicker1",
              formName: "joinCommunityTime",
              opction: [],
            },
          ],
        },
        {
          id: "ensureHouseDto",
          title: "保障房信息",
          scrollId: "ensure_house",
          children: [
            {
              label: "所在社区",
              itemType: "input1",
              formName: "liveCommunity",
            },
            {
              label: "住房性质",
              itemType: "select1",
              formName: "housingNature",
              opctionUrl: "sys/dict/data/house",
              opctionParams: { formCode: "resi_base_info" },
              opction: [],
            },
          ],
        },
        {
          id: "veteranDto",
          title: "退役军人信息",
          scrollId: "veteran",
          children: [
            {
              label: "入伍时间",
              itemType: "datepicker1",
              formName: "joinArmyTime",
              opction: [],
            },
            {
              label: "退伍时间",
              itemType: "datepicker1",
              formName: "leaveArmyTime",
              opction: [],
            },
            {
              label: "服役单位",
              itemType: "input1",
              formName: "serviceUnit",
            },
            {
              label: "接收单位",
              itemType: "input1",
              formName: "receiveUnit",
            },
            {
              label: "待安置补助金",
              itemType: "inputNum",
              formName: "settlementAmount",
              opction: [],
            },
            {
              label: "培训状况",
              itemType: "input1",
              formName: "trainDesc",
            },
            {
              label: "现就业情况",
              itemType: "input1",
              formName: "employmentSituation",
            },
            {
              label: "是否办理公益性岗位",
              itemType: "radio1",
              formName: "pubWelfareJobFlag",
              opction: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
            },
          ],
        },
        {
          id: "unitedFrontDto",
          title: "统战人员信息",
          scrollId: "united_front",
          children: [
            {
              label: "统战类型",
              itemType: "input1",
              formName: "unitedFrontType",
            },
          ],
        },
        {
          id: "volunteerDto",
          title: "志愿者信息",
          children: [
            {
              label: "志愿者类别",
              itemType: "checkbox",
              formName: "volunteerCategory",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "VOLUNTEER_CATEGORY" },
              opction: [],
            },
          ],
        },
        {
          id: "specialSupportDto",
          title: "特扶人员信息",
          scrollId: "special_support",
          children: [
            {
              //0
              label: "特扶类别",
              itemType: "select1",
              formName: "specialSupportType",
              opction: [
                {
                  value: "1",
                  label: "失独",
                },
                {
                  value: "2",
                  label: "伤残",
                },
              ],
            },
            {
              //1
              label: "子女姓名",
              itemType: "input1",
              formName: "childName",
              opction: [],
            },
            {
              //2
              label: "子女性别",
              itemType: "select1",
              formName: "childGender",
              opction: [
                {
                  value: "1",
                  label: "男",
                },
                {
                  value: "2",
                  label: "女",
                },
              ],
            },
            {
              label: "子女死亡日期",
              itemType: "datepicker1",
              formName: "certificateDate",
              opction: [],
            },
            {
              label: "子女伤残类别",
              itemType: "select1",
              formName: "childDisabilityCategoryCode",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "disability_category_code" },
              opction: [],
            },
            {
              label: "子女伤残等级",
              itemType: "select1",
              formName: "childDisabilityLevel",
              opctionUrl: "sys/dict/data/dictlist",
              opctionParams: { dictType: "disability_level" },
              opction: [],
            },
          ],
        },
      ],
      expandList: [],
      form: {
        password: "", //脱敏确认密码
      },
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  components: { graph, staffTag, businessRecord, changeRecord },
  created() {},
  mounted() {},
  activated() {},
  methods: {
    // 更新记录
    async getChangeRecordDetailById() {
      try {
        const { data } = await this.$http.post(
          `/actual/base/residentChangeRecord/getChangeRecordsById/${this.resiId}`
        );
        if (data.data == null) {
          this.changeRecordList = [];
        } else {
          this.changeRecordList = data.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 计算年龄
    calculateAge(birthdayTimestamp) {
      // 获取当前日期
      const currentDate = new Date();
      // 将生日时间戳转换为日期对象
      const birthdayDate = new Date(birthdayTimestamp);
      // 计算年龄
      let age = currentDate.getFullYear() - birthdayDate.getFullYear();
      // 检查是否已经过了生日
      const currentMonth = currentDate.getMonth();
      const birthMonth = birthdayDate.getMonth();
      if (
        currentMonth < birthMonth ||
        (currentMonth === birthMonth &&
          currentDate.getDate() < birthdayDate.getDate())
      ) {
        age--;
      }
      return age;
    },
    async getNationalityList() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "nationality",
        });
        this.nationalityList = data.data;
      } catch (error) {
        console.log(error, `获取 ${dictType} 字典`);
      }
    },
    getResiDetail() {
      this.$http
        .get(`/actual/base/residentIntegratedInfo/detail/masked/${this.resiId}`)
        .then(async (res) => {
          if (res.data.code === 0) {
            this.resiDetailObj = res.data.data || {};
            const nameMap = {
              ext: "拓展信息",
              united_front: "统战人员信息",
              party_member: "党员信息",
              death: "死亡信息",
              disability: "残疾信息",
              subsistence_allowance: "低保信息",
              serious_illness: "大病信息",
              veteran: "退役军人信息",
              special_support: "特扶人员信息",
              old_people: "老年人信息",
              ensure_house: "保障房信息",
              chronic_disease: "慢病信息",
              base: "基本信息",
            };
            this.menuList = Object.entries(
              res.data.data.integrityData.integrityQtyMap
            )
              .map(([key, value]) => ({
                name: nameMap[key],
                id: key,
                filledQty: value.filledQty,
                totalQty: value.totalQty,
              }))
              .reverse();
            let arr = this.menuList.filter(
              (item) =>
                item.filledQty > 0 &&
                item.name !== "基本信息" &&
                item.name !== "拓展信息"
            );
            this.expandList = this.originalExpandList.filter((itemA) => {
              return arr.some((itemB) => itemB.name === itemA.title);
            });
            await Promise.all(
              this.expandList.map(async (item) => {
                await Promise.all(
                  item.children.map(async (child) => {
                    const key = child.formName;
                    if (this.resiDetailObj[item.id].hasOwnProperty(key)) {
                      child.value = await this.getDictName(
                        child.opctionUrl,
                        child.opctionParams,
                        this.resiDetailObj[item.id][
                          key == "partyOrgId" ? "branchId" : key
                        ],
                        child.itemType,
                        child.opction
                      );
                    }
                  })
                );
              })
            );

            this.expandList.forEach((item) => {
              const rows = [];
              const chunkSize = 3;
              for (let i = 0; i < item.children.length; i += chunkSize) {
                rows.push(item.children.slice(i, i + chunkSize));
              }
              item.rows = rows;
            });
            this.menuList.push(
              {
                name: "业务记录",
                filledQty: 1,
                totalQty: 1,
                id: "businessRecord",
              },
              {
                name: "更新纪录",
                filledQty: 1,
                totalQty: 1,
                id: "updateRecord",
              }
            );

            this.score = res.data.data.integrityData.score;
            const birthdayTimestamp = Date.parse(
              res.data.data.baseInfoDto.birthday
            );
            this.age = this.calculateAge(birthdayTimestamp);
          } else if (res.data.code >= 8000) {
            this.resiDetailObj = {};
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.loading = false;
    },
    handelClickJumpEdit() {
      this.checkType = "edit";
      this.showCheckPassword = true;
    },
    async getDictName(url, params, value, itemType, opction) {
      try {
        if (url) {
          const { data } = await this.$http.post(url, params);
          const dictData = data.data;
          if (itemType == "checkbox") {
            const matchedLabels = value
              .map((item) => {
                const matchedItems = dictData.filter(
                  (obj) => obj.value === item
                );
                if (matchedItems.length > 0) {
                  return matchedItems
                    .map((matchedItem) => matchedItem.label)
                    .join(",");
                } else {
                  return "";
                }
              })
              .join("，");
            return matchedLabels ? matchedLabels : "--";
          } else if (itemType == "select1") {
            const matchedItem = dictData.find((item) => item.value === value);
            return matchedItem ? matchedItem.label : "--";
          }
        } else {
          if (itemType == "radio1") {
            const matchedItem = opction.find((item) => item.value === value);
            return matchedItem ? matchedItem.label : "--";
          } else if (
            itemType == "input1" ||
            itemType == "datepicker1" ||
            itemType == "cascader1"
          ) {
            return value ? value : "--";
          }
        }
      } catch (error) {
        console.log(error);
      }
    },

    handelCLickMenu(id, index) {
      this.active = index;
      const bottomElement = document.getElementById(`${id}`);
      bottomElement.scrollIntoView({ behavior: "smooth", block: "start" });
    },
    handelCLickShowCheckPassword(type) {
      this.form.password = "";
      this.checkType = "view";
      if (type === "idCard") {
        if (this.showFlagIdCardBtn) {
          this.showCheckPassword = true;
        } else {
          this.showFlagIdCardBtn = true;
          this.$set(
            this.resiDetailObj.baseInfoDto,
            "idNum",
            this.resiDetailObj.baseInfoDto.idNum.substr(0, 11) +
              "****" +
              this.resiDetailObj.baseInfoDto.idNum.substr(16, 2)
          );
        }
      } else if (type === "mobile") {
        if (this.showFlagMobileBtn) {
          this.showCheckPassword = true;
        } else {
          this.showFlagMobileBtn = true;
          this.$set(
            this.resiDetailObj.baseInfoDto,
            "mobile",
            this.resiDetailObj.baseInfoDto.mobile.substr(0, 3) +
              "****" +
              this.resiDetailObj.baseInfoDto.mobile.substr(7, 4)
          );
        }
      }
      this.tuominType = type;
    },
    nationalityText() {
      let text = "--";
      this.nationalityList.forEach((item) => {
        if (item.value == this.resiDetailObj.baseInfoDto.nationality) {
          text = item.label;
        }
      });
      return text;
    },
    categoryDictText() {
      let text = "--";
      this.marriageArr.forEach((item) => {
        if (item.value == this.resiDetailObj.familyInfoDto.marriage) {
          text = item.label;
        }
      });
      return text;
    },
    spouseText() {
      let text = "--";
      this.spouseArr.forEach((item) => {
        if (item.value == this.resiDetailObj.familyInfoDto.spouseSituation) {
          text = item.label;
        }
      });
      return text;
    },
    careerStatusText() {
      let text = "--";
      this.careerStatusArr.forEach((item) => {
        if (item.value == this.resiDetailObj.workInfoDto.careerStatus) {
          text = item.label;
        }
      });
      return text;
    },
    idTypeText() {
      let text = "--";
      this.idTypeList.forEach((item) => {
        if (item.value == this.resiDetailObj.baseInfoDto.idType) {
          text = item.label;
        }
      });
      return text;
    },
    handelClickCheckPassword() {
      this.$refs.form.validate((vali) => {
        if (vali) {
          this.handleSaveTuomin(this.form.password);
        } else {
          return false;
        }
      });
    },
    async handleSaveTuomin(password) {
      const url = `/actual/base/residentBaseInfo/getResiUserInfo/${this.resiId}`;
      let parm = {
        password,
      };
      const { data, code, msg } = await requestPost(url, parm);
      if (code === 0) {
        if (this.checkType == "view") {
          if (this.tuominType === "mobile") {
            this.$set(this.resiDetailObj.baseInfoDto, "mobile", data.mobile);
            this.showFlagMobileBtn = !this.showFlagMobileBtn;
          }
          if (this.tuominType === "idCard") {
            this.$set(this.resiDetailObj.baseInfoDto, "idNum", data.idNum);
            this.showFlagIdCardBtn = !this.showFlagIdCardBtn;
          }
          this.showCheckPassword = false;
        } else if (this.checkType == "edit") {
          this.showCheckPassword = false;
          this.$router.push({
            name: "edit-resi",
            query: { id: data.id },
            params: { idNum: data.idNum, mobile: data.mobile },
          });
        }
      } else {
        this.$message.error(msg);
      }
    },

    // 婚姻状况字典
    async getMarriage() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "marriage",
        });
        this.marriageArr = data.data;
      } catch (error) {
        console.log(error, "获取婚姻状况字典");
      }
    },
    // 就业状态字典
    async getCareerStatus() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "career_status",
        });
        this.careerStatusArr = data.data;
      } catch (error) {
        console.log(error, "获取就业状态字典");
      }
    },
    // 人户状况
    async getHouseholdSituation() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "household_situation",
        });
        this.householdSituationArr = data.data;
      } catch (error) {
        console.log(error, "获取人户状况");
      }
    },
    // 配偶情况
    async getSpouse() {
      try {
        const { data } = await this.$http.post("sys/dict/data/dictlist", {
          dictType: "spouse_situation",
        });
        this.spouseArr = data.data;
      } catch (error) {
        console.log(error, "获取配偶情况字典");
      }
    },
    // 与户主关系
    async gethouseHolderRel() {
      try {
        const { data } = await this.$http.post("sys/dict/data/relationship", {
          formCode: "resi_base_info",
        });
        this.houseHolderRelArr = data.data;
      } catch (error) {
        console.log(error, "获取与户主关系");
      }
    },
    houseHolderRelText(index) {
      let text = "--";
      this.houseHolderRelArr.forEach((item) => {
        if (
          item.value == this.resiDetailObj.resideInfoDtos[index].houseHolderRel
        ) {
          text = item.label;
        }
      });
      return text;
    },
    householdSituationText(index) {
      let text = "--";
      this.householdSituationArr.forEach((item) => {
        if (
          item.value ==
          this.resiDetailObj.resideInfoDtos[index].householdSituation
        ) {
          text = item.label;
        }
      });
      return text;
    },
  },
  computed: {},
  watch: {
    "$store.state.huaXiang.userInfo.resiId": {
      handler(newValue, oldValue) {
        this.resiId = newValue;
        this.resiDetailObj = {};
        this.getNationalityList();
        this.getResiDetail();
        this.getMarriage();
        this.getSpouse();
        this.getCareerStatus();
        this.getChangeRecordDetailById();
        this.getHouseholdSituation();
        this.gethouseHolderRel();
        this.loading = false;
      },
      deep: true, // 开启深度监听
      immediate: true, // 立即触发一次handler
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/pages/resiInfo.scss";
@import "@/assets/scss/modules/management/list-main.scss";
</style>
