dvcp_v2_webapp/packages/jianping/AppHelpedResident/hrDetail.vue

<template>
  <section class="hrDetail">
    <ai-detail>
      <ai-title slot="title" title="监测对象详情" isShowBottomBorder isShowBack @onBackClick="back">
        <template #rightBtn>
          <el-button type="primary" icon="iconfont iconEdit" @click="gotoEdit" v-if="$permissions('app_apppreventionreturntopoverty_edit')">编辑</el-button>
          <template v-if="isGridAdmin">
            <template v-if="detail.status == 0 || detail.status == 4">
              <el-button type="primary" @click="applyMonitor('纳入监测', 1)" v-if="girdAdminApplyStatus != 1">纳入监测</el-button>
              <el-button type="primary" @click="examine('纳入监测审批', 2)" v-if="girdAdminApplyStatus == 1">纳入监测审批</el-button>
            </template>
            <el-button type="primary" @click="applyMonitor('纳入监测', 1)" v-if="detail.status == 3">纳入监测</el-button>
            <el-button type="primary" @click="applyMonitor('解除风险', 4)" v-if="detail.status == 1">解除风险</el-button>
            <el-button type="primary" @click="examine('解除风险审批', 5)" v-if="detail.status == 2">解除风险审批</el-button>
          </template>
          <template v-if="user.info.girdCheckType == 1">
            <el-button type="primary" @click="applyMonitor('申请纳入监测', 0)" v-if="detail.status == 4 || detail.status == 3">申请纳入监测</el-button>
            <el-button type="primary" @click="applyMonitor('申请解除风险', 3)" v-if="detail.status == 1">申请解除风险</el-button>
          </template>
          <template v-if="detail.status == 3 || detail.status == 4">
            <el-button v-if="$permissions('app_apppreventionreturntopoverty_del') && user.info.girdCheckType != 0" icon="iconfont iconDelete" @click="handleDelete(detail.id)">删除</el-button>
          </template>
        </template>
      </ai-title>
      <template #content>
        <el-form :model="detail" label-width="160px" label-position="right" size="small">
          <el-tabs tabPosition="left" v-model="currentTab">
            <el-tab-pane label="基本信息" lazy>
              <ai-card :title="detail.name || '无名氏'">
                <template #content>
                  <div flex class="flex-start">
                    <div flex class="half wrap fill">
                      <el-form-item label="联系电话">{{ detail.phone}}</el-form-item>
                      <el-form-item label="身份证号">{{ detail.idNumber}}</el-form-item>
                      <el-form-item label="性别" prop="sex">{{ dict.getLabel("sex", detail.sex)}}</el-form-item>
                      <el-form-item label="出生日期">{{ detail.birthDate}}</el-form-item>
                      <!-- <el-form-item label="年龄" prop="age">{{ detail.age}}</el-form-item> -->
                      <el-form-item label="民族">{{dict.getLabel("fpNation", detail.nation)}}</el-form-item>
                      <el-form-item label="文化程度">{{ dict.getLabel("fpEducation", detail.education)}}</el-form-item>
                      <el-form-item label="政治面貌">{{dict.getLabel("fpPoliticalOutlook",detail.politicsStatus)}}</el-form-item>
                      <el-form-item label="在校生状况">{{dict.getLabel( "fpStudentsInSchool", detail.schoolStatus)}}</el-form-item>
                    </div>
                    <ai-avatar :instance="instance" v-model="detail.photo" :editable="false" />
                  </div>
                  <el-form-item label="健康状况">
                    <span v-for="(item, index) in detail.healthyStatusList" :key="index"><span v-if="index > 0">,</span>{{dict.getLabel("fpHealth", item)}}</span>
                  </el-form-item>
                  <div flex class="half wrap">
                    <el-form-item label="残疾类别">{{dict.getLabel("fpDisabilityType", detail.disabilityType)}}</el-form-item>
                    <el-form-item label="残疾办证年度">{{detail.disabilityCertificateYear}}</el-form-item>
                  </div>
                  <div flex class="half wrap">
                    <el-form-item label="城乡居民基本医疗保险">{{dict.getLabel("fpYesOrNo", detail.jcbxCxyiliao)}}</el-form-item>
                    <el-form-item label="城镇职工基本医疗保险">{{dict.getLabel("fpYesOrNo", detail.jcbxCzyiliao)}}</el-form-item>
                    <el-form-item label="大病保险">{{dict.getLabel("fpYesOrNo", detail.jcbxDabing)}}</el-form-item>
                    <el-form-item label="商业补充医疗保险">{{dict.getLabel("fpYesOrNo", detail.jcbxShangye)}}</el-form-item>
                    <el-form-item label="城乡居民基本养老保险">{{dict.getLabel("fpYesOrNo", detail.jcbxCxyanglao)}}</el-form-item>
                    <el-form-item label="城镇职工基本养老保险">{{dict.getLabel("fpYesOrNo", detail.jcbxCzyanglao)}}</el-form-item>
                    <el-form-item label="享受人身意外保险补贴">{{dict.getLabel("fpYesOrNo", detail.jcbxRenshenyiwai)}}</el-form-item>
                    <el-form-item label="享受农村最低生活保障">{{dict.getLabel("fpYesOrNo", detail.bzcsNongcundibao)}}</el-form-item>
                    <el-form-item label="是否特困供养人员">{{dict.getLabel("fpYesOrNo", detail.bzcsTekungongyang)}}</el-form-item>
                    <el-form-item label="分散供养五保户转集中供养（减少）">{{dict.getLabel("fpYesOrNo", detail.bzcsWubaohu)}}</el-form-item>
                    <el-form-item label="是否接受医疗救助">{{dict.getLabel("fpYesOrNo", detail.bzcsYiliaojiuzhu)}}</el-form-item>
                    <el-form-item label="是否接受其它健康扶贫">{{dict.getLabel("fpYesOrNo", detail.bzcsQita)}}</el-form-item>
                    <el-form-item label="劳动技能">{{dict.getLabel("fpLaborSkills", detail.labourStatus)}}</el-form-item>
                    <el-form-item label="是否会讲普通话">{{dict.getLabel("fpYesOrNo", detail.mandarin)}}</el-form-item>
                    <el-form-item label="务工时间(月)">{{detail.workeMonths}}</el-form-item>
                    <el-form-item label="就业渠道">{{dict.getLabel("fpEmploymentChannels", detail.employmentChannels)}}</el-form-item>
                    <el-form-item label="务工企业名称">{{detail.migrantEnterprises}}</el-form-item>
                    <el-form-item label="公益性岗位">{{detail.publicWelfarePosts}}</el-form-item>
                    <el-form-item label="是否国外务工">{{dict.getLabel("fpYesOrNo", detail.foreignWorkers)}}</el-form-item>
                    <el-form-item label="公益性岗位(月数)">{{detail.publicWelfarePostsMonths}}</el-form-item>
                  </div>
                  <el-form-item label="务工所在地">{{detail.foreignWorkersAddress}}
                  </el-form-item>
                  <el-form-item label="现住址">{{currentFullAddress}}</el-form-item>
                </template>
              </ai-card>
              <ai-card title="生产生活条件">
                <template slot="content">
                  <div flex class="half wrap">
                    <el-form-item label="住房面积(m²)">{{detail.houseArea}}</el-form-item>
                    <el-form-item label="户类型">{{ dict.getLabel("fpYesOrNo", detail.houseType)}}</el-form-item>
                    <el-form-item label="与村主干路距离(公里)">{{ detail.trunkRoadDistance}}</el-form-item>
                    <el-form-item label="入户路类型">{{ dict.getLabel("fpHouseRoadType", detail.houseRoadType)}}</el-form-item>
                    <el-form-item label="是否危房">{{ dict.getLabel("fpYesOrNo", detail.dilapidatedHousehold)}}</el-form-item>
                    <el-form-item label="是否住房损耗">{{ dict.getLabel("fpYesOrNo", detail.houseDamage)}}</el-form-item>
                    <el-form-item label="是否解决安全饮水">{{ dict.getLabel("fpYesOrNo", detail.drinkingWaterSafety)}}</el-form-item>
                    <el-form-item label="是否饮水设施损坏">{{ dict.getLabel("fpYesOrNo", detail.drinkingWaterDamage)}}</el-form-item>
                    <el-form-item label="是否有卫生厕所">{{ dict.getLabel("fpYesOrNo", detail.toilet)}}</el-form-item>
                    <el-form-item label="主要燃料类型">{{ dict.getLabel("fpFuelType", detail.fuelType)}}</el-form-item>
                    <el-form-item label="是否通生活用电">{{ dict.getLabel("fpYesOrNo", detail.electric)}}</el-form-item>
                    <el-form-item label="是否通广播电视">{{ dict.getLabel("fpYesOrNo", detail.television)}}</el-form-item>
                    <el-form-item label="耕地面积(亩)">{{detail.cultivatedLandArea}}</el-form-item>
                    <el-form-item label="林地面积(亩)">{{detail.woodlandArea}}</el-form-item>
                    <el-form-item label="林果面积(亩)">{{detail.orchardArea}}</el-form-item>
                    <el-form-item label="退耕还林面积(亩)">{{detail.grainForGreenArea}}</el-form-item>
                    <el-form-item label="牧草地面积(亩)">{{detail.grazingGrasslandArea}}</el-form-item>
                    <el-form-item label="水面面积(亩)">{{detail.watersArea}}</el-form-item>
                    <el-form-item label="是否加入农民专业合作社">{{ dict.getLabel("fpYesOrNo", detail.nongheshe)}}</el-form-item>
                    <el-form-item label="是否有龙头企业带动">{{ dict.getLabel("fpYesOrNo", detail.longtouqiye)}}</el-form-item>
                    <el-form-item label="是否有创业致富人带头人带动">{{ dict.getLabel("fpYesOrNo", detail.cyzfdtr)}}</el-form-item>
                    <el-form-item label="是否通生产通电">{{ dict.getLabel("fpYesOrNo", detail.produceElectric)}}</el-form-item>
                  </div>
                </template>
              </ai-card>
              <ai-card title="家庭风险情况">
                <template slot="content">
                  <div flex class="half wrap">
                    <el-form-item label="监测对象类型" prop="objectType">{{ dict.getLabel("fpType", detail.objectType)}}</el-form-item>
                    <el-form-item label="是否军烈属">{{ dict.getLabel("fpYesOrNo", detail.militaryMartyrs)}}</el-form-item>
                    <el-form-item label="风险因素" prop="riskType">{{ dict.getLabel("fpRiskType", detail.riskType)}} </el-form-item>
                    <el-form-item label="脱贫年度">{{detail.povertyYear}} </el-form-item>
                    <el-form-item label="因自然灾害子项">{{ dict.getLabel("fpNaturalDisaster", detail.naturalDisasterType)}}</el-form-item>
                    <el-form-item label="是否义务阶段失学辍学">{{ dict.getLabel("fpYesOrNo", detail.dropOutOfSchool)}}</el-form-item>
                    <el-form-item label="识别监测时间">{{ detail.createTime}}</el-form-item>
                    <el-form-item label="风险是否已消除">{{ dict.getLabel("fpYesOrNo", detail.riskEliminated)}}</el-form-item>
                    <el-form-item label="是否有家庭成员未参加医疗保险">{{ dict.getLabel("fpYesOrNo", detail.notCoveredMedicalInsurance)}}</el-form-item>
                    <el-form-item label="信息采集人">{{detail.updateUserName}}</el-form-item>
                    <el-form-item label="信息采集人联系电话">{{ detail.updateUserPhone}}</el-form-item>
                  </div>
                  <el-form-item label="义务阶段未上学原因">{{detail.dropOutOfSchoolReason}}</el-form-item>
                  <el-form-item label="备注说明">{{detail.detail}}</el-form-item>
                  <el-form-item label="图片">
                    <ai-uploader disabled v-model="detail.files"></ai-uploader>
                  </el-form-item>
                </template>
              </ai-card>
              <ai-card title="家庭收支情况">
                <template slot="content">
                  <div flex class="half wrap">
                    <el-form-item label="纳入监测对象的收入参考范围">{{detail.income1}}</el-form-item>
                    <el-form-item label="纳入监测对象的人均收入参考范围">{{detail.income2}}</el-form-item>
                    <el-form-item label="工资性收入(元)">{{detail.income3}}</el-form-item>
                    <el-form-item label="生产经营性收入(元)">{{detail.income4}}</el-form-item>
                    <el-form-item label="计划生育金(元)">{{detail.income5}}</el-form-item>
                    <el-form-item label="资产收益扶贫分红收入">{{detail.income6}}</el-form-item>
                    <el-form-item label="低保金(元)">{{detail.income7}}</el-form-item>
                    <el-form-item label="特困供养金(元)">{{detail.income8}}</el-form-item>
                    <el-form-item label="养老保险金(元)">{{detail.income9}}</el-form-item>
                    <el-form-item label="生态补偿金(元)">{{detail.income10}}</el-form-item>
                    <el-form-item label="转移性收入(元)">{{detail.income11}}</el-form-item>
                    <el-form-item label="其它转移性收入(元)">{{detail.income12}}</el-form-item>
                    <el-form-item label="财产性收入(元)">{{detail.income13}}</el-form-item>
                    <el-form-item label="其它财产收入(元)">{{detail.income14}}</el-form-item>
                    <el-form-item label="生产经营性支出(元)">{{detail.income15}}</el-form-item>
                    <el-form-item label="年收入(元)">{{detail.income16}}</el-form-item>
                    <el-form-item label="家庭纯收入(元)">{{detail.familyIncome}}</el-form-item>
                    <el-form-item label="人均纯收入(元)">{{detail.perCapitaIncome}}</el-form-item>
                  </div>
                </template>
              </ai-card>
              <ai-card title="家庭成员">
                <template #right>
                  <span style=" color: #2266ff; margin-left: 16px;cursor: pointer;font-size: 12px;" @click="addFamily({})">添加</span>
                </template>
                <template #content>
                  <ai-table :tableData="detail.family" :colConfigs="colConfigs" :dict="dict" :isShowPagination="false">
                    <el-table-column slot="options" label="操作" align="center" width="200px">
                      <template slot-scope="{ row }">
                        <el-button type="text" @click="viewFamily(row)">详情</el-button>
                        <el-button type="text" @click="addFamily(row)">编辑</el-button>
                        <el-button type="text" @click="delFamily(row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </ai-table>
                </template>
              </ai-card>
            </el-tab-pane>
            <el-tab-pane label="走访日志" lazy name="HrLog" v-if="$permissions('app_apppreventionreturntopovertylog_detail')">
              <hr-log v-if="currentTab == 'HrLog'" :instance="instance" :dict="dict" :permissions="permissions" />
            </el-tab-pane>
            <el-tab-pane label="帮扶措施" lazy name="HrMeasure">
              <hr-measure v-if="currentTab == 'HrMeasure'" :instance="instance" :dict="dict" :permissions="permissions" />
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <ai-dialog :visible.sync="isShowAdd" width="1000px" height="500px" title="添加家庭成员" @close="onClose" @onConfirm="onConfirm">
          <el-form :model="form" ref="ruleForm" :rules="rules" label-width="130px" label-position="right" size="small">
            <div flex class="half wrap">
              <div flex class="column">
                <el-form-item label="户主姓名" prop="name">
                  <el-input size="small" class="user-selecter" v-model="form.name" placeholder="请输入姓名" clearable :disabled="isEdit || isSelectUser">
                    <template slot="append">
                      <ai-person-select :instance="instance" @selectPerson="checkName" :url="'/app/appresident/list?auditStatus=1&areaId='+user.info.areaId"></ai-person-select>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入联系方式" :maxlength="11" show-word-limit />
                </el-form-item>
                <el-form-item label="证件号码" prop="idNumber">
                  <el-input v-model="form.idNumber" placeholder="请输入证件号码" :maxlength="18" :disabled="isEdit || isSelectUser" @change="handleIdNumberAutocomplete" />
                </el-form-item>
              </div>
              <el-form-item label="个人照片" prop="photo">
                <ai-avatar :instance="instance" v-model="form.photo" />
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <ai-select v-model="form.sex" :selectList="dict.getDict('sex')" disabled />
              </el-form-item>
              <el-form-item label="出生日期" prop="birthDate">
                <el-date-picker disabled value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="form.birthDate" type="date" placeholder="选择日期" />
              </el-form-item>
              <el-form-item label="与户主关系" prop="householdRelation">
                <ai-select v-model="form.householdRelation" :selectList="dict.getDict('fpRelationship')" />
              </el-form-item>
              <!-- <el-form-item label="年龄" prop="age">
                <el-input disabled v-model="form.age" placeholder="请输入年龄" type="number"/>
              </el-form-item> -->
              <el-form-item label="民族">
                <ai-select v-model="form.nation" :selectList="dict.getDict('fpNation')" />
              </el-form-item>
              <el-form-item label="文化程度">
                <ai-select v-model="form.education" :selectList="dict.getDict('fpEducation')" />
              </el-form-item>
              <el-form-item label="政治面貌">
                <ai-select v-model="form.politicsStatus" :selectList="dict.getDict('fpPoliticalOutlook')" />
              </el-form-item>
              <el-form-item label="在校生状况">
                <ai-select v-model="form.schoolStatus" :selectList="dict.getDict('fpStudentsInSchool')" />
              </el-form-item>
            </div>
            <el-form-item label="健康状况">
              <el-checkbox-group v-model="form.healthyStatusList">
                <el-checkbox :label="item.dictValue" v-for="(item, index) in dict.getDict('fpHealth')" :key="index">{{item.dictName}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <div flex class="half wrap">
              <el-form-item label="残疾类别">
                <ai-select v-model="form.disabilityType" :selectList="dict.getDict('fpDisabilityType')" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="残疾办证年度">
                <el-date-picker v-model="form.disabilityCertificateYear" type="year" placeholder="请选择" />
              </el-form-item>
            </div>
            <el-form-item label="基础保险">
              <el-checkbox-group v-model="form.basicsList">
                <el-checkbox :label="item.value" v-for="(item, index) in basicsCheckList" :key="index">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="保障措施">
              <el-checkbox-group v-model="form.guaranteeList">
                <el-checkbox :label="item.value" v-for="(item, index) in guaranteeCheckList" :key="index">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <div flex class="half wrap">
              <el-form-item label="劳动技能">
                <ai-select v-model="form.labourStatus" :selectList="dict.getDict('fpLaborSkills')" />
              </el-form-item>
              <el-form-item label="是否会讲普通话">
                <ai-select v-model="form.mandarin" :selectList="dict.getDict('fpYesOrNo')" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="务工时间(月)">
                <el-input v-model="form.workeMonths" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="就业渠道">
                <ai-select v-model="form.employmentChannels" :selectList="dict.getDict('fpEmploymentChannels')" />
              </el-form-item>
              <el-form-item label="务工企业名称">
                <el-input v-model="form.migrantEnterprises" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="公益性岗位">
                <el-input v-model="form.publicWelfarePosts" placeholder="请输入" clearable />
              </el-form-item>
              <el-form-item label="是否国外务工">
                <ai-select v-model="form.foreignWorkers" :selectList="dict.getDict('fpYesOrNo')" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="公益性岗位(月数)">
                <el-input v-model="form.publicWelfarePostsMonths" placeholder="请输入" clearable />
              </el-form-item>
            </div>
            <el-form-item label="务工所在地">
              <el-input v-model="form.foreignWorkersAddress" placeholder="请输入" clearable maxlength="30" show-word-limit />
            </el-form-item>
            <el-form-item label="现住址" prop="currentAreaId">
              <ai-area-get :instance="instance" v-model="form.currentAreaId" :root="rootArea" valueLevel="5" />
              <el-form-item prop="currentAddress">
                <el-input v-model="form.currentAddress" placeholder="详细地址" maxlength="30" show-word-limit clearable />
              </el-form-item>
            </el-form-item>
          </el-form>
        </ai-dialog>
        <ai-dialog customFooter :visible.sync="isShowDetail" width="1000px" height="500px" title="家庭成员详情">
          <el-form :model="familyInfo" label-width="160px" label-position="right" size="small">
            <div flex class="flex-start">
              <div flex class="half wrap fill">
                <el-form-item label="联系电话">{{ familyInfo.phone}}</el-form-item>
                <el-form-item label="身份证号">{{ familyInfo.idNumber}}</el-form-item>
                <el-form-item label="性别" prop="sex">{{ dict.getLabel("sex", familyInfo.sex)}}</el-form-item>
                <el-form-item label="出生日期">{{ familyInfo.birthDate}}</el-form-item>
                <el-form-item label="与户主关系">{{dict.getLabel("fpRelationship", familyInfo.householdRelation)}}</el-form-item>
                <!-- <el-form-item label="年龄" prop="age">{{ familyInfo.age}}</el-form-item> -->
                <el-form-item label="民族">{{dict.getLabel("fpNation", familyInfo.nation)}}</el-form-item>
                <el-form-item label="文化程度">{{ dict.getLabel("fpEducation", familyInfo.education)}}</el-form-item>
                <el-form-item label="政治面貌">{{dict.getLabel("fpPoliticalOutlook",familyInfo.politicsStatus)}}</el-form-item>
                <el-form-item label="在校生状况">{{dict.getLabel( "fpStudentsInSchool", familyInfo.schoolStatus)}}</el-form-item>
              </div>
              <ai-avatar :instance="instance" v-model="familyInfo.photo" :editable="false" />
            </div>
            <el-form-item label="健康状况">
              <span v-for="(item, index) in familyInfo.healthyStatusList" :key="index"><span v-if="index > 0">,</span>{{dict.getLabel("fpHealth", item)}}</span>
            </el-form-item>
            <div flex class="half wrap">
              <el-form-item label="残疾类别">{{dict.getLabel("fpDisabilityType", familyInfo.disabilityType)}}</el-form-item>
              <el-form-item label="残疾办证年度">{{familyInfo.disabilityCertificateYear}}</el-form-item>
            </div>
            <div flex class="half wrap">
              <el-form-item label="城乡居民基本医疗保险">{{dict.getLabel("fpYesOrNo", familyInfo.jcbxCxyiliao)}}</el-form-item>
              <el-form-item label="城镇职工基本医疗保险">{{dict.getLabel("fpYesOrNo", familyInfo.jcbxCzyiliao)}}</el-form-item>
              <el-form-item label="大病保险">{{dict.getLabel("fpYesOrNo", familyInfo.jcbxDabing)}}</el-form-item>
              <el-form-item label="商业补充医疗保险">{{dict.getLabel("fpYesOrNo", familyInfo.jcbxShangye)}}</el-form-item>
              <el-form-item label="城乡居民基本养老保险">{{dict.getLabel("fpYesOrNo", familyInfo.jcbxCxyanglao)}}</el-form-item>
              <el-form-item label="城镇职工基本养老保险">{{dict.getLabel("fpYesOrNo", familyInfo.jcbxCzyanglao)}}</el-form-item>
              <el-form-item label="享受人身意外保险补贴">{{dict.getLabel("fpYesOrNo", familyInfo.jcbxRenshenyiwai)}}</el-form-item>
              <el-form-item label="享受农村最低生活保障">{{dict.getLabel("fpYesOrNo", familyInfo.bzcsNongcundibao)}}</el-form-item>
              <el-form-item label="是否特困供养人员">{{dict.getLabel("fpYesOrNo", familyInfo.bzcsTekungongyang)}}</el-form-item>
              <el-form-item label="分散供养五保户转集中供养（减少）">{{dict.getLabel("fpYesOrNo", familyInfo.bzcsWubaohu)}}</el-form-item>
              <el-form-item label="是否接受医疗救助">{{dict.getLabel("fpYesOrNo", familyInfo.bzcsYiliaojiuzhu)}}</el-form-item>
              <el-form-item label="是否接受其它健康扶贫">{{dict.getLabel("fpYesOrNo", familyInfo.bzcsQita)}}</el-form-item>
              <el-form-item label="劳动技能">{{dict.getLabel("fpLaborSkills", familyInfo.labourStatus)}}</el-form-item>
              <el-form-item label="是否会讲普通话">{{dict.getLabel("fpYesOrNo", familyInfo.mandarin)}}</el-form-item>
              <el-form-item label="务工时间(月)">{{familyInfo.workeMonths}}</el-form-item>
              <el-form-item label="就业渠道">{{dict.getLabel("fpEmploymentChannels", familyInfo.employmentChannels)}}</el-form-item>
              <el-form-item label="务工企业名称">{{familyInfo.migrantEnterprises}}</el-form-item>
              <el-form-item label="公益性岗位">{{familyInfo.publicWelfarePosts}}</el-form-item>
              <el-form-item label="是否国外务工">{{dict.getLabel("fpYesOrNo", familyInfo.foreignWorkers)}}</el-form-item>
              <el-form-item label="公益性岗位(月数)">{{familyInfo.publicWelfarePostsMonths}}</el-form-item>
            </div>
            <el-form-item label="务工所在地">{{familyInfo.foreignWorkersAddress}}
            </el-form-item>
            <el-form-item label="现住址">{{currentFullAddressFamily}}</el-form-item>
          </el-form>
          <template slot="footer">
            <el-button @click="isShowDetail=false">关闭</el-button>
          </template>
        </ai-dialog>
        <ai-dialog :visible.sync="isShowApply" :title="dialogTitle" @closed="applyInfo={},applyFileList=[]" @onConfirm="submitApply" width="600px">
          <el-form :model="applyInfo" :rules="rulesApply" ref="dialogApplyInfo" size="small" label-width="120px">
            <el-form-item label="风险因素" prop="riskType" v-if="changeStatus == 0 || changeStatus == 1">
              <ai-select v-model="applyInfo.riskType" :selectList="dict.getDict('fpRiskType')" />
            </el-form-item>
            <el-form-item label="风险消除方式" prop="riskEliminationMethod" v-if="changeStatus == 3 || changeStatus == 4">
              <ai-select v-model="applyInfo.riskEliminationMethod" :selectList="dict.getDict('fpRiskEliminationMethod')" />
            </el-form-item>
            <el-form-item label="备注说明">
              <el-input type="textarea" v-model="applyInfo.opinion" placeholder="请输入" maxlength="500" show-word-limit rows="5" />
            </el-form-item>
            <el-form-item label="图片">
              <ai-uploader v-model="applyFileList" :instance="instance" acceptType=".jpg,.jpeg,.png">
                <template #tips>
                  最多9张,仅支持10M以内的jpg、jpeg、png格式照片
                </template>
              </ai-uploader>
            </el-form-item>
          </el-form>
        </ai-dialog>
        <ai-dialog :visible.sync="isShowExamine" :title="dialogTitle" width="800px" customFooter>
          <el-steps :active="examineStep" align-center>
            <el-step title="申请信息"></el-step>
            <el-step title="处理意见"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
          <div class="info" v-if="examineStep == 1">
            <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
              <ai-info-item label="操作类型" :value="changeStatus == 2 ? '申请纳入监测' : '申请解除风险' " />
              <ai-info-item label="风险因素" :value="dict.getLabel('fpRiskType', examineInfo.bizDictValue)" v-if="changeStatus == 2" />
              <ai-info-item label="风险消除方式" :value="dict.getLabel('fpRiskEliminationMethod', examineInfo.bizDictValue)" v-if="changeStatus == 5" />
              <ai-info-item label="申请人" :value="examineInfo.operationUserName" />
              <ai-info-item label="申请时间" :value="examineInfo.createTime" />
            </ai-wrapper>
            <ai-wrapper label-width="120px" :columnsNumber="1">
              <ai-info-item label="备注说明" :value="examineInfo.detail" />
            </ai-wrapper>
            <ai-uploader v-model="examineInfo.files" disabled style="padding-left:150px;" />
          </div>
          <div class="form" v-if="examineStep == 2">
            <el-form :model="examineFrom" size="small" label-width="80px">
              <el-form-item label="审核结果" required>
                <el-radio-group v-model="examineFrom.pass">
                  <el-radio :label="1" v-if="changeStatus == 5">解除风险</el-radio>
                  <el-radio :label="1" v-if="changeStatus == 2">纳入监测</el-radio>
                  <el-radio :label="0">驳回申请</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="备注说明">
                <el-input type="textarea" v-model="examineFrom.opinion" placeholder="请输入" maxlength="500" show-word-limit rows="5" />
              </el-form-item>
              <el-form-item label="图片">
                <ai-uploader v-model="examineFileList" :instance="instance" acceptType=".jpg,.jpeg,.png">
                  <template #tips>
                    最多9张,仅支持10M以内的jpg、jpeg、png格式照片
                  </template>
                </ai-uploader>
              </el-form-item>
            </el-form>
          </div>
          <div class="success" v-if="examineStep == 3">
            <i class="el-icon-success"></i>
            <p>审核成功</p>
          </div>
          <template slot="footer" v-if="examineStep != 3">
            <el-button @click="cancelExamine">{{examineStep == 2 ? '上一步' : '取消'}}</el-button>
            <el-button type="primary" @click="examineNext">下一步</el-button>
          </template>
          <template slot="footer" v-if="examineStep == 3">
            <el-button @click="back">关闭</el-button>
          </template>
        </ai-dialog>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import { mapState } from "vuex";
import HrMeasure from "./detail/hrMeasure";
import HrLog from "./detail/hrLog";

export default {
  name: "hrDetail",
  components: { HrLog, HrMeasure },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  computed: {
    ...mapState(["user"]),
    colConfigs() {
      return [
        {
          label: "与户主关系",
          prop: "householdRelation",
          dict: "fpRelationship",
        },
        { label: "姓名", prop: "name" },
        { label: "性别", prop: "sex", dict: "sex" },
        { label: "年龄", prop: "age" },
        {
          label: "身份证号",
          render: (h, { row }) =>
            h("p", null, this.idCardNoUtil.hideId(row.idNumber)),
        },
        { slot: "options" },
      ];
    },
    isGridAdmin() {
      return this.user.info.girdCheckType == 2;
    },
    currentFullAddress() {
      let { countyName, townName, villageName, currentAddress } = this.detail;
      return [countyName, townName, villageName, currentAddress].join("");
    },
    currentFullAddressFamily() {
      let { countyName, townName, villageName, currentAddress } = this.familyInfo;
      return [countyName, townName, villageName, currentAddress].join("");
    },
    rules() {
      return {
        idNumber: [{ required: true, message: "请输入身份证号" }],
        name: [{ required: true, message: "请输入姓名" }],
        sex: [{ required: true, message: "请选择性别" }],
        phone: [{ required: true, message: "请输入联系方式" }],
        currentAreaId: [
          { required: true, message: "请选择现住址" },
          { pattern: /[^0]0{0,2}$/, message: "请选择到村/社区" },
        ],
        isHousehold: [{ required: true, message: "请选择是否户主" }],
        householdRelation: [{ required: true, message: "请选择与户主关系" }],
        householdIdNumber: [{ required: true, message: "请选择户主身份证号" }],
      };
    },
    rulesApply() {
      return {
        riskType: [{ required: true, message: "请选择风险因素" }],
        riskEliminationMethod: [{ required: true, message: "请选择风险消除方式" }],
      };
    },
    rootArea() {
      return this.user.info?.areaId?.replace(/(\d{6})\d+/g, '$1' + Array(7).join("0")) || ""
    },
    guaranteeCheckList() {
      return [
        { label: '享受农村最低生活保障', value: 0 },
        { label: '是否特困供养人员', value: 1 },
        { label: '分散供养五保户转集中供养（减少）', value: 2 },
        { label: '是否接受医疗救助', value: 3 },
        { label: '是否接受其它健康扶贫', value: 4 },
      ]
    },
    basicsCheckList() {
      return [
        { label: '城乡居民基本医疗保险', value: 0 },
        { label: '城镇职工基本医疗保险', value: 1 },
        { label: '大病保险', value: 2 },
        { label: '商业补充医疗保险', value: 3 },
        { label: '城乡居民基本养老保险', value: 4 },
        { label: '城镇职工基本养老保险', value: 5 },
        { label: '享受人身意外保险补贴', value: 6 },
      ]
    },
  },
  data() {
    return {
      detail: {},
      currentTab: "",
      isShowAdd: false,
      form: { healthyStatusList: [], basicsList: [], guaranteeList: [] },
      isEdit: false,
      isShowDetail: false,
      familyInfo: {},
      isSelectUser: false,
      isShowApply: false,
      dialogTitle: '',
      applyInfo: {},
      isShowExamine: false,
      examineInfo: {},
      examineStep: 1, //审批步骤
      examineFrom: { pass: 1 },
      applyFileList: [],
      examineFileList: [],
      changeStatus: 0,  //操作状态 0:申请纳入监测 1:纳入监测 2:纳入监测审批 3:申请解除风险 4:解除风险 5:解除风险审批
      girdAdminApplyStatus: 0, //网格长纳入监测状态 0：纳入监测 1：纳入监测审批
    };
  },
  methods: {
    checkName(e) {
      if (!e) {
        this.isSelectUser = false
        this.form.name = ''
        this.form.idNumber = ''
        this.form.phone = ''
        this.form.areaId = ''
        this.form.birthDate = ''
        this.form.sex = ''
        this.form.age = ''
        this.form.currentAreaId = ''
        this.form.currentAddress = ''
        this.form.nation = ''
        this.form.education = ''
        this.form.politicsStatus = ''
        return
      }
      this.form.name = e.name
      this.form.idNumber = e.idNumber
      this.form.phone = e.phone
      this.form.currentAreaId = e.currentAreaId
      this.form.currentAddress = e.currentAddress
      this.form.nation = e.nation
      this.form.education = e.education
      this.form.politicsStatus = e.politicsStatus
      this.handleIdNumberAutocomplete(e.idNumber)
      this.isSelectUser = true
    },
    addFamily(row) {
      if (row && row.id) {
        this.isEdit = true
      }
      row.healthyStatusList = []
      row.basicsList = []
      row.guaranteeList = []
      if (row && row.healthyStatus) {
        row.healthyStatusList = row.healthyStatus.split(',')
      }
      if (row && row.basicsCheck) {
        row.basicsList = row.basicsCheck.split(',')
      }
      if (row && row.guaranteeCheck) {
        row.guaranteeList = row.guaranteeCheck.split(',')
      }
      this.form = { ...row }
      this.isShowAdd = true
    },
    viewFamily(row) {
      row.healthyStatusList = []
      row.basicsList = []
      row.guaranteeList = []
      if (row.healthyStatus) {
        row.healthyStatusList = row.healthyStatus.split(',')
      }
      if (row.basicsCheck) {
        row.basicsList = row.basicsCheck.split(',')
      }
      if (row.guaranteeCheck) {
        row.guaranteeList = row.guaranteeCheck.split(',')
      }
      this.familyInfo = { ...row }
      this.isShowDetail = true
    },
    delFamily(row) {
      if (row.isHousehold == 1) {
        return this.$message.error('户主信息不允许删除');
      }
      this.$confirm("是否删除该家庭成员").then(() => {
        this.instance.post(`/app/apppreventionreturntopoverty/delete?ids=${row.id}`).then(res => {
          if (res.code == 0) {
            this.getDetail()
            this.$message.success('删除成功!');
          }
        })
      })
    },
    handleIdNumberAutocomplete(v) {
      let { birthday: birthDate, sex } = this.idCardNoUtil.getIdCardInfo(v);
      this.form = { ...this.form, birthDate, sex, age: this.$calcAge(v) };
    },
    onConfirm() {
      this.$refs.ruleForm.validate((v) => {
        if (v) {
          this.form.isHousehold = 0
          this.form.householdIdNumber = this.detail.idNumber
          if (this.form.healthyStatusList.length) {
            this.form.healthyStatus = this.form.healthyStatusList.join(',')
          }
          if (this.form.basicsList.length) {
            this.form.basicsCheck = this.form.basicsList.join(',')
          }
          if (this.form.guaranteeList.length) {
            this.form.guaranteeCheck = this.form.basicsList.join(',')
          }
          this.instance.post(`/app/apppreventionreturntopoverty/addOrUpdate`, this.form).then(res => {
            if (res.code == 0) {
              this.getDetail()
              this.$message.success('提交成功!');
              this.isShowAdd = false
            }
          })
        }
      });
    },
    onClose() {
      this.isShowAdd = false;
    },
    back() {
      this.$router.push({});
    },
    getDetail() {
      let { id } = this.$route.query;
      id &&
        this.instance
          .post("/app/apppreventionreturntopoverty/queryDetailById", null, {
            params: { id },
          })
          .then((res) => {
            if (res?.data) {
              this.detail = res.data;
              this.detail.family?.map((e) => {
                e.householdRelation = e.householdRelation || "户主";
              });

              if (this.detail.healthyStatus) {
                this.detail.healthyStatusList = this.detail.healthyStatus.split(',')
              }
              if (this.detail.basicsCheck) {
                this.detail.basicsList = this.detail.basicsCheck.split(',')
              }
              if (this.detail.guaranteeCheck) {
                this.detail.guaranteeList = this.detail.guaranteeCheck.split(',')
              }

              if (this.detail.status == 0 && this.isGridAdmin) {
                this.instance.post(`/app/apppreventionreturntopoverty/popup?id=${this.detail.id}`).then(res => {
                  if (res.code == 0 && res.data) { //纳入监测审批
                    this.girdAdminApplyStatus = 1
                  }
                })
              }
            }
          });
    },
    gotoEdit() {
      let { query } = this.$route;
      this.$router.push({ query, hash: "#add" });
    },
    applyMonitor(title, status) {
      this.dialogTitle = title
      this.changeStatus = status
      this.isShowApply = true
    },
    submitApply() {
      this.$refs.dialogApplyInfo.validate((v) => {
        if (v) {
          this.applyInfo.id = this.detail.id
          if (this.changeStatus == 1 || this.changeStatus == 4) { //网格长直接纳入监测/解除风险
            this.applyInfo.pass = 1
          }
          var url = `/app/apppreventionreturntopoverty/examine` //0, 1纳入监测
          if (this.changeStatus == 3 || this.changeStatus == 4) { //3, 4解除风险
            url = `/app/apppreventionreturntopoverty/relieve`
          }

          if (this.applyFileList.length) {
            var ids = this.applyFileList.map((item) => {
              return item.id
            })
            this.applyInfo.files = ids.join(',')
          }
          this.instance.post(url, null, { params: this.applyInfo }).then(res => {
            if (res.code == 0) {
              this.getDetail()
              this.$message.success('提交成功!');
              this.isShowApply = false
            }
          })

        }
      });
    },
    examine(title, status) {
      this.dialogTitle = title
      this.changeStatus = status
      this.instance.post(`/app/apppreventionreturntopoverty/popup?id=${this.detail.id}`).then(res => {
        if (res.code == 0) {
          this.examineInfo = res.data
          this.isShowExamine = true
        }
      })
    },
    examineNext() {
      if (this.examineStep == 2) { //审批操作
        if (this.examineFileList.length) {
          var ids = this.examineFileList.map((item) => {
            return item.id
          })
          this.examineFrom.files = ids.join(',')
        }
        this.examineFrom.id = this.detail.id
        var url = `/app/apppreventionreturntopoverty/examine` //2 纳入监测
        if (this.changeStatus == 5) { //5 解除风险
          url = `/app/apppreventionreturntopoverty/relieve`
        }
        this.instance.post(url, null, { params: this.examineFrom }).then(res => {
          if (res.code == 0) {
            this.getDetail()
            this.$message.success('提交成功!');
          }
        })
      }
      if (this.examineStep == 3) {
        this.isShowExamine = false
        this.examineFrom = { pass: 1 }
        return
      }
      this.examineStep++
    },
    cancelExamine() {
      if (this.examineStep == 2) {
        return this.examineStep--
      }
      this.isShowExamine = false
    },
    handleDelete(ids) {
      this.$confirm("是否要删除监测对象").then(() => {
        this.instance.post("/app/apppreventionreturntopoverty/delete", null, { params: { ids: ids?.toString() }, }).then((res) => {
          if (res?.code == 0) {
            this.$message.success("删除成功!");
            this.back();
          }
        });
      })
    },
  },
  created() {
    this.getDetail();
  },
};
</script>

<style lang="scss" scoped>
.hrDetail {
  height: 100%;

  .flex-start {
    align-items: flex-start;

    .AiAvatar {
      margin-left: 20px;
    }
  }

  .half {
    align-items: flex-start;

    & > .el-form-item,
    & > div {
      width: 50%;

      .el-form-item {
        width: 100%;
      }
    }
  }

  .success {
    text-align: center;
    padding-top: 20px;
    .el-icon-success {
      color: rgb(46, 162, 34);
      font-size: 100px;
    }
    p {
      text-align: center;
      font-size: 16px;
      padding-top: 20px;
      color: #000;
    }
  }

  ::v-deep .ai-dialog__content--wrapper {
    overflow-y: hidden !important;
  }

  ::v-deep .AiPersonSelect .el-button {
    color: #fff;
  }

  ::v-deep.el-tabs__content {
    max-height: calc(100vh - 136px);
    overflow-y: auto;
  }

  ::v-deep .el-step__icon {
    border-color: #ccc !important;
  }
  ::v-deep .el-step__line {
    background-color: #ccc !important;
  }
  ::v-deep .el-step__title,
  ::v-deep .is-wait {
    color: #666 !important;
  }
  ::v-deep .is-finish {
    color: #26f !important;
  }
  ::v-deep .is-finish .el-step__icon {
    border-color: #26f !important;
  }
}
</style>