<template>
  <div style=" height: 100%;">
    <div class="layout-center-wrap flex-column">
      <!-- 上部数据 -->
      <div class="layout-center-top-wrap flex-row justify-content-between">
        <div class="top-wrap-title flex-row justify-content-between"></div>
        <div class="top-wrap-btn-left flex-row justify-content-between">
          <div class="flex-row justify-content-between align-items-center">
            <el-button class="bg-F2F3F5" icon="el-icon-arrow-left" circle></el-button>
            <div class="ml-16 mr-16 flex-row justify-content-between align-items-center">
              <div class="mr-8 f16">程机票</div>
              <div class="mr-8">
                <el-tag size="small" type="warning">四川成都</el-tag>
              </div>
              <div class="mr-8 f16 color-FF7D00"><i class="el-icon-warning"></i></div>
              <div class="f16 color-165DFF"><i class="el-icon-success"></i></div>
            </div>
            <el-button class="bg-F2F3F5" icon="el-icon-arrow-right" circle></el-button>
          </div>

          <el-button type="warning" icon="el-icon-message" circle></el-button>

          <div class="wrap-btn-left-dial pl-22 pr-24 f14 flex-row justify-content-between">
            <div class="mr-24 flex-row justify-content-between align-items-center">
              <div class="mr-8 f16 color-F53F3F"><i class="el-icon-video-pause"></i></div>
              <div class="mr-8">暂停拨打</div>
              <div class="mr-8 f12 color-000">01:00</div>
              <div class="mr-8 f20"><i class="el-icon-phone-outline"></i></div>
              <div class="mr-8 f20"><i class="el-icon-microphone"></i></div>
              <div class="mr-8 ai-logo-img"></div>
            </div>
            <div class="flex-row justify-content-between align-items-center f14">
              <div class="flex-row justify-content-between align-items-center mr-24">
                <div class="mr-8 f16"><i class="el-icon-s-operation"></i></div>
                <div>队列 <span class="color-000">200</span></div>
              </div>
              <div class="mr-24">已拨打 <span class="color-000">200</span></div>
              <div class="mr-24">已接通 <span class="color-000">200</span></div>
              <div>未接通 <span class="color-000">200</span></div>
            </div>
          </div>
        </div>
        <div class="flex-row justify-content-between">
          <el-button icon="el-icon-setting" circle></el-button>
          <el-button icon="el-icon-switch-button" circle @click="handleBack"></el-button>
        </div>

<!--        <div class="flex-row justify-content-between top-case-btn-left">-->
<!--          <el-button @click="handleBack">退出当前调解</el-button>-->
<!--          <el-button @click="getFrontCaseById">上一个</el-button>-->
<!--          <el-button @click="getNextCaseById">下一个</el-button>-->
<!--          <span class="ipphoneimg"> IP电话</span>-->
<!--          <span class="smsimg">发送短信</span>-->
<!--          <span class="videoimg" @click="VideoDialog={caseId:caseId}">视频预约</span>-->

<!--          <span class="case-send-btn">发起送达</span>-->
<!--          <span class="case-send-btn">发起签章</span>-->
<!--          <span class="case-send-btn">案件办结</span>-->
<!--        </div>-->
      </div>
      <!-- 中间数据 -->
      <div class="layout-center-center-wrap flex-row justify-content-between">
        <!-- 左边数据 -->
        <div class="layout-center-left-wrap flex-row justify-content-between">
          <div class="layout-center-left1-wrap flex-column justify-content-start">
            <span class="left-rbobot">
                <img src="../../../assets/image/mediate/m-info-robot.png"/>
            </span>
            <span class="separation"></span>
            <!--            <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @mouseenter="leftActive = 1">-->
            <!--                            <img src="../../../assets/image/mediate/m-info1.png"/>-->
            <!--                            <a>基本信息</a>-->
            <!--                        </span>-->
            <!--            <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="leftActive = 2">-->
            <!--                            <img src="../../../assets/image/mediate/m-info2.png"/>-->
            <!--                            <a>联系人</a>-->
            <!--                        </span>-->
            <!--            <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="leftActive = 3">-->
            <!--                            <img src="../../../assets/image/mediate/m-info3.png"/>-->
            <!--                            <a>案件材料</a>-->
            <!--                        </span>-->
            <!--            <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="leftActive = 4">-->
            <!--                            <img src="../../../assets/image/mediate/m-info4.png"/>-->
            <!--                            <a>案件文书</a>-->
            <!--                        </span>-->
            <!--            <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="leftActive = 5">-->
            <!--                            <img src="../../../assets/image/mediate/m-info5.png"/>-->
            <!--                            <a>还款计划</a>-->
            <!--                        </span>-->
            <!--            <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="leftActive = 6">-->
            <!--                            <img src="../../../assets/image/mediate/m-info6.png"/>-->
            <!--                            <a>还款凭证</a>-->
            <!--                        </span>-->

            <span class="left-img-info flex-column" :class="leftActive == 1 ?'active':''" @click="leftActive = 1">
                <img src="../../../assets/image/mediate/m-info1.png"/>
                <a>基本信息</a>
            </span>
            <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @click="leftActive = 2">
                <img src="../../../assets/image/mediate/m-info2.png"/>
                <a>联系人</a>
            </span>
            <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @click="leftActive = 3">
                <img src="../../../assets/image/mediate/m-info3.png"/>
                <a>案件材料</a>
            </span>
            <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @click="leftActive = 4">
                <img src="../../../assets/image/mediate/m-info4.png"/>
                <a>案件文书</a>
            </span>
            <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @click="leftActive = 5">
                <img src="../../../assets/image/mediate/m-info5.png"/>
                <a>还款计划</a>
            </span>
            <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @click="leftActive = 6">
                <img src="../../../assets/image/mediate/m-info6.png"/>
                <a>还款凭证</a>
            </span>
          </div>
          <div class="layout-center-left2-wrap">
            <el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
              <!-- 债务信息 -->
              <div v-if="leftActive == 1" class="case-debt-info">
                <div class="descriptions-t">
                  <div class="f16 f-weight600 descriptions-t-title">基本信息</div>
                  <div class="flex-row descriptions-t-item">
                    <div class="descriptions-t-item-l color-86909C">金融产品名称:</div>
                    <div class="descriptions-t-item-r">微粒贷</div>
                  </div>
                  <div class="flex-row descriptions-t-item bgColor-F7F8FA">
                    <div class="descriptions-t-item-l color-86909C">金融机构名称:</div>
                    <div class="descriptions-t-item-r">微众银行殷份有限公司</div>
                  </div>
                  <div class="flex-row descriptions-t-item">
                    <div class="descriptions-t-item-l color-86909C">合同名称:</div>
                    <div class="descriptions-t-item-r">贷款合同</div>
                  </div>
                  <div class="flex-row descriptions-t-item bgColor-F7F8FA">
                    <div class="descriptions-t-item-l color-86909C">被申请人姓名:</div>
                    <div class="descriptions-t-item-r color-1960F4">陈继平</div>
                  </div>
                  <div class="flex-row descriptions-t-item">
                    <div class="descriptions-t-item-l color-86909C">被申请人手机号码:</div>
                    <div class="descriptions-t-item-r">134****9447</div>
                  </div>
                </div>

                <div class="case-debt-info-call flex-row justify-content-between align-items-center">
                  <div class="flex-row align-items-center cursor-pointer">
                    <div class="f32 color-1960F4 mr-8"><i class="el-icon-phone"></i></div>
                    <div>呼叫被申请人</div>
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div class="flex-row align-items-center cursor-pointer">
                    <div class="f32 color-FF7D00 mr-8"><i class="el-icon-message"></i></div>
                    <div>发送短信</div>
                  </div>
                </div>

                <div class="descriptions-t mt-16">
                  <div class="f16 f-weight600 descriptions-t-title">债务信息</div>
                  <div class="flex-row descriptions-t-item">
                    <div class="descriptions-t-item-l color-86909C">当前逾期金额:</div>
                    <div class="descriptions-t-item-r">2000000</div>
                  </div>
                  <div class="flex-row descriptions-t-item bgColor-F7F8FA">
                    <div class="descriptions-t-item-l color-86909C">欠款本金:</div>
                    <div class="descriptions-t-item-r color-F53F3F">1800000</div>
                  </div>
                  <div class="flex-row descriptions-t-item">
                    <div class="descriptions-t-item-l color-86909C">欠款利息:</div>
                    <div class="descriptions-t-item-r">2000000 <i class="f14 el-icon-warning-outline"></i></div>
                  </div>
                  <div class="flex-row descriptions-t-item bgColor-F7F8FA">
                    <div class="descriptions-t-item-l color-86909C">月还款额:</div>
                    <div class="descriptions-t-item-r">6000</div>
                  </div>
                </div>
              </div>

              <!-- 联系人信息 -->
              <div v-if="leftActive == 2" class="case-contact-person">
                <contactPerson :caseId="caseId" />
                <!--                <div class="mb-16 flex-row justify-content-between">-->
                <!--                  <span class="f-weight500 f18">联系人信息</span>-->
                <!--                  <span class="cursor-pointer" @click="contactAddFlag = true"><i-->
                <!--                      class="el-icon-plus"></i> 添加联系人</span>-->
                <!--                </div>-->
                <!--                <div class="mb-16 flex-row justify-content-between">-->
                <!--                  <span class="f14 contact-person-type">被申请人</span>-->
                <!--                  <span class="f14 contact-person-type">申请人</span>-->
                <!--                  <span class="f14 contact-person-type">申请人代理人</span>-->
                <!--                </div>-->
                <!--                <div v-if="contactAddFlag" class="case-detail-des flex-column mb-16">-->
                <!--                  <div class="flex-row justify-content-between">-->
                <!--                    <div class="flex-row mb-8">-->
                <!--                      <a class="f16" style="width: 130px;">-->
                <!--                        <el-input v-model.trim="contactAddObj.Name"-->
                <!--                                  clearable placeholder="请输入姓名" size="small">-->
                <!--                        </el-input>-->
                <!--                      </a>-->
                <!--                      <a style="width: 140px;margin-left: 5px">-->
                <!--                        <el-select v-model="contactAddObj.relation"-->
                <!--                                   placeholder="与债务人关系" size="small"-->
                <!--                                   class="width100">-->
                <!--                          <el-option-->
                <!--                              v-for="(item,index) in relationOptions"-->
                <!--                              :key="index"-->
                <!--                              :label="item.label"-->
                <!--                              :value="item.value">-->
                <!--                          </el-option>-->
                <!--                        </el-select>-->
                <!--                      </a>-->
                <!--                    </div>-->
                <!--                    <div class="flex-row">-->
                <!--                      <a class="cursor-pointer pt-6">添加</a>-->
                <!--                      <a class="cursor-pointer ml-8 pt-6" @click="contactAddFlag = false;contactAddObj = {}">取消</a>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                  <div class="flex-row">-->
                <!--                    <a style="width: 180px;">-->
                <!--                      <el-input v-model.trim="contactAddObj.Phone" size="small"-->
                <!--                                clearable placeholder="请输入手机号码" maxlength="11">-->
                <!--                      </el-input>-->
                <!--                    </a>-->
                <!--                  </div>-->
                <!--                </div>-->

                <!--                <div class="case-detail-des flex-column mb-16">-->
                <!--                  <div class="flex-row justify-content-between">-->
                <!--                    <div v-if="!contactUpdate" class="flex-row mb-8">-->
                <!--                      <a class="f16">张三</a>-->
                <!--                      <div class="case-lable">-->
                <!--                        <a class="case-status0">本人</a>-->
                <!--                        <a class="case-status1">空号</a>-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                    <div v-if="contactUpdate" class="flex-row mb-8">-->
                <!--                      <a class="f16" style="width: 130px;">-->
                <!--                        <el-input v-model.trim="contactObj.Name"-->
                <!--                                  clearable placeholder="请输入姓名" size="small">-->
                <!--                        </el-input>-->
                <!--                      </a>-->
                <!--                      <a style="width: 140px;margin-left: 5px">-->
                <!--                        <el-select v-model="contactObj.relation"-->
                <!--                                   placeholder="请选择与债务人关系" size="small"-->
                <!--                                   class="width100">-->
                <!--                          <el-option-->
                <!--                              v-for="(item,index) in relationOptions"-->
                <!--                              :key="index"-->
                <!--                              :label="item.label"-->
                <!--                              :value="item.value">-->
                <!--                          </el-option>-->
                <!--                        </el-select>-->
                <!--                      </a>-->
                <!--                    </div>-->
                <!--                    <div class="flex-row">-->
                <!--                      <a v-if="contactUpdate" class="cursor-pointer pt-6">保存</a>-->
                <!--                      <a v-if="contactUpdate" @click="contactUpdate = false" class="cursor-pointer ml-8 pt-6">取消</a>-->
                <!--                      <a v-if="!contactUpdate" @click="contactUpdate = true" class="cursor-pointer">编辑</a>-->
                <!--                      <a v-if="!contactUpdate" class="cursor-pointer ml-8">删除</a>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                  <div v-if="!contactUpdate">-->
                <!--                    <a>手机号码:</a><a class="ml-8">13333333333</a>-->
                <!--                  </div>-->
                <!--                  <div v-if="contactUpdate" class="flex-row">-->
                <!--                    <a style="width: 180px;">-->
                <!--                      <el-input v-model.trim="contactObj.Phone" size="small"-->
                <!--                                clearable placeholder="请输入手机号码" maxlength="11">-->
                <!--                      </el-input>-->
                <!--                    </a>-->
                <!--                  </div>-->
                <!--                </div>-->
              </div>

              <!-- 案件材料 -->
              <div v-if="leftActive == 3" class="case-materials-person">
                <caseMaterialLeft :caseId="caseId" />
                <!--                <div class="mb-16 flex-row justify-content-between">-->
                <!--                  <span class="f-weight500 f18">案件材料</span>-->
                <!--                  <span class="cursor-pointer"><i class="el-icon-plus"></i> 上传案件材料</span>-->
                <!--                </div>-->
                <!--                <div class="case-detail-des flex-column mb-16">-->
                <!--                  <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">-->
                <!--                    <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>-->
                <!--                    <div class="flex-column">-->
                <!--                      <a class="mt-8 f-weight500">起诉状</a>-->
                <!--                      <a class="color-86909C">张三 2024-09-09</a>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                  <div class="color-86909C mt-8">-->
                <!--                    <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>-->
                <!--                    <a class="mr-16 cursor-pointer"><i class="el-icon-delete"></i>删除</a>-->
                <!--                    <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载</a>-->
                <!--                  </div>-->
                <!--                </div>-->
              </div>

              <!-- 案件文书 -->
              <div v-if="leftActive == 4" class="case-office-person">
                <cassWrit :caseId="caseId" />
<!--                <div class="mb-16 flex-row justify-content-between">-->
<!--                  <span class="f-weight500 f18">案件文书</span>-->
<!--                  <span class="cursor-pointer"><i class="el-icon-tickets"></i> 文书生成</span>-->
<!--                </div>-->
<!--                <div class="case-detail-des flex-column mb-16">-->
<!--                  <div class="background-color-F5F5F5 p-16 flex-row border-radius-8">-->
<!--                    <a class="case-img"><img :src="this.$util.reg_img('m-info1.pdf')"/></a>-->
<!--                    <div class="flex-column" style="padding-top:2px">-->
<!--                      <a class="f-weight500">调解申请书</a>-->
<!--                      <a class="color-86909C f12">未签字</a>-->
<!--                      <a class="color-86909C f12">&#45;&#45;</a>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div class="color-86909C mt-8">-->
<!--                    <a class="mr-16 ml-16 cursor-pointer"><i class="el-icon-view"></i>预览</a>-->
<!--                    <a class="mr-16 cursor-pointer"><i class="el-icon-download"></i>下载模板</a>-->
<!--                    <a class="mr-16 cursor-pointer"><i class="el-icon-upload2"></i>上传文书</a>-->
<!--                    <a class="mr-16 cursor-pointer"><i class="el-icon-tickets"></i>文书生成</a>-->
<!--                  </div>-->
<!--                </div>-->
              </div>

              <!-- 还款计划 -->
              <div v-if="leftActive == 5" class="case-repayment-schedule">
                <RepaymentSchedule :eventDialog.sync="eventDialog"/>
              </div>
              <!-- 还款凭证 -->
              <div v-if="leftActive == 6" class="case-repayment-certificate">
                <RepaymentCertificate :eventDialog.sync="eventDialog"/>
              </div>

            </el-scrollbar>

          </div>
        </div>
        <!-- 右边 -->
        <div class="layout-center-right-wrap flex-row">
          <div class="right-wrap-left">
            <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="XXX"
                    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="XXX"
                    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>
              </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>
                  <div class="pl-16 pr-16">
                    <div class="echartsWordCloud" id="echartsWordCloud"></div>
                  </div>
                  <el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
                    <div class="flex-row justify-content-between p-16">
                      <div class="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="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>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </div>
          <div class="right-wrap-right p-16">
            <div class="line-height-30 f22 f-weight600">沟通记录</div>

            <div class="flex-row justify-content-between align-items-center pt-16 pb-16">
              <el-select v-model="communicationRecord" placeholder="请选择">
                <el-option label="111" value="222"></el-option>
              </el-select>
              <el-button plain icon="el-icon-plus">新增沟通记录</el-button>
            </div>

            <el-timeline class="padding-0">
              <el-timeline-item timestamp="2018/4/12" placement="top" type="primary">
                <el-card shadow="never">
                  <div class="flex-row justify-content-between timeline-layout">
                    <div class="timeline-layout-w">
                      <div class="flex-row align-items-center">
                        <div>17:15:05</div>
                        <div class="pl-8 pr-8">李小山</div>
                        <div class="text-center icon-bg icon-phone"><i class="el-icon-phone"></i></div>
                      </div>
                      <div class="timeline-layout-w-records mt-8 mb-8">
                        <div class="flex-row align-items-center">
                          <div class="pr-8">陈继平</div>
                          <div class="pr-8">134****9447</div>
                          <el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
                          <el-tag size="small" effect="plain">重点客户</el-tag>
                        </div>
                        <div class="flex-row align-items-center pt-6">
                          <div>通话44秒</div>
                          <el-divider direction="vertical"></el-divider>
                          <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
                        </div>
                      </div>
                      <div>
                        沟通备注：
                        <span class="color-FF7D00">客户承诺本月底还款</span>
                        <i class="ml-8 f14 el-icon-edit cursor-pointer"></i>
                      </div>
                    </div>
                    <div class="timeline-layout-w timeline-layout-ai">
                      <div class="flex-row align-items-center">
                        <div class="mr-8 ai-logo-img"></div>
                        <div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
                      </div>
                      <div class="pt-8">
                        由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/13" placement="top" type="primary">
                <el-card shadow="never">
                  <div class="flex-row justify-content-between timeline-layout">
                    <div class="timeline-layout-w">
                      <div class="flex-row align-items-center">
                        <div>17:15:05</div>
                        <div class="pl-8 pr-8">李小山</div>
                        <div class="text-center icon-bg icon-video"><i class="el-icon-video-camera-solid"></i></div>
                      </div>
                      <div class="timeline-layout-w-records mt-8 mb-8">
                        <div class="flex-row align-items-center">
                          <div class="pr-8">陈继平</div>
                          <div class="pr-8">134****9447</div>
                          <el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
                          <el-tag size="small" effect="plain">重点客户</el-tag>
                        </div>
                        <div class="flex-row align-items-center pt-6">
                          <div>通话44秒</div>
                          <el-divider direction="vertical"></el-divider>
                          <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
                        </div>
                      </div>
                      <div>
                        沟通备注：
                        <span class="color-FF7D00">客户说忙下次在沟通客户说忙下次在沟通客户说忙下次在沟通</span>
                        <i class="ml-8 f14 el-icon-edit cursor-pointer"></i>
                      </div>
                    </div>
                    <div class="timeline-layout-w timeline-layout-ai">
                      <div class="flex-row align-items-center">
                        <div class="mr-8 ai-logo-img"></div>
                        <div>调解小助手帮你总结：<i class="f14 el-icon-warning-outline cursor-pointer"></i></div>
                      </div>
                      <div class="pt-8">
                        由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>

          </div>
        </div>

      </div>

    </div>

    <div class="flex-row align-items-center pl-24 pr-24 btn-group-controls">
      <div class="pt-16 pb-16 flex-row justify-content-between align-items-center btn-group-real-time">
        <el-badge :value="3" class="item">
          <i class="f24 el-icon-phone cursor-pointer color-52ABF2"></i>
        </el-badge>
        <el-badge :value="3" class="item">
          <i class="f24 el-icon-video-camera cursor-pointer color-52ABF2"></i>
        </el-badge>
      </div>
      <div class="ml-24 mr-24 btn-group-interval"></div>
      <div class="flex-row justify-content-between align-items-center btn-group-processing-event">

        <div class="flex-row justify-content-between align-items-center cursor-pointer" @click="visiblePopover={caseId: caseId}">
          <i class="f24 el-icon-video-camera color-4E5969"></i>
          <div class="pl-4 f14">预约</div>
        </div>

        <div class="flex-row justify-content-between align-items-center cursor-pointer">
          <i class="f24 el-icon-document color-4E5969"></i>
          <div class="pl-4 f14">协议</div>
        </div>

        <el-popover 
            placement="top"
            width="500"
            v-model="singleofficevisible"
            title="发起签字"
            trigger="click">
            <singleofficeWritPopover :caseId="caseId" :singleofficevisible.sync="singleofficevisible"/>
            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
              <i class="f24 el-icon-document-remove color-4E5969"></i>
              <a class="pl-4 f14">签字</a>
            </span>
        </el-popover>

        
        <el-popover 
            placement="top"
            width="500"
            v-model="singlesealvisible"
            title="发起签章"
            trigger="click">
            <singleofficeSealPopover :caseId="caseId" :singlesealvisible.sync="singlesealvisible"/>
            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
              <i class="f24 el-icon-s-check color-4E5969"></i>
              <a class="pl-4 f14">签章</a>
            </span>
        </el-popover>

        <el-popover 
            placement="top"
            width="500"
            v-model="singledeliveryvisible"
            title="发起送达"
            trigger="click">
            <singleofficeDeliveryPopover :caseId="caseId" :singledeliveryvisible.sync="singledeliveryvisible"/>
            <span slot="reference" class="flex-row justify-content-between align-items-center cursor-pointer">
              <i class="f24 el-icon-s-claim color-4E5969"></i>
              <a class="pl-4 f14">送达</a>
            </span>
        </el-popover>
        
        
        <div class="flex-row justify-content-between align-items-center cursor-pointer">
          <i class="f24 el-icon-wallet color-4E5969"></i>
          <div class="pl-4 f14">类案</div>
        </div>
        <div class="flex-row justify-content-between align-items-center cursor-pointer">
          <i class="f24 el-icon-document-checked color-4E5969"></i>
          <div class="pl-4 f14">办结</div>
        </div>
        <div class="flex-row justify-content-between align-items-center cursor-pointer">
          <i class="f24 el-icon-document-delete color-4E5969"></i>
          <div class="pl-4 f14">失败</div>
        </div>
        <div class="flex-row justify-content-between align-items-center cursor-pointer">
          <i class="f24 el-icon-user-solid color-4E5969"></i>
          <div class="pl-4 f14">帮扶</div>
        </div>
        <div class="flex-row justify-content-between align-items-center cursor-pointer">
          <i class="f24 el-icon-s-management color-4E5969"></i>
          <div class="pl-4 f14">协办</div>
        </div>

      </div>
    </div>

    <caseVideoReservationDialog v-if="visiblePopover" :visible-popover.sync="visiblePopover" />
  </div>

</template>
<script>
import api from "@/services/caseManagement";
import eventTracingApi from "@/services/eventTracingApi";
import videoTelephone from "@/services/videoTelephone";
export default {
  components: {
    uploadFile: () => import('@/components/uploadFile.vue'),//上传
    RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
    RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
    caseMaterial: () => import('./caseMaterial'),//
    caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
    contactPerson: () => import('./contactPerson'),//联系人左
    cassWrit: () => import('./cassWrit'),//
    caseVideoReservationDialog: () => import('./caseVideoReservationDialog'),//

    singleofficeWritPopover: () => import('./singleofficeWritPopover.vue'),//发起签字
    singleofficeSealPopover: () => import('./singleofficeSealPopover.vue'),//发起签章
    singleofficeDeliveryPopover: () => import('./singleofficeDeliveryPopover.vue'),//发起送达
  },
  data() {
    return {
      singledeliveryvisible:false,
      singlesealvisible:false,
      singleofficevisible:false,
      eventDialog: {caseId: this.$route.query.caseId},
      leftActive: 1,
      rightActive: 1,

      fileList: [],
      mediationRecord: [],//调解记录
      baseInfo: {},//基本信息
      obligorInfo: [],//债务人信息
      caseId: '',//案件id
      // 联系人
      contactAddObj: {},
      contactAddFlag: false,
      contactObj: {},
      contactUpdate: false,
      relationOptions: [{label: '本人', value: '本人'}, {label: '父母', value: '父母'}, {label: '配偶', value: '配偶'},
        {label: '子女', value: '子女'}, {label: '其他', value: '其他'}, {label: '朋友', value: '朋友'}, {
          label: '兄弟',
          value: '兄弟'
        },
        {label: '同事', value: '同事'}, {label: '同学', value: '同学'}],
      // 还款计划
      repaymentObj: {
        type: 'ALL'
      },
      RepaymentOptions: [{label: '一次性还款', value: 'ALL'}, {
        label: '全部分期',
        value: 'STAGES'
      }, {label: '部分先还加分期', value: 'MIX'}, {label: '其他', value: 'OTHER'}],
      rulesClientRepayment: {
        type: [
          {required: true, message: '请选择还款方式', trigger: 'change',},
        ],
        totalAmount: [
          {required: true, message: '请输入还款金额', trigger: 'change',},
          {
            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
            message: '请输入2位小数金额',
            trigger: ['blur', 'change']
          }
        ],
        paybackDate: [
          {required: true, message: '请选择还款截止日期', trigger: 'change',},
        ],
        stagesDay: [
          {required: true, message: '请选择每期还款日期', trigger: 'change',},
        ],
        partAmount: [
          {required: true, message: '请输入分期前偿还金额	', trigger: 'change',},
          {
            pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/,
            message: '请输入2位小数金额',
            trigger: ['blur', 'change']
          }
        ],
        partDate: [
          {required: true, message: '请选择分期前偿还日期', trigger: 'change',},
        ],
        stagesNum: [
          {required: true, message: '请输入分期期数', trigger: 'change',},
          {pattern: /^[1-9]\d*$/, message: '只能输入正整数', trigger: ['blur', 'change']}
        ],
      },

      communicationRecord: '',

      visiblePopover: null,
    };
  },
  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 - 48 - 38 -308
    },
  },
  async created() {
    this.caseId = this.$route.query.caseId
    await this.getCaseInfoById();//获取详情
  },
  beforeDestroy() {
    // if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
    //     clearInterval(this.timer); //关闭
    // }
  },
  methods: {
    debtorEntityCardNo(datalist, len) {
      let datacardno = ''
      let dataphone = ''
      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)};
    },
    // 获取详情
    getCaseInfoById() {
      let _that = this
      api.getCaseInfoById(this.caseId).then(res => {
        console.log(res, 'res')
        if (!res.code) {
          this.baseInfo = res

          // 材料
          // console.log('获取图片',res.caseFileEntityList)
          let caseFileEntityList = []
          res.caseFileEntityList.forEach((item) => {
            caseFileEntityList.push({name: item.name, fileName: item.name, url: item.url})
          })
          _that.fileList = caseFileEntityList

        }

      })
    },
    // 获取上一件案件
    getFrontCaseById() {
      if (!this.$clickThrottle()) {
        return
      }//防止重复点击
      api.getFrontCaseById({id: this.caseId}).then(res => {
        if (!res.code) {
          // let caseChangeData = res
          this.detailData(res)
        }
      })
    },
    // 获取下一件案件
    getNextCaseById() {
      if (!this.$clickThrottle()) {
        return
      }//防止重复点击
      api.getNextCaseById({id: this.caseId}).then(res => {
        if (!res.code) {
          this.detailData(res)
        }
      })
    },
    // 下载调解模板
    handleDownloadMediationTemplate() {
      if (!this.$clickThrottle()) {
        return
      }//防止重复点击
      // console.log('调解模板url',templateUrl)
      if (this.templateUrl) {
        this.handlePreview({previewUrl: "/mediate/minio/preview/" + this.templateUrl, url: this.templateUrl})
      } else {
        this.$message({message: '当前案件未存在调解模板', type: "warning", customClass: 'messageZindex'})
      }

    },
    async handlePreview(item) {
      try {
        let res = await this.$fetchApi.getMinioToken({objectName: item.url})
        window.open(`${item.previewUrl}?token=${res}`, '_target')
      } catch (e) {
        this.$message.error(e.msg || e)
      }
    },
    handleSubmitRepayment() {
      this.$refs.ruleFormRepayment.validate((valid) => {
        if (valid) {
          console.log(1111)

        }
      })
    },
    handleBack() {
      // this.$route.query.sourcePage == 'mediationManagement'
      this.$router.push('/mediation-management')
    },
  }
};
</script>
<style lang="scss" scoped>
.ai-logo-img{
  width: 29px;
  height: 29px;
  background: url('~@/assets/image/ai-logo.png') no-repeat;
  background-size: 100%,100%;
}

.bg-F2F3F5{
  background-color: #F2F3F5;
}

.btn-group-controls{
  width: 864px;
  height: 56px;
  border-radius: 16px;
  background-color: #fff;
  position: fixed;
  bottom: 20px;
  left: calc(50% - 432px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  .btn-group-real-time{
    width: 64px;
  }
  .btn-group-interval{
    width: 1px;
    height: 40px;
    background-color: #C9CDD4;
  }
  .btn-group-processing-event{
    width: calc(100% - 64px - 1px - 48px);
  }
}

.layout-center-wrap {
  height: 100%;
  font-size: 14px;

  .layout-center-top-wrap {
    padding: 8px 16px;
    border-bottom: solid 1px #E5E6EB;

    .top-wrap-title{
      width: 223px;
      height: 32px;
      background: url('~@/assets/image/logo-tjs.png');
      background-size:  100%,100%;
      margin-top: 4px;
    }

    .top-wrap-btn-left{
      width: 55%;
      min-width: 1034px;
      .wrap-btn-left-dial{
        background-color: #FFF2F0;
        border-radius: 20px;

      }
    }
  }

  .layout-center-center-wrap {

    height: 100%;

    .background-color-F5F5F5 {
      background-color: #F5F5F5;
    }

    .border-E5E6EB {
      border: solid 1px #E5E6EB;
    }

    .width120px {
      width: 140px;
    }

    .width180px {
      width: 220px;
    }

    .width200px {
      width: calc(50% - 320px);
    }

    .layout-center-left-wrap {
      background: url('~@/assets/image/mediate/m-left-bg.png') no-repeat;
      background-size: 100% 100%;
      width: 540px;
      height: 100%;
      border-right: 1px solid var(--fill-3, #E5E6EB);

      .layout-center-left1-wrap {
        width: 80px;
        height: 100%;
        text-align: center;

        .left-rbobot {
          width: 100%;
          height: 80px;
          text-align: center;
          margin: 30px 0 0 0;

          img {
            width: 64px;
          }
        }

        .separation {
          width: 50px;
          margin: 15px 0 0 15px;
          border-bottom: solid 1px #dedfe4;
        }

        .left-img-info {
          margin-top: 15px;
          width: 100%;
          font-size: 12px;
          cursor: pointer;

          img {
            width: 48px;
            margin-left: 15px;
          }

          a {
            margin-top: 5px;
          }
        }

        .left-img-info.active {
          background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
          background-size: 15px 30px;
          background-position: 68px 10px;
        }

        .left-img-info:hover {
          background: url('~@/assets/image/mediate/m-triangle.png') no-repeat;
          background-size: 15px 30px;
          background-position: 68px 10px;
        }
      }

      .layout-center-left2-wrap {
        width: 460px;
        height: 100%;
        background-color: #fff;
        border-radius: 25px 0px 0px 25px;
        padding: 20px 30px;


        .case-debt-info{
          .descriptions-t{
            .descriptions-t-title{
              //margin-bottom: 5px;
            }
            .descriptions-t-item-l{
              padding: 12px 10px;
              text-align: right;
              width: 40%;
            }
            .descriptions-t-item-r{
              padding: 12px 10px;
              text-align: left;
              width: 60%;
            }
            .bgColor-F7F8FA{
              background-color: #F7F8FA;
            }
          }

          .case-debt-info-call{
            padding: 12px 42px;
          }
        }

        .case-contact-person{
          .contact-person-type{
            background-color: #F2F3F5;
            padding:5px 15px;
            border-radius: 8px;
            margin: 0 5px;
            cursor: pointer;
          }
        }

        .case-detail-des {
          border: solid 1px #E5E6EB;
          padding: 10px 15px;
          border-radius: 8px;
          font-size: 14px;

          span {
            margin: 3px 0;
            padding: 3px 10px;
            // a:first-child{width: 120px;display: inline-block;text-align: right;}
          }

          span:nth-child(even) {
            background-color: #F7F8FA;
          }

          .case-img {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;

            img {
              max-width: 50px;
              max-height: 50px;
            }
          }

        }

        .case-materials-person {
          .case-detail-des {
            i {
              margin-right: 4px;
            }
          }
        }

        .case-office-person {

          .case-detail-des {
            .case-img {
              width: 55px;
              height: 55px;
              text-align: center;
              line-height: 55px;

              img {
                max-width: 55px;
                max-height: 55px;
              }
            }

            i {
              margin-right: 4px;
            }
          }
        }

      }


    }

    .layout-center-right-wrap {
      background: url('~@/assets/image/mediate/m-right-bg.png') no-repeat;
      background-size: 100% 100%;
      width: calc(100% - 540px);
      height: 100%;
      .right-wrap-left{
        width: 367px;
        .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{
            .echartsWordCloud{
              width: 286px;
              height: 300px;
              background: url('~@/assets/image/mediate/rwhx.png') no-repeat;
              background-size: 100% 100%;
            }

            .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;
                }
              }
            }

            .theme-blue{
              border-color: #E1EDF4;
              .character-info-title{
                color: #4787F0;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #BBD3FB;
                }
                .character-info-details-text{
                  background-color: #ECF2FE;
                }
              }
            }

            .theme-yellow{
              border-color: #FFE2B9;
              .character-info-title{
                color: #ED7B2F;
              }
              .character-info-details{
                .character-info-details-label{
                  background-color: #FFCF8B;
                }
                .character-info-details-text{
                  background-color: #FFF7E8;
                }
              }
            }


          }
        }
      }

      .right-wrap-right{
        width: calc(100% - 367px);
        .timeline-layout{
          .timeline-layout-w{
            width: calc(50% - 8px);
            .icon-bg{
              width: 20px;
              height: 20px;
              border-radius: 4px;
              color: #FFFFFF;
            }
            .icon-phone{
              background-color: #52ABF2;
            }
            .icon-video{
              background-color: #FF7D00;
            }
            .timeline-layout-w-records{
              background-color: #F5F5F5;
              border-radius: 4px;
              padding: 8px 12px 12px 12px;
            }
          }
          .timeline-layout-ai{
            padding: 6px 16px;
            border-radius: 4px;
            background: linear-gradient(270deg, #F1F4FE 0%, #FFF2F8 100%);
          }
        }
      }

      //.case-communication-record {
      //  .btn-communication {
      //    padding: 5px 15px;
      //    border-radius: 8px;
      //    cursor: pointer;
      //  }
      //
      //  .case-communication-cont {
      //    // background: ;
      //    padding: 20px;
      //    border-radius: 8px;
      //    margin-top: 15px;
      //  }
      //}
      //.case-office-record, .case-materials-record {
      //
      //  span a {
      //    color: #C66A5B;
      //    margin-right: 13px;
      //    cursor: pointer;
      //  }
      //
      //  span a:last-child {
      //    margin-right: 0;
      //  }
      //}
    }

  }

}
</style>
