<template>
  <div class="layout-content-wrap case-detail">
    <div class="navigation-bar flex-row mb-16">
      <img src="../../../assets/image/Link.png" height="22" alt="">
      <a>/</a>
      <a>案件包列表</a><a>/</a>
      <a>案件列表</a><a>/</a>
      <a>案件详情</a>
    </div>
    <div
        class="layout-tabs-content-box case-detail-nav flex-row background-color-fff border-radius-4 mb-16 flex-row-center">
      <span :class="navactive == 1 ?'active':''" @click="navactive=1">案件信息</span>
      <span :class="navactive == 2 ?'active':''" @click="navactive=2">案件材料</span>
      <span :class="navactive == 3 ?'active':''" @click="navactive=3">案件日志</span>
    </div>
    <div v-if="navactive == 1 " class="layout-tabs-content-box flex-row padding-0  f14">
      <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-16"
           style="width: calc(100% - 370px);">
        <div class="case-detail-title f18">被申请人：<a v-for="(item,index) in baseInfo.debtorEntityList.filter(item => item.role == 'DEBTOR' && item.type == '本人')"
                                                       :key="index">{{ index == 0 ? '' : ',' }}{{ item.name }}</a></div>
        <div class="flex-column">
          <div class="case-detail-label f-weight500 f16">基本信息</div>
          <div class="case-detail-des">
            <span><a>案件包名称：</a><a>{{baseInfo.casePkg.pkgName}}</a></span>
            <span><a>金融产品名称：</a><a>{{ baseInfo.productTypeId }}</a></span>
            <span><a>金融机构名称：</a><a>{{ baseInfo.financialOrgName }}</a></span>
            <span><a>委案开始日期：</a><a>{{ baseInfo.casePkg.planStartTime | formaDate('yyyy-MM-dd') }}</a></span>
            <span><a>委案到期日期：</a><a>{{ baseInfo.casePkg.planEndTime | formaDate('yyyy-MM-dd')}}</a></span>

            <span><a>案件编号：</a><a>{{ baseInfo.caseNo }}</a></span>
            <span><a>合同名称：</a><a>{{baseInfo.fields.find(item => item.fieldKey == 'contactName').fieldValue}}</a></span>
            <span><a>被申请人姓名：</a><a>{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name}}</a></span>
            <span><a>被申请人手机号码：</a><a>{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').phone}}</a></span>
            

          </div>
          <div class="case-detail-label f-weight500 f16">债务信息</div>
          <div class="case-detail-des">
            <span><a>当前逾期金额：</a><a>{{baseInfo.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</a></span>
            <span v-for="(item,index) in baseInfo.fields.filter(item => item.fieldGroup == 'DEBTINFO')" 
            :key="index"><a>{{item.name}}：</a><a>{{ item.fieldValue }}</a></span>
          </div>
          <div class="case-detail-label f-weight500 f16">申请人代理人信息</div>
          <div class="case-detail-des flex-column">
            <div v-for="(item,index) in baseInfo.debtorEntityList.filter(item => item.role == 'AGENT' )"
              :key="index">
              <span><a>姓名：</a><a>{{item.name}}</a></span>
              <span><a>代理人类型：</a><a>{{item.type}}</a></span>
              <span><a>联系人手机：</a><a>{{item.phone}}</a></span>
            </div>
          </div>
          <div class="case-detail-label f-weight500 f16">联系人信息</div>
          <div class="case-detail-des flex-column">
            <div v-for="(item, index) in contactPersonList" :key="index">
              <span><a>姓名：</a><a>{{item.name}}</a></span>
              <span><a>与债务人关系：</a><a>{{item.type}}</a></span>
              <span><a>联系人手机：</a><a>{{item.phone}}</a></span>
            </div>
          </div>

          <div v-if="baseInfo.jointDebt == 1" class="case-detail-label f-weight500 f16">
            共债信息
            <span style="font-weight:400;font-size: 14px;">
              (当前债务人名下共有{{coobligationInfo.caseNum}}笔债务，
              逾期总金额：<a class="color-F53F3F" style="margin-left: 0px;">{{coobligationInfo.totalAmount}}</a>元，
              最低还款总金额：<a class="color-F53F3F" style="margin-left: 0px;">{{coobligationInfo.minTotalAmount}}</a>元)
            </span>
          </div>
          
          <div>
            <div class="case-detail-des flex-column" v-for="(item,index) in coobligationInfo.caseList" :key="index">
                <span><a>案件包名称：</a><a>{{item.casePkg}}</a></span>
                <span><a>金融产品名称：</a><a>{{item.productTypeId}}</a></span>
                <span><a>金融机构名称：</a><a>{{item.financialOrgName}}</a></span>
                <span><a>案件编号：</a><a>{{item.caseNo}}</a></span>
                <span><a>合同名称：</a><a>{{item.fields.find(item => item.fieldKey == 'contactName').fieldValue}}</a></span>
                <span><a>当前逾期金额：</a><a>{{item.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</a></span>
                <span><a>最低还款金额：</a><a>{{item.fields.find(item => item.fieldKey == 'limitLine').fieldValue}}</a></span>
            </div>
            <!-- <div class="case-detail-des flex-column">
                <span><a>姓名：</a><a></a></span>
                <span><a>与债务人关系：</a><a></a></span>
                <span><a>联系人手机：</a><a></a></span>
            </div> -->
          </div>

          <div class="case-detail-label f-weight500 f16">案件办理信息</div>
          <div>
            <el-tabs type="border-card">
              <el-tab-pane>
                <span slot="label">调解记录</span>
                <el-table :data="communicationRecord" :height="300">
                  <el-table-column type="index" label="序号" width="55"></el-table-column>
                  <el-table-column label="调解类型" width="120">
                    <template slot-scope="scope">
                      {{scope.row.linkedWay == 1 ?'电话':''}}
                      {{scope.row.linkedWay == 2 ?'视频':''}}
                      {{scope.row.linkedWay == 3 ?'微信':''}}
                    </template>
                  </el-table-column>
                  <el-table-column label="跟进情况" width="140">
                    <template slot-scope="scope">
                      {{scope.row.linkedSituation != null ? $util.getTelephoneTypeData(scope.row.linkedSituation).label :''}}
                      <!-- {{$util.getTelephoneTypeData(scope.row.linkedSituation).label}} -->
                    </template>
                  </el-table-column>
                  <el-table-column label="调解进度" width="140">
                    <template slot-scope="scope">
                      {{scope.row.mediateStatus != null ? materialTypeOptions.find(item => item.value == scope.row.mediateStatus).label : ''}}
                      <!-- {{ materialTypeOptions.find(item => item.value == scope.row.mediateStatus).label }} -->
                    </template>
                  </el-table-column>
                  <el-table-column label="沟通对象" width="350" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span class="pr-8" v-for="(itemperson,index) in scope.row.linkedPersonInfo" :key="index">
                          {{index >0 ?';':''}}
                          {{ itemperson.name}} - {{itemperson.type}} 
                          {{ scope.row.linkedWay == 1 ? '-' + itemperson.phone :''}}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="communicationRemarks" label="备注" show-overflow-tooltip></el-table-column>
                  <!-- <el-table-column prop="E" label="预约回款情况" show-overflow-tooltip></el-table-column> -->
                  <el-table-column prop="mediator" label="添加人" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="createAt" label="添加时间" show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                      <div class="flex-row align-items-center">
                        <div class="text-center cursor-pointer" v-for="(item,index) in scope.row.files" :key="index" @click="handleCaseShowFile(item)">
                          查看文件 {{index > 0 ? index : ''}}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label"><i v-if="repaymentObj.type != undefined" class="el-icon-s-flag"></i> 还款计划</span>

                <div class="case-repayment-des flex-column mb-16 p-16 border-radius-8" style="min-height: 200px;">
                  <div v-if="repaymentObj.type != undefined" class="flex-column justify-content-between">
                    <el-form ref="ruleFormRepayment"
                             label-width="130px">
                      <el-form-item label="还款方式" prop="type">
                        <el-select v-model="repaymentObj.type" class="width100" disabled
                                   placeholder="请选择还款方式" size="small">
                          <el-option
                              v-for="(item,index) in RepaymentOptions"
                              :key="index"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="还款金额" prop="totalAmount">
                        <el-input class="inputpaddingtop2" disabled
                                  size="small"
                                  placeholder="请输入还款金额"
                                  v-model="repaymentObj.totalAmount"
                                  @input="inputChange($event)">
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                      <!-- 枚举备注: ALL :一次性全部回款 STAGES :全部分期 MIX :混合，部分先还加分期 OTHER :其他 -->
                      <el-form-item v-if="repaymentObj.type == 'MIX'" label="分期前偿还金额" prop="partAmount">
                        <el-input class="inputpaddingtop2" disabled
                                  size="small"
                                  placeholder="请输入分期前偿还金额"
                                  v-model="repaymentObj.partAmount"
                                  @input="inputChange($event)">
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item v-if="repaymentObj.type == 'MIX'" label="先还日期" prop="partDate">
                        <el-date-picker class="width100" size="small" disabled
                                        v-model="repaymentObj.partDate"
                                        type="date"
                                        placeholder="选择先还日期"
                                        value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd">
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item v-if="repaymentObj.type == 'MIX'" label="分期部分金额" prop="productTypeId">
                        <el-input class="inputpaddingtop2"
                                  size="small"
                                  disabled
                                  placeholder="分期部分金额"
                                  v-model="repaymentObj.moneyAmount">
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'" label="分期期数"
                                    prop="stagesNum">
                        <el-input
                            size="small" disabled
                            placeholder="请输入分期期数"
                            v-model="repaymentObj.stagesNum"
                            @input="inputChange($event)">
                        </el-input>
                      </el-form-item>
                      <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'"
                                    label="每期还款金额" prop="stagesAmount">
                        <el-input class="inputpaddingtop2"
                                  size="small"
                                  disabled
                                  placeholder="每期还款金额"
                                  v-model="repaymentObj.stagesAmount">
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item v-if="repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'"
                                    label="每期还款日期" prop="stagesDay">
                        <el-select v-model="repaymentObj.stagesDay" class="width100" disabled
                                   placeholder="请选择每期还款日期" size="small">
                          <el-option
                              v-for="(item, index) in 31"
                              :key="index"
                              :label="(index+1)+'日'"
                              :value="(index+1)">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                          v-if="repaymentObj.type == 'ALL' || repaymentObj.type == 'STAGES' || repaymentObj.type == 'MIX'"
                          label="还款截止日期" prop="paybackDate">
                        <el-date-picker class="width100" size="small" disabled
                                        v-model="repaymentObj.paybackDate"
                                        type="date"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd"
                                        format="yyyy-MM-dd">
                        </el-date-picker>
                      </el-form-item>
                      <el-form-item label="备注说明" prop="remark">
                        <el-input disabled
                                  size="small"
                                  clearable
                                  placeholder="请输入备注说明"
                                  v-model="repaymentObj.remark">
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>

              </el-tab-pane>
              <el-tab-pane>
                <span slot="label"><i v-if="ProofList.length > 0" class="el-icon-s-flag"></i> 还款凭证</span>
                <span
                    class="f16">计划还款金额：{{ ProofStatistics.total || 0 }}元，已还金额：{{ ProofStatistics.payback || 0 }}元</span>
                <el-table :data="ProofList" :height="300">
                  <el-table-column type="index" label="序号" width="55"></el-table-column>
                  <el-table-column label="凭证时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{ scope.row.paybackTime | formaDate('yyyy-MM-dd')}}
                    </template>
                  </el-table-column>

                  <el-table-column prop="amount" label="凭证金额" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="uploaderName" label="上传者" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="createAt" label="上传时间" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="remark" label="备注信息" show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" width="170">
                    <template slot-scope="scope">
                      <div class="flex-row align-items-center">
                        <el-button size="mini" @click="handleCaseShow(scope)">查看</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!-- table -->
      <div class="flex-column" style="width: 350px; margin-left: 20px;">
        <div class="background-color-fff border-radius-4 p-16 flex-column">
          <div class="case-detail-right-label f-weight500 f16">个人调解备注</div>
          <div class="case-detail-right-des">
            <!-- <span>孟利于2024-12-04 10:04:04备注</span> -->
            <el-input class="mt-8" type="textarea" v-model="baseInfo.mediateRemark" :rows="4" disabled></el-input>
          </div>
          <div class="case-detail-label f-weight500 f16">质检评语</div>
          <div class="case-detail-right-des">
            <el-input class="mt-8" type="textarea" v-model="Qualitydesc" :rows="4" disabled></el-input>

          </div>
        </div>
        <div class="background-color-fff border-radius-4 p-16 flex-column mt-16">
          <div class="flex-column item-trace">
            <div class="flex-row justify-content-between case-pk-title">
              <span>案件事项追踪</span>
            </div>
            <div class="case-pk-cont">
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'1',title:'短信发送记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>短信发送追踪</span><span></span>
              </div>
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'2',title:'电话呼叫记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>电话呼叫追踪</span><span></span>
              </div>
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'3',title:'视频调解记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>视频调解追踪</span><span></span>
              </div>
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'4',title:'文书生成记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>文书生成追踪</span><span></span>
              </div>
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'5',title:'文书签字记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>文书签字追踪</span><span></span>
              </div>
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'6',title:'文书送达记录',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>文书送达追踪</span><span></span>
              </div>
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'7',title:'还款计划',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>还款计划追踪</span><span></span>
              </div>
              <div class="flex-row justify-content-between cursor-pointer"
                   @click="CaseTraceDialog = {activeName:'8',title:'还款凭证',caseNo:baseInfo.caseNo,caseId:baseInfo.id}">
                <span>还款凭证追踪</span><span></span>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
    <div v-if="navactive == 2 " class="layout-tabs-content-box flex-row padding-0  f14">
      <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-16 width100">
        <div class="flex-column">
          <div class="case-detail-label f-weight500 f16">案件材料<a @click="caseFileVisible={caseId:caseId}"><i class="el-icon-plus"></i>上传材料</a></div>
          <div class="case-detail-des">
            <el-table :data="fileList" :height="300">
              <el-table-column type="index" label="序号" width="55"></el-table-column>
              <el-table-column prop="materialType" label="材料类型" show-overflow-tooltip></el-table-column>
              <el-table-column prop="name" label="文件名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createBy" label="上传人" show-overflow-tooltip></el-table-column>
              <el-table-column label="上传时间" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{scope.row.createAt !=null ? scope.row.createAt:''}}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="170">
                <template slot-scope="scope">
                  <div class="flex-row align-items-center">
                    <el-button size="mini" @click="handleCaseDelete(scope)">删除</el-button>
                    <el-button size="mini" @click="handleCaseShow(scope,fileList)">查看</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="case-detail-label f-weight500 f16">案件文书</div>
          <div class="case-detail-des">
            <el-table :data="OfficeList" :height="300">
              <el-table-column type="index" label="序号" width="55"></el-table-column>
              <el-table-column prop="documentType.desc" label="文书类型" show-overflow-tooltip></el-table-column>
              <el-table-column prop="fileName" label="文书名称" show-overflow-tooltip></el-table-column>
              <el-table-column label="是否签章" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="flex-row align-items-center">
                    <span>{{ scope.row.sealStatus == null ? '否':'是' }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="是否完成签字" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="flex-row align-items-center">
                    <span>{{ scope.row.signStatus == 2 ? '是':'否' }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="签字人" width="230">
                <template slot-scope="scope">
                  <div class="flex-row align-items-center">
                    <span v-for="(item, index) in scope.row.signList" :key="index">{{ item.signed }}</span>
                    <span v-for="(item, index) in scope.row.unsignList" :key="index">{{ item.unsigned }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="handleBy" label="操作人" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作时间" show-overflow-tooltip >
                  <template slot-scope="scope">
                      <span >{{ scope.row.handleTime | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
                  </template>
              </el-table-column>
              
              <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                  <div class="flex-row align-items-center">
                    <el-button v-if="scope.row.documentStaus.code == 2" size="mini" @click="handleCaseOfficeShow(scope)">查看</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div v-if="navactive == 3 " class="layout-tabs-content-box flex-row padding-0  f14">
      <div class="pt-8 border-b-solid-lighter-1 background-color-fff border-radius-4 p-32 width100">
        <el-timeline>
          <el-timeline-item v-for="(item,index) in communicationLogRecord" :key="index" :timestamp="item.processDate" placement="top">
            <el-card>
              <p v-for="(item,index) in item.processList" :key="index">{{ item.createAt | formaDate("hh:mm:ss") }} {{item.processContent}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <!-- 各种案件追踪记录 -->
    <CaseTraceDialog v-if="CaseTraceDialog" :eventTraDialog.sync="CaseTraceDialog"/>
    <!-- 文件预览 -->
    <showFile v-if="fileDialog" :fileDialog.sync="fileDialog"/>
    <!-- 案件材料上传 -->
    <caseFileDialog v-if="caseFileVisible" :eventDialog.sync="caseFileVisible"/>
  </div>
</template>
<script>
import api from "@/services/caseManagement";
import contactPerson from "@/services/contactPerson";
import cmapi from "@/services/caseMaterial";
import { forEach } from "lodash";

// import {stubString} from "lodash";
// import {subtract} from "lodash";

export default {
  components: {
    showFile: () => import('../../../components/showFile.vue'),//
    CaseTraceDialog: () => import('../components/CaseTraceDialog.vue'),//各种案件追踪记录

    caseFileDialog: () => import('../../mediation-page/components/caseFileDialog'),//案件材料上传
  },
  data() {
    return {
      materialTypeOptions: this.$util.getMediationprogress(),
      caseFileVisible:null,
      CaseTraceDialog: null,
      fileDialog: null,
      eventTraDialog: null,
      navactive: 1,
      Qualitydesc: '',
      tableData: [{
        H: '电话调解',
        A: '一次性全部还款',
        B: '承诺账户',
        C: '钟华丽-本人-188****2929',
        D: 'CS',
        E: '回款金额:14289.86,回款时间:2024-12-05',
        F: '2024-12-05 09:13:29',
        G: '孟利'
      }],
      tableData1: [{A: '一次性全部回款', B: '14,289.86元', C: '2024-12-05', D: '无', E: '', F: '', G: '', H: ''}],
      tableData2: [{
        A: '2024-12-05 00:00:00',
        B: '14,289.86元',
        C: '孟利',
        D: '2024-12-05 14:13:56',
        E: '',
        F: '',
        G: '',
        H: ''
      }],
      caseId: '',
      baseInfo: {},
      fileList: [],
      fileType: [{label: '身份证件', value: 1}, {label: '金融许可证', value: 2}, {
        label: '营业执照',
        value: 3
      }, {label: '法定代表人身份证明', value: 4},
        {label: '起诉状', value: 5}, {label: '证据清单', value: 6}, {label: '合约', value: 7}, {
          label: '申领表',
          value: 8
        }, {label: '交易明细', value: 9}
        , {label: '其他证据', value: 10}],
      contactPersonList: [],
      // 还款计划
      repaymentObj: {},
      RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
        label: '全部分期',
        value: 'STAGES'
      }, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
      // 还款凭证
      ProofList: [],
      ProofStatistics: {
        total: 0,
        payback: 0
      },
      // 文书列表
      OfficeList:[],
      communicationRecord: [],
      communicationLogRecord:[],
      coobligationInfo:{},
    }
  },
  computed: {
    // 获取抽屉drawer的内容高度
    drawerContentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 200
    }

  },
  async created() {

    if (this.$route.query.caseId != undefined) {
      this.caseId = this.$route.query.caseId;
      this.getCaseInfoById();//获取详情
      this.getmediate_record()
      this.getCaseLogsList()
    }
  },
  methods: {
    getfileType(row) {

      let item = this.fileType.find(item => {
        return item.code === row.materialType
      })
      if (item != undefined) return item.label
      return '-'
    },
    // 删除证据材料
    handleCaseDelete(scope){
      this.$confirm("请确定是否删除这些数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        cmapi.deleteCaseFileById({id:scope.row.id}).then((res) => {
            this.$message.success("成功");
            this.getFileCaseList()
            
        });
      }).catch(() => {});
    },
    handleCaseShow(scope, filelist) {
      if (filelist == undefined) {
        //还款凭证相关
        this.$fetchApi.viewFullFile({path: scope.row.proofUrl}).then((res) => {
          this.fileDialog = {showfile: {url: scope.row.proofUrl,fullUrl: res}, filelist: []}
        });
        
      } else {
        // this.fileDialog = {showfile: {url: scope.row.url}, filelist: []}
        this.fileDialog = {showfile: scope.row, filelist: filelist}
      }
    },
    handleCaseOfficeShow(scope) {
      this.fileDialog = {showfile: {url: scope.row.fullUrl}, filelist: []}
    },
    debtorEntityCardNo(datalist, len) {
      let datacardno = ''
      let dataphone = ''
      if(datalist!=undefined)
      {
        datalist.forEach((item, index) => {
          if (index == 0) {
            datacardno = item.cardNo
            dataphone = item.phone
          } else {
            datacardno += ',' + item.cardNo
            dataphone += ',' + item.phone
          }
        })

        return {cardNo: datacardno.substring(0, len), phone: dataphone.substring(0, len)};
      }
      else
      {
        return ''
      }
      
    },
    // 获取详情
    getCaseInfoById() {
      api.getCaseInfoById(this.caseId).then(res => {
        if (!res.code) {
          this.baseInfo = res

          if(res.jointDebt == 1){
            // 有共债 mainCaseId
            this.caseId = res.mainCaseId.toString()
          } else {
            this.caseId = res.id.toString()
          }
        }

      })
      this.getCoobligation()
      this.getFileCaseList()
      this.getLitigantByCaseId()
      this.getplanlist()
      this.getProofList()
      this.getWritCaseList()
      
    },

    // 共债数据
    getCoobligation() {
      api.mediate_coobligation_list({id:this.caseId}).then(res => {
        if (!res.code) {
          this.coobligationInfo = res
        }
      })
    },

    // 获取证据材料
    getFileCaseList() {
      cmapi.getCaseFileList({caseId:this.caseId}).then(res => {
        if (!res.code) {
          this.fileList = res.records
          
          _that.fileList = res.caseFileEntityList

        }
      })
    },
    getLitigantByCaseId() {
      let dataJson = {
        size: 9999,
        current: 1,
        caseId: this.caseId
      }
      contactPerson.debtorPage(dataJson).then(res => {
        if (!res.code) {
          // console.log(res, '---getLitigantByCaseId')
          this.contactPersonList = res.records;
        }
      })
    },
    // 获取调解记录
    getmediate_record() {
      api.mediate_record_list({caseId:this.caseId,linkedWay:''}).then(res => {
        if (!res.code) {
          res.forEach(item =>{
            item.records.forEach(item =>{
              this.communicationRecord.push(item)
            })
          })
          console.log(this.communicationRecord,'this.communicationRecord')
          // this.communicationRecord = res
        }
      })
    },
    handleCaseShowFile(item) {
      //还款凭证相关
      this.$fetchApi.viewFullFile({path: item}).then((res) => {
        this.fileDialog = {showfile: {url: item,fullUrl: res}, filelist: []}
      });
    },
    // 还款计划
    getplanlist() {
      console.log(111, {caseId: this.caseId})
      api.getcase_payback_planlist({caseId: this.caseId}).then(res => {
        if (!res.code) {
          if (res.length > 0) {
            this.repaymentObj = res[0]
          }
        }
      })
    },
    // 还款凭证
    getProofList() {
      this.ProofList = []
      api.gettraceProof_list({caseId: this.caseId}).then(res => {
        if (!res.code) {
          res.forEach(item =>{
            if(item.status.code == 2){ this.ProofList.push(item)}
          })
        }
      })
      api.gettraceProof_statistics({caseId: this.caseId}).then(res => {
        if (!res.code) {
          // console.log(res, '---ProofStatistics')
          this.ProofStatistics = res
        }
      })


    },
    // 输入还款金额 输入分期期数
    inputChange() {
      if (this.repaymentObj.type == 'STAGES') {
        if (this.repaymentObj.totalAmount != '' && this.repaymentObj.stagesNum != '' && this.repaymentObj.totalAmount != undefined && this.repaymentObj.stagesNum != undefined) {
          this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount * 1) / (this.repaymentObj.stagesNum * 1)).toFixed(2)
        }
      }

      if (this.repaymentObj.type == 'MIX') {
        if (this.repaymentObj.totalAmount != '' && this.repaymentObj.stagesNum != '' && this.repaymentObj.totalAmount != undefined && this.repaymentObj.stagesNum != undefined) {
          this.repaymentObj.stagesAmount = ((this.repaymentObj.totalAmount * 1 - this.repaymentObj.partAmount * 1) / (this.repaymentObj.stagesNum * 1)).toFixed(2)
        }
      }
    },
    // 文书列表数据
    getWritCaseList() {
      let dataJson = {
        id: this.caseId
      }
      api.getCaseGenerateList(dataJson).then(res => {
        if (!res.code) {
          this.OfficeList = res;
        }
      })
    },
    // 获取调解日志
    getCaseLogsList() {
      api.mediate_record_log({id:this.caseId}).then(res => {
        if (!res.code) {
          this.communicationLogRecord = res
        }
      })
    },
  }

}
</script>
<style scoped lang="scss">
.case-detail {
  .case-detail-nav {
    span {
      width: 100px;
      font-size: 18px;
      color: #86909C;
      cursor: pointer;
    }

    span:hover {
      color: #C66A5B;
    }

    span.active {
      color: #C66A5B;
    }
  }

  .case-detail-title {
    border-bottom: solid 2px #C66A5B99;
  }

  .case-detail-label {
    margin: 15px 0;

    a {
      font-size: 14px;
      color: #C66A5B;
      font-weight: 400;
      cursor: pointer;
      margin-left: 20px;
    }
  }

  .case-detail-des {
    background-color: #F7F8FA;
    padding: 10px 15px;
    color: #86909C;

    span {
      width: 25%;
      display: inline-block;
      margin: 5px 0;
    }

    span a:first-child {
      width: 160px;
      display: inline-block;
    }

    span a:last-child {
      color: #1D2129;
    }

    .el-form-item {
      margin-bottom: 2px;
    }

    .inputpaddingtop2 {
      padding-top: 3px
    }

  }

  .case-repayment-des {
    padding: 10px 15px;
    color: #86909C;

    .el-form-item {
      margin-bottom: 2px;
    }

    .inputpaddingtop2 {
      padding-top: 3px
    }
  }

  .case-detail-right-label {
    margin: 0px 0 15px 0;
  }

  .case-detail-right-des {
    background-color: #F7F8FA;
    padding: 10px;
  }

  .item-trace {
    border-radius: 8px;

    .case-pk-title {
      span:first-child {
        font-size: 18px;
        color: #1D2129;
        font-weight: 500;
      }
    }

    .case-pk-cont {
      padding: 10px 0 0px 0;
      position: relative;

      .resultplan {
        font-size: 32px;
        position: absolute;
        left: 115px;
        top: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 165px;
        text-align: center;
      }

      div {
        margin-top: 5px;
        margin-bottom: 10px;
        color: #4E5969;
        background-color: #F7F8FA;
        padding: 12px;
        border-radius: 2px;

        a {
          font-weight: 600;
        }

        a:first-child {
          color: #E8535A;
        }
      }
    }
  }
}

.el-badge {
  top: 3px;
}


</style>
<style lang="scss">
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #C66A5B;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  color: #C66A5B !important;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item i {
  color: red !important;
}
</style>
