<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="XXX"
              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 personghximg">
                <!-- 基本信息  -->
                <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">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</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">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</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">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</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">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</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">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</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">陈继平</div>
                  </div>
                  <div class="character-info-details flex-row">
                    <div class="character-info-details-label">姓名</div>
                    <div class="character-info-details-text">陈继平</div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="portrait-marker" v-if="rightActive != 1">
            <el-scrollbar :style="'height:'+`${portraitcontentHeight}`+'px'">
              <div class="flex-column p-16">
                  <div class="f18">基本信息</div>
                  <div class="f16 mt-16"><a class="dot"></a>身份信息</div>
                  <div class="person-info flex-column mt-16">
                    <span>姓名：<a class="color-000">XXXXX</a></span>
                    <span>性别：<a class="color-000">XXXXX</a></span>
                    <span>年龄：<a class="color-000">XXXXX</a></span>
                    <span>手机号码：<a class="color-000">XXXXX</a></span>
                    <span>身份证号：<a class="color-000">XXXXX</a></span>
                  </div>
                  <div 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" v-model="portraitInfo.value1" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
                    </span>
                    <span class="mt-8">
                      <el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
                    </span>
                    <span class="mt-8">常住地址：</span>
                    <span class="mt-8">
                      <el-cascader size="small" v-model="portraitInfo.value2" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }"></el-cascader>
                    </span>
                    <span class="mt-8">
                      <el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
                    </span>
                    <span class="mt-8">工作地点：</span>
                    <span class="mt-8">
                      <el-cascader size="small" v-model="portraitInfo.value3" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
                    </span>
                    <span class="mt-8">
                      <el-input size="small" v-model="portraitInfo.input" placeholder="请输入详细地址"></el-input>
                    </span>
                  </div>
                  <div class="f18 mt-16">经济状况</div>
                  <div class="f16 mt-16"><a class="dot"></a>经济收入</div>
                  <div class="box-list">
                    <span>收入0-5K</span>
                    <span>收入5-10K</span>
                    <span>收入10K以上</span>
                    <span>无收入</span>
                  </div>
                  <div class="f16 mt-16"><a class="dot"></a>雇佣状态</div>
                  <div class="box-list">
                    <span>待业</span>
                    <span>零工</span>
                    <span>稳定工作</span>
                    <span>个体户</span>
                    <span>小微企业</span>
                    <span>企业法人</span>
                  </div>
                  <div 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 class="f16 mt-16"><a class="dot"></a>财产情况</div>
                  <div class="box-list">
                    <span>有房</span>
                    <span>有车</span>
                    <span>存款</span>
                    <span>投资</span>
                    <span>小微企业</span>
                    <span>企业法人</span>
                  </div>
                  <div class="f16 mt-16"><a class="dot"></a>负债情况</div>
                  <div class="box-list">
                    <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 class="f16 mt-16"><a class="dot"></a>婚姻状况</div>
                  <div class="box-list">
                    <span>未婚</span>
                    <span>已婚</span>
                    <span>离婚</span>
                  </div>
                  <div class="f16 mt-16"><a class="dot"></a>家庭成员</div>
                  <div class="box-list">
                    <span>无子女</span>
                    <span>有子女</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>收入匹配消费</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 class="f16 mt-16"><a class="dot"></a>还款行为</div>
                  <div class="box-list">
                    <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>低风险</span>
                    <span>中风险</span>
                    <span>高风险</span>
                  </div>
                  <div class="f16 mt-16"><a class="dot"></a>建议措施</div>
                  <div class="box-list">
                    <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:{},
      initlocation: null,
      provinces: [],
      rightActive: 1,
      debtorProfiles:[],
    };
  },
  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 
    },
  },
  mounted() {
    this.initlocation = new ChinaLocation(chinalist);
    this.getCaseInfoById()
    
  },
  methods: {
    loadOptions(node, resolve) {
      const { level } = node;
      // 模拟异步加载数据
      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() {
      let _that = this
      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.debtorProfiles = res;
          }
      })
      // 查询当前债务人画像
      let debtorId = ''
      let debtors = this.debtorEntityList.find(item =>{ return item.role == 'DEBTOR'})
      if(debtors != undefined)
      {
        debtorId = debtors.id
      }
       
      api.debtorProfile_getByDebtorId(debtorId).then(res => {
        if (!res.code) {
            // this.debtorProfiles = res;
          }
      })

    },
    
    handleSubmit() {
      if(!this.$clickThrottle()) { return }//防止重复点击
      console.log(this.mrObj,'this.mrObj')
      // caseMaterial.addCaseFile(this.repaymentObj).then(res => {
      //       this.$parent.getFileCaseList()
      //       this.handleClose()
      //       this.$message.success("操作成功");
      //     })

    }
  }
};
</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: auto 100%;
              background-position: center;
            }
            .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;left: 8px;}
            .position_family{position:absolute; top: 300px;left: 8px;}
            .position_carry{position:absolute; top: 400px;left: 8px;}

            .position_finance{position:absolute; top: 160px;left: 160px;}
            .position_risk{position:absolute; top: 350px;left: 160px;}
            .position_lawsuit{position:absolute; top: 460px;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;
              }
            }
          }
        }
}
</style>
<style  lang="scss">
.portraitPerson{
  .el-scrollbar__view{height: 100%;}
}
</style>