<template>
  <div class="portraitPerson">
    <div class="right-wrap-left-title f22 pl-16 f-weight600">人物画像</div>
      <div class="flex-row">
        <div class="right-wrap-left-tab"  :style="'height:'+`${rightContentHeight}`+'px'">
          <el-tooltip
              popper-class="custom-tooltip"
              effect="dark"
              :content="portraitInfo.name+'的人物画像'"
              placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 1" :class="rightActive == 1 ?'active':''">
              <svg-icon :icon-class="rightActive == 1 ? `hx-1-active` : 'hx-1'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="身份信息" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 2" :class="rightActive == 2 ?'active':''">
              <svg-icon :icon-class="rightActive == 2 ? `hx-2-active` : 'hx-2'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="地理位置" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 3" :class="rightActive == 3 ?'active':''">
              <svg-icon :icon-class="rightActive == 3 ? `hx-3-active` : 'hx-3'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="经济状况" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 4" :class="rightActive == 4 ?'active':''">
              <svg-icon :icon-class="rightActive == 4 ? `hx-4-active` : 'hx-4'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="雇佣状态" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 5" :class="rightActive == 5 ?'active':''">
              <svg-icon :icon-class="rightActive == 5 ? `hx-5-active` : 'hx-5'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="信用报告" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 6" :class="rightActive == 6 ?'active':''">
              <svg-icon :icon-class="rightActive == 6 ? `hx-6-active` : 'hx-6'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="信贷记录" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 7" :class="rightActive == 7 ?'active':''">
              <svg-icon :icon-class="rightActive == 7 ? `hx-7-active` : 'hx-7'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="信用卡" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 8" :class="rightActive == 8 ?'active':''">
              <svg-icon :icon-class="rightActive == 8 ? `hx-8-active` : 'hx-8'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="负债情况" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 9" :class="rightActive == 9 ?'active':''">
              <svg-icon :icon-class="rightActive == 9 ? `hx-9-active` : 'hx-9'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="婚姻状况" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 11" :class="rightActive == 11 ?'active':''">
              <svg-icon :icon-class="rightActive == 11 ? `hx-12-active` : 'hx-12'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="家庭成员" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 12" :class="rightActive == 12 ?'active':''">
              <svg-icon :icon-class="rightActive == 12 ? `hx-11-active` : 'hx-11'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="消费行为" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 13" :class="rightActive == 13 ?'active':''">
              <svg-icon :icon-class="rightActive == 13 ? `hx-13-active` : 'hx-13'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="还款行为" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 14" :class="rightActive == 14 ?'active':''">
              <svg-icon :icon-class="rightActive == 14 ? `hx-14-active` : 'hx-14'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="风险评估" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 15" :class="rightActive == 15 ?'active':''">
              <svg-icon :icon-class="rightActive == 15 ? `hx-15-active` : 'hx-15'" className="tabs-svg" />
            </div>
          </el-tooltip>
          <el-tooltip popper-class="custom-tooltip" effect="dark" content="建议措施" placement="right">
            <div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 16" :class="rightActive == 16 ?'active':''">
              <svg-icon :icon-class="rightActive == 16 ? `hx-16-active` : 'hx-16'" className="tabs-svg" />
            </div>
          </el-tooltip>
        </div>
        <div class="right-wrap-left-content">
          <div class="hx-1-content" v-if="rightActive == 1">
            <div class="f12 pl-16 pt-16 pb-6">人物画像</div>
            <el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
              <div class="p-16" :class="(portraitInfo.gender == 'male'||portraitInfo.gender == '') ? 'personghximg':'personghximgw'">
                <!-- 基本信息  -->
                <div class="position_info character-info theme-blue">
                  <div class="character-info-title">基本信息</div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">{{portraitInfo.name}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">性别</div>
                    <div class="character-info-details-text">{{(portraitInfo.gender == 'male' || portraitInfo.gender == '') ?'男':'女'}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">电话</div>
                    <div class="character-info-details-text">{{portraitInfo.phoneNumber}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">居住地</div>
                    <div class="character-info-details-text">{{ getAddress(portraitInfo.domicilePlace) }}  {{portraitInfo.domicileAddress}} </div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">经济状况</div>
                    <div class="character-info-details-text">{{portraitInfo.economicStatus}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">雇佣状态</div>
                    <div class="character-info-details-text">{{portraitInfo.employmentStatus}}</div>
                  </div>
                </div>
                
                <!-- 家庭情况  -->
                <div class="position_family character-info theme-green">
                  <div class="character-info-title">家庭情况</div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">婚姻状况</div>
                    <div class="character-info-details-text">{{portraitInfo.maritalStatus}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">家庭成员</div>
                    <div class="character-info-details-text">{{portraitInfo.familyMembers}}</div>
                  </div>
                </div>
                
                <!-- 执行情况 -->
                <div class="position_carry character-info theme-pink">
                  <div class="character-info-title">执行情况</div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">是否被执行</div>
                    <div class="character-info-details-text">{{portraitInfo.isExecuted =='Yes'?'是':'否'}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">机构黑名单</div>
                    <div class="character-info-details-text">{{portraitInfo.isBlacklisted =='Yes'?'是':'否'}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">是否失信人员</div>
                    <div class="character-info-details-text">{{portraitInfo.isUntrustworthy =='Yes'?'是':'否'}}</div>
                  </div>
                  
                </div>
                <!-- 财务资产情况 -->
                <div class="position_finance character-info theme-yellow">
                  <div class="character-info-title">财务资产情况</div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">信用等级</div>
                    <div class="character-info-details-text">{{portraitInfo.creditRating}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">逾期</div>
                    <div class="character-info-details-text">{{portraitInfo.overdue}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">欠款</div>
                    <div class="character-info-details-text">{{portraitInfo.arrears}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">信用卡</div>
                    <div class="character-info-details-text">{{portraitInfo.creditCardCount}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">信用卡额度</div>
                    <div class="character-info-details-text">{{portraitInfo.creditLimit}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">资产</div>
                    <div class="character-info-details-text">{{portraitInfo.assetSituation}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">还款行为</div>
                    <div class="character-info-details-text">{{portraitInfo.repaymentBehavior}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">消费行为</div>
                    <div class="character-info-details-text">{{portraitInfo.consumptionBehavior}}</div>
                  </div>
                </div>
                <!-- 风险情况 -->
                <div class="position_risk character-info theme-pink2">
                  <div class="character-info-title">风险情况</div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">风险评估</div>
                    <div class="character-info-details-text">{{portraitInfo.riskAssessment}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">建议措施</div>
                    <div class="character-info-details-text">{{portraitInfo.suggestedMeasures}}</div>
                  </div>
                </div>
                <!-- 适诉情况 -->
                <div class="position_lawsuit character-info theme-purple">
                  <div class="character-info-title">适诉情况</div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">还款意愿</div>
                    <div class="character-info-details-text">{{portraitInfo.repaymentWillingness}}</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">诉讼</div>
                    <div class="character-info-details-text">{{portraitInfo.litigationSituation}}</div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="portrait-marker" v-if="rightActive != 1">
            <el-scrollbar ref="scrollContainer"  :style="'height:'+`${portraitcontentHeight}`+'px'">
              <div ref="positionContainer" class="flex-column p-16">
                  <div class="f18">基本信息</div>
                  <div ref="targetPerson" class="f16 mt-16"><a class="dot"></a>身份信息</div>
                  <div class="person-info flex-column mt-16">
                    <span>姓名：<a class="color-000">{{portraitInfo.name}}</a></span>
                    <span>性别：<a class="color-000">{{(portraitInfo.gender == 'male' || portraitInfo.gender == '') ? '男':'女'}}</a></span>
                    <span>年龄：<a class="color-000">{{portraitInfo.age}}</a></span>
                    <span>手机号码：<a class="color-000">{{portraitInfo.phoneNumber}}</a></span>
                    <span>身份证号：<a class="color-000">{{portraitInfo.idCardNumber}}</a></span>
                  </div>
                  <div ref="targetAddress" class="f16 mt-16"><a class="dot"></a>地理位置</div>
                  <div class="flex-column">
                    <span class="mt-8">户籍所在地：</span>
                    <span class="mt-8">
                      <el-cascader size="small" :placeholder="getAddress(portraitObj.domicilePlace)" v-model="portraitObj.domicilePlace" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
                    </span>
                    <span class="mt-8">
                      <el-input size="small" v-model="portraitObj.domicileAddress" placeholder="请输入详细地址,楼栋单元" maxlength="30"></el-input>
                    </span>
                    <span class="mt-8">常住地址：</span>
                    <span class="mt-8">
                      <!-- :placeholder="getAddress(portraitObj.residencePlace)" -->
                      <el-cascader size="small" :placeholder="getAddress(portraitObj.residencePlace)" v-model="portraitObj.residencePlace" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }"></el-cascader>
                    </span>
                    <span class="mt-8">
                      <el-input size="small" v-model="portraitObj.residenceAddress" placeholder="请输入详细地址,楼栋单元" maxlength="30"></el-input>
                    </span>
                    <span class="mt-8">工作地点：</span>
                    <span class="mt-8">
                      <el-cascader size="small" :placeholder="getAddress(portraitObj.workPlace)" v-model="portraitObj.workPlace" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
                    </span>
                    <span class="mt-8">
                      <el-input size="small" v-model="portraitObj.workAddress" placeholder="请输入详细地址,楼栋单元" maxlength="30"></el-input>
                    </span>
                  </div>
                  <div ref="targetRevenue" class="f18 mt-16">经济状况</div>
                  <div class="f16 mt-16"><a class="dot"></a>经济状况</div>
                  <div class="box-list" >
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'REVENUE')" :key="index" @click="portraitObj.economicStatus = item.labelName " :class="portraitObj.economicStatus == item.labelName ? 'active':''">{{item.labelName}}</span>
                  </div>
                  <div ref="targetJob" class="f16 mt-16"><a class="dot"></a>雇佣状态</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'JOB')" :key="index" @click="portraitObj.employmentStatus = item.labelName " :class="portraitObj.employmentStatus == item.labelName ? 'active':''">{{item.labelName}}</span>
                  </div>
                  <div ref="targetCredit" class="f18 mt-16">信用历史</div>
                  <div class="f16 mt-16"><a class="dot"></a>信用报告</div>
                  <div class="f16 mt-16"><a class="dot"></a>信贷记录</div>
                  <div class="f16 mt-16"><a class="dot"></a>信用卡</div>
                  <div class="f18 mt-16">财务资产和负债</div>
                  <div ref="targetProperty" class="f16 mt-16"><a class="dot"></a>财产情况</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'PROPERTY')" :key="index" @click="portraitObj.assetSituation = item.labelName " :class="portraitObj.assetSituation == item.labelName ? 'active':''">{{item.labelName}}</span>
                    <!-- <span>有房</span>
                    <span>有车</span>
                    <span>存款</span>
                    <span>投资</span> -->
                  </div>
                  <div ref="targetLiability" class="f16 mt-16"><a class="dot"></a>负债情况</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'LIABILITY')" :key="index" @click="portraitObj.arrears = item.labelName " :class="portraitObj.arrears == item.labelName ? 'active':''">{{item.labelName}}</span>
                    <!-- <span>多头借贷</span>
                    <span>信用卡负债</span>
                    <span>银行其他负债</span>
                    <span>非银负债</span>
                    <span>民间借贷或高利贷</span>
                    <span>负债0-10W</span>
                    <span>负债10-50W</span>
                    <span>负债50-100W</span>
                    <span>负债100W以上</span>
                    <span>存在还款竞争</span> -->
                  </div>
                 
                  <div class="f18 mt-16">家庭状况</div>
                  <div ref="targetMatrimony" class="f16 mt-16"><a class="dot"></a>婚姻状况</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'MATRIMONY')" :key="index" @click="portraitObj.maritalStatus = item.labelName " :class="portraitObj.maritalStatus == item.labelName ? 'active':''">{{item.labelName}}</span>
                    <!-- <span>未婚</span>
                    <span>已婚</span>
                    <span>离婚</span> -->
                  </div>
                  <div ref="targetFamily" class="f16 mt-16"><a class="dot"></a>家庭成员</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'FAMILY')" :key="index" @click="portraitObj.familyMembers = item.labelName " :class="portraitObj.familyMembers == item.labelName ? 'active':''">{{item.labelName}}</span>
                    <!-- <span>无子女</span>
                    <span>有子女</span>
                    <span>有父母</span>
                    <span>无父母</span> -->
                  </div>
                  <div class="f18 mt-16">行为分析</div>
                  <div ref="targetConsumption" class="f16 mt-16"><a class="dot"></a>消费行为</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'CONSUMPTION')" :key="index" @click="portraitObj.consumptionBehavior = item.labelName " :class="portraitObj.consumptionBehavior == item.labelName ? 'active':''">{{item.labelName}}</span>
                    <!-- <span>收入匹配消费</span>
                    <span>超前消费</span>
                    <span>滞后消费</span>
                    <span>日常消费</span>
                    <span>娱乐消费</span>
                    <span>奢侈品消费</span>
                    <span>冲动消费</span>
                    <span>本地消费</span>
                    <span>异地消费</span>
                    <span>线上消费</span>
                    <span>消费增长</span>
                    <span>消费下降</span> -->
                  </div>
                  <div ref="targetRepayment" class="f16 mt-16"><a class="dot"></a>还款行为</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'REPAYMENT')" :key="index" @click="portraitObj.repaymentBehavior = item.labelName " :class="portraitObj.repaymentBehavior == item.labelName ? 'active':''">{{item.labelName}}</span>
                    <!-- <span>按时还</span>
                    <span>不按时还</span> -->
                  </div>
                  <div class="f18 mt-16">诉讼情况</div>
                  <div class="f16 mt-16"><a class="dot"></a>涉诉讼</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'LAWSUIT')" :key="index" @click="portraitObj.litigationSituation = item.labelName " :class="portraitObj.litigationSituation == item.labelName ? 'active':''">{{item.labelName}}</span>
                  </div>
                  <div class="f16 mt-16"><a class="dot"></a>还款意愿</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'WILLINGNESS_TO_REPAY')" :key="index" @click="portraitObj.repaymentWillingness = item.labelName " :class="portraitObj.repaymentWillingness == item.labelName ? 'active':''">{{item.labelName}}</span>
                  </div>
                  <div ref="targetRisk" class="f18 mt-16">风险评估和建议</div>
                  <div class="f16 mt-16"><a class="dot"></a>风险评估</div>
                  <div class="box-list">
                    <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'RISK')" :key="index" @click="portraitObj.riskAssessment = item.labelName " :class="portraitObj.riskAssessment == item.labelName ? 'active':''">{{item.labelName}}</span>
                    <!-- <span>低风险</span>
                    <span>中风险</span>
                    <span>高风险</span> -->
                  </div>
                  <div class="f16 mt-16"><a class="dot"></a>建议措施</div>
                  <div class="box-list">
                    <!-- <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'RISK')" :key="index" @click="portraitObj.suggestedMeasures = item.labelName " :class="portraitObj.suggestedMeasures == item.labelName ? 'active':''">{{item.labelName}}</span> -->
                    <!-- <span>调整还款计划</span>
                    <span>增加收入</span>
                    <span>减少支出</span> -->
                  </div>
                  
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import chinalist from 'china-location/dist/location.json';
import ChinaLocation from 'china-location';
import api from "@/services/caseManagement";
export default {
  components: {
    uploadFile: () => import('@/components/uploadFile.vue'),//上传
  },
  props: {
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },
    
  },
  data() {
    return {
      debtorEntityList:[],
      portraitInfo:{},
      portraitObj:{
        debtorId:'',
        id:'',
        domicilePlace:[],//债务人的户籍所在地（省/市/区）	
        domicileAddress:'',//债务人的户籍详细地址	
        residencePlace:[],//债务人的常住地（省/市/区）	
        residenceAddress:'',//债务人的常住详细地址	
        workPlace:[],//债务人的工作地（省/市/区）	
        workAddress:'',//债务人的工作详细地址	
        economicStatus:'',//债务人的经济状况描述	
        employmentStatus:'',//债务人的雇佣状态（如 Employed, Unemployed, Self-employed）	
        maritalStatus:'',//债务人的婚姻状况（如 Single, Married, Divorced）	
        familyMembers:'',//债务人的家庭成员信息（可以是 JSON 字符串）	
        isExecuted:'',//债务人是否被执行过法律程序（Yes 或 No）	
        isBlacklisted:'',//债务人是否被列入黑名单（Yes 或 No）	
        isUntrustworthy:'',//债务人是否有失信记录（Yes 或 No）	
        creditRating:'',//债务人的信用等级	
        overdue:'',//债务人的逾期情况描述	
        arrears:'',//债务人的欠款情况描述	
        creditCardCount:'',//债务人持有的信用卡数量	
        creditLimit:'',//债务人所有信用卡的总授信额度	
        assetSituation:'',//债务人的资产情况描述	
        consumptionBehavior:'',//债务人的消费行为模式描述	
        repaymentBehavior:'',//债务人的还款行为模式描述	
        repaymentWillingness:'',//债务人的还款意愿描述	
        litigationSituation:'',//债务人的诉讼情况描述	
        riskAssessment:'',//对债务人的风险评估结果	
        suggestedMeasures:'',//针对债务人情况提出的建议措施	
      },
      initlocation: null,
      provinces: [],
      rightActive: 1,
      debtorProlabels:[],
      Rollposition:[{key:'targetPerson',active:1},{key:'targetPerson',active:2},{key:'targetAddress',active:3},{key:'targetRevenue',active:4},
      {key:'targetJob',active:5},{key:'targetCredit',active:6},{key:'targetCredit',active:7},{key:'targetCredit',active:8},
      {key:'targetLiability',active:9},{key:'targetMatrimony',active:10},{key:'targetMatrimony',active:11},
      {key:'targetFamily',active:12},{key:'targetConsumption',active:13},{key:'targetRisk',active:14},{key:'targetRisk',active:15},
      {key:'targetRisk',active:16},
      ],
    };
  },
  computed: {
    // 左侧
    leftContentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 100
    },
    // 获取右侧滚动高度
    rightContentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 57
    },
    // 获取抽屉drawer的内容高度
    OfficecontentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 185
    },
    CommunicationcontentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 57 - 90 
    },
    portraitcontentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 57 - 130 
    },
  },
  watch: {
      // 监听文件列表的变化，重新整理内部数据
      rightActive: {
          immediate: true,
          handler() {
            setTimeout(() => {
              this.scrollToPosition()
            }, 200);
          }
      },
      portraitObj: {
        handler: function(newVal, oldVal) {
          // 这里可以执行你需要的任何操作
          // console.log('Object changed!')
          setTimeout(() => {
            this.handleSubmit()
          }, 800);
        },
        deep: true // 确保深度监听
      }

  },
  mounted() {
    this.initlocation = new ChinaLocation(chinalist);
    this.getCaseInfoById()
  },
  methods: {
    isJsonString(str) {
      try {
        str.forEach(item =>{})
        return true;
      } catch (e) {
        return false;
      }
    },
    getAddress(residencePlace){
      if(residencePlace == undefined || residencePlace == null || residencePlace == '')
      {
        return '请选择省市区(县)'
      }
      let residencePlaceNew = null
      if(!this.isJsonString(residencePlace)){
        residencePlaceNew = JSON.parse(residencePlace)
      }
      else
      {
        residencePlaceNew = residencePlace
      }
      
      const getlocation = new ChinaLocation(chinalist);
      const newProvince = residencePlaceNew[0];
      const newCity = residencePlaceNew[1];
      const newDistrict = residencePlaceNew[2];
      getlocation.changeProvince(newProvince);
      getlocation.changeCity(newCity);
      getlocation.changeDistrict(newDistrict);
      getlocation.changeLocation(newProvince, newCity, newDistrict);
      const newLocation = getlocation.getCurrentAddress();
      return newLocation.province.name + '/' + newLocation.city.name + '/' + newLocation.district.name 
      
    },
    scrollToPosition() {
      const scrollbar = this.$refs.scrollContainer
      if (scrollbar) {
        const wrap = scrollbar.$refs.wrap;
        if (wrap) {
          let scrollTo = this.scrollToTarget()
          // 假设你想滚动到距离顶部100像素的位置
          // wrap.scrollTo(0, 500);
          wrap.scrollTo({
            left: 0,
            top: scrollTo,
            behavior: 'smooth' // 使用'smooth'让滚动平滑
          });
        }
      }
    },
    scrollToTarget() {
      let positionData =  this.Rollposition.find(item =>{
        return item.active == this.rightActive
      })
      const scrollContainer = this.$refs.positionContainer;
      const targetElement = this.$refs[positionData.key];
      
      // 计算滚动位置（这里简单设置为滚动到目标元素的顶部）
      const scrollPosition = targetElement.offsetTop - scrollContainer.offsetTop;
      return scrollPosition
    },
    // 省市县
    loadOptions(node, resolve) {
      const { level } = node;
      console.log(level,'levellevellevellevel')
      // 模拟异步加载数据
      setTimeout(() => {
        if(level == 0)
        {
          this.provinces = []
          this.initlocation.currentProvinces.forEach(item =>{
            this.provinces.push({value: item.code,label: item.name,leaf: false})
          })
        }
        if(level == 1)
        {
          let location = new ChinaLocation(chinalist);
          location.changeProvince(node.value);
          let children = []
          location.currentCities.forEach(item =>{
            children.push({value: item.code,label: item.name,leaf: false})
          })
          resolve(children)
        }
        if(level == 2)
        {
          let location = new ChinaLocation(chinalist);
          location.changeProvince(node.parent.value);
          location.changeCity(node.value);
          let children = []
          location.currentDistricts.forEach(item =>{
            children.push({value: item.code,label: item.name,leaf: true})
          })
          resolve(children)
        }
      }, 100);
    },
    // 获取详情
    getCaseInfoById() {
      api.getCaseInfoById(this.caseId).then(res => {
        if (!res.code) {
          this.debtorEntityList = res.debtorEntityList
        }
        this.getdebtorProfile()
      })
    },
    // 标签列表
    getdebtorProfile(){
      api.debtorProfile_labels({}).then(res => {
        if (!res.code) {
            this.debtorProlabels = res;
          }
      })
      // 查询当前债务人画像
      let debtorId = ''
      let debtors = this.debtorEntityList.find(item =>{ return item.role == 'DEBTOR'})
      if(debtors != undefined)
      {
        debtorId = debtors.id
        this.portraitObj.debtorId = debtorId
      }
       
      this.getByDebtorId()
    },
    // 获取人物画像列表
    getByDebtorId(){
      api.debtorProfile_getByDebtorId(this.portraitObj.debtorId).then(res => {
        if (!res.code) {
            //  residencePlaceDes
            this.portraitInfo = res;
            this.portraitObj = res
          }
      })
    },
    // 自动修改人物画像标签
    handleSubmit() {
      // console.log(this.portraitObj,'this.mrObj')
      if(this.portraitObj.id){
        api.debtorProfile_edit(this.portraitObj).then(res => {
          // this.getdebtorProfile()
        })
      }
    }
  }
};
</script>

<style scoped lang="scss">
.portraitPerson{
  .right-wrap-left-title{
          width: 100%;
          line-height: 47px;
          border-bottom: 1px solid var(--fill-3, #E5E6EB);
          background-color: #F7F8FA;
        }
        .right-wrap-left-tab{
          width: 48px;
          background-color: #F7F8FA;
          .left-tab-icon{
            width: 100%;
            height: 40px;
            .tabs-svg{
              width: 24px;
              height: 24px;
            }
          }
          .active {
            background-color: #ffffff;
          }
        }
        .right-wrap-left-content{
          width: 318px;
          background-color: #FFFFFF;

          .hx-1-content{
            .personghximg{
              background: url('~@/assets/image/Vector.png') no-repeat;
              height: 100%;
              display: block;
              background-size: 80% auto;
              background-position: top;
            }
            .personghximgw{
              background: url('~@/assets/image/VectorWoman.png') no-repeat;
              height: 100%;
              display: block;
              background-size: 67% auto;
              background-position: top;
            }
            .character-info{
              width: calc(50% - 5px);
              // border: 1px solid;
              padding: 4px;
              color: #4E5969;
              .character-info-title{
                line-height: 20px;
                font-size: 12px;
              }
              .character-info-details{
                margin-bottom: 2px;
                font-size: 10px;
                .character-info-details-label{
                  width: 40%;
                  text-align: right;
                  line-height: 16px;
                  padding-right: 4px;
                }
                .character-info-details-text{
                  width: 60%;
                  text-align: left;
                  line-height: 16px;
                  padding-left: 4px;
                }
              }
            }

            // position_info position_family position_carry position_finance position_risk position_lawsuit
            .position_info{position:absolute; top: 110px;top: 15%;left: 8px;}
            .position_family{position:absolute; top: 300px;top: 38%;left: 8px;}
            .position_carry{position:absolute; top: 400px;top: 52%;left: 8px;}

            .position_finance{position:absolute; top: 160px;top: 25%;left: 160px;}
            .position_risk{position:absolute; top: 350px;top: 52%;left: 160px;}
            .position_lawsuit{position:absolute; top: 460px;top: 65%;left: 160px;}

            .theme-blue{
              .character-info-title{
                color: #4787F0;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #BBD3FB;
                }
                .character-info-details-text{
                  background-color: #165DFFB2;
                  color: #fff;
                }
              }
            }
            // 
            .theme-green{
              .character-info-title{
                color: #00A870;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #00B42A33;
                }
                .character-info-details-text{
                  background-color: #00B42AB2;
                  color: #fff;
                }
              }
            }

            .theme-pink{
              .character-info-title{
                color: #F36DA0;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #F36DA033;
                }
                .character-info-details-text{
                  background-color: #F36DA0B2;
                  color: #fff;
                }
              }
            }

            .theme-yellow{
              .character-info-title{
                color: #ED7B2F;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #ED7B2F33;
                }
                .character-info-details-text{
                  background-color: #ED7B2FB2;
                  color: #fff;
                }
              }
            }

            .theme-pink2{
              .character-info-title{
                color: #F36D78;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #F36D7833;
                }
                .character-info-details-text{
                  background-color: #F36D78B2;
                  color: #fff;
                }
              }
            }

            .theme-purple{
              .character-info-title{
                color: #936DF3;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #936DF333;
                }
                .character-info-details-text{
                  background-color: #936DF3B2;
                  color: #fff;
                }
              }
            }


          }

          .portrait-marker{
            /* 方法1 */
            .dot {
              margin-left: 5px;
              position: relative;
              padding-left: 10px; /* 调整圆点与文本之间的距离 */
            }
            
            .dot::before {
              content: "";
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background-color: #000; /* 圆点的颜色 */
            }

            .person-info{
              color: #86909C;
              border:solid 1px #E5E6EB;
              border-radius: 8px;
              padding: 10px;
              span{
                padding: 5px 10px;
              }
              span:nth-child(even) {
                background-color: #F7F8FA;
              }
            }
            .box-list{
              span{
                border:solid 1px #E5E6EB;
                border-radius: 3px;
                padding: 5px 10px;
                display: inline-block;
                margin-top: 10px;
                margin-right: 10px;
                cursor: pointer;
              }
              span.active{
                color: #BC6F60;
                border: solid 1px #BC6F60;
              }
            }
          }
        }
}
</style>
<style  lang="scss">
.portraitPerson{
  .el-scrollbar__view{height: 100%;}
}
</style>