<template>
   
  <!-- 中间数据 -->
  <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="handlerMouseenter(1)">
            <img src="../../../assets/image/mediate/m-info1.png"/>
            <a>基本信息</a>
        </span>
        <span class="left-img-info flex-column" v-if="baseInfo.jointDebt == 1" :class="leftActive == 8 ?'active':''" @mouseenter="handlerMouseenter(8)">
            <img src="../../../assets/image/mediate/m-info8.png"/>
            <a>共债</a>
        </span>
        <span class="left-img-info flex-column" :class="leftActive == 2 ?'active':''" @mouseenter="handlerMouseenter(2)">
            <img src="../../../assets/image/mediate/m-info2.png"/>
            <a>联系人</a>
        </span>
        <span class="left-img-info flex-column" :class="leftActive == 3 ?'active':''" @mouseenter="handlerMouseenter(3)">
            <img src="../../../assets/image/mediate/m-info3.png"/>
            <a>案件材料</a>
        </span>
        <span class="left-img-info flex-column" :class="leftActive == 4 ?'active':''" @mouseenter="handlerMouseenter(4)">
            <img src="../../../assets/image/mediate/m-info4.png"/>
            <a>案件文书</a>
        </span>
        <span class="left-img-info flex-column" :class="leftActive == 5 ?'active':''" @mouseenter="handlerMouseenter(5)">
            <img src="../../../assets/image/mediate/m-info5.png"/>
            <a>还款计划</a>
        </span>
        <span class="left-img-info flex-column" :class="leftActive == 6 ?'active':''" @mouseenter="handlerMouseenter(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="mediate-status-log">
                <img v-if="baseInfo.mediateStatus == 4" src="../../../assets/image/mediate/mediatefail.png" />
                <img v-if="baseInfo.mediateStatus == 5" src="../../../assets/image/mediate/mediatesuccess.png" />
              </div>
              <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">{{baseInfo.casePkg.pkgName}}</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">{{baseInfo.productTypeId}}</div>
              </div>
              <div class="flex-row descriptions-t-item">
                <div class="descriptions-t-item-l color-86909C">金融机构名称:</div>
                <div class="descriptions-t-item-r">{{baseInfo.financialOrgName}}</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">{{baseInfo.caseNo}}</div>
              </div>
              <div class="flex-row descriptions-t-item">
                <div class="descriptions-t-item-l color-86909C">合同名称:</div>
                <div class="descriptions-t-item-r">{{baseInfo.fields.find(item => item.fieldKey == 'contactName').fieldValue}}</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">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').name}}</div>
              </div>
              <div class="flex-row descriptions-t-item ">
                <div class="descriptions-t-item-l color-86909C">被申请人身份证:</div>
                <div class="descriptions-t-item-r">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').cardNo}}</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">{{baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR').phone}}</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" @click="startOutboundCall">
                <div class="f32 color-1960F4 mr-8"><i class="el-icon-phone"></i></div>
                <div>呼叫被申请人</div>
              </div>
              <el-divider direction="vertical"></el-divider>

              <el-popover
                  placement="top"
                  width="500"
                  v-model="singlesmsvisible"
                  title="发送短信"
                  trigger="click">
                  <singlesmsPopover :caseId="caseId" :sendPhone="[(baseInfo.debtorEntityList.find(item => item.role == 'DEBTOR')).phone]" :singlesmsvisible.sync="singlesmsvisible"/>
                  <span slot="reference" class="flex-row align-items-center cursor-pointer">
                    <div class="f32 color-FF7D00 mr-8"><i class="el-icon-message"></i></div>
                        <div>发送短信</div>
                  </span>
              </el-popover>

              <!-- <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 color-F53F3F">{{baseInfo.fields.find(item => item.fieldKey == 'moneyAmount').fieldValue}}</div>
              </div>

              <div v-for="(item,index) in baseInfo.fields.filter(item => item.fieldGroup == 'DEBTINFO')" 
                :key="index" class="flex-row descriptions-t-item " :class="index % 2 === 0 ? 'bgColor-F7F8FA':''">
                <div class="descriptions-t-item-l color-86909C">{{item.name}}:</div>
                <div class="descriptions-t-item-r">{{item.fieldValue}}</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">{{baseInfo.casePkg.pkgName}}</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">{{baseInfo.casePkg.entrustingAgencyName}}</div>
              </div>
              <div class="flex-row descriptions-t-item">
                <div class="descriptions-t-item-l color-86909C">委案开始日期:</div>
                <div class="descriptions-t-item-r">{{baseInfo.casePkg.planStartTime | formaDate('yyyy-MM-dd')}}</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">{{baseInfo.casePkg.planEndTime | formaDate('yyyy-MM-dd')}}</div>
              </div>
              <div class="flex-row descriptions-t-item">
                <div class="descriptions-t-item-l color-86909C">委案渠道:</div>
                <div class="descriptions-t-item-r">{{baseInfo.casePkg.channel}}</div>
              </div>
            </div>
            <div class="descriptions-t mt-16">
              <div class="f16 f-weight600 descriptions-t-title">代理人信息</div>
              <div v-for="(item,index) in AgentData" :key="index">
                <div class="flex-row descriptions-t-item">
                  <div class="descriptions-t-item-l color-86909C">姓名:</div>
                  <div class="descriptions-t-item-r">{{item.name}}</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">{{item.cardNo}}</div>
                </div>
                <div class="flex-row descriptions-t-item">
                  <div class="descriptions-t-item-l color-86909C">手机号码:</div>
                  <div class="descriptions-t-item-r">{{item.phone}}</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">{{item.mail}}</div>
                </div>
                <div class="flex-row descriptions-t-item">
                  <div class="descriptions-t-item-l color-86909C">地址:</div>
                  <div class="descriptions-t-item-r">{{item.addr}}</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">{{item.type}}</div>
                </div>
              </div>
              
            </div>

          </div>

          <!-- 共债 -->
          <div v-if="leftActive == 8" class="case-coobligation-person">
            <coobligationInfo :caseId="caseId" />
          </div>

          <!-- 联系人信息 -->
          <div v-if="leftActive == 2" class="case-contact-person">
            <contactPerson :caseId="caseId" @startOutboundCall="startOutboundCall" @updateCaseInfoById="updateCaseInfoById" />
            
          </div>

          <!-- 案件材料 -->
          <div v-if="leftActive == 3" class="case-materials-person">
            <caseMaterialLeft :caseId="caseId" />
            
          </div>

          <!-- 案件文书 -->
          <div v-if="leftActive == 4" class="case-office-person">
            <cassWrit :caseId="caseId" />

          </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">
        <!-- 人物画像  -->
        <portraitPerson :caseId="caseId" />
      </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="mediaterecordpm.linkedWay" placeholder="请选择" @change="getmediate_record">
            <el-option label="全部沟通" value=""></el-option>
            <el-option label="电话沟通" value="1"></el-option>
            <el-option label="视频沟通" value="2"></el-option>
          </el-select>
          <span>
            <el-button plain icon="el-icon-plus" @click="visiblemediatRecord = true;visiblemediatRecordObj = null">新增沟通记录</el-button>

            <el-popover
              placement="top"
              width="400"
              v-model="singleremarkvisible"
              title="个人调解备注"
              trigger="hover">
              <singleRemarkPopover :caseId="caseId" :singleremarkvisible.sync="singleremarkvisible" :caseRemark="baseInfo.mediateRemark" @handleSubmit="getCaseInfoById()"/>
              <span slot="reference" class="ml-8">
                <el-button plain icon="el-icon-edit">个人调解备注</el-button>
              </span>
          </el-popover>
          </span>
          
        </div>

        <el-scrollbar :style="'height:'+`${MediationrecordHeight}`+'px;padding:2px 2px 25px 2px'">
          <el-timeline class="padding-0">
            <el-timeline-item v-for="(item,index) in communicationRecord" :key="index" :timestamp="item.recordDate" placement="top" type="primary">
              <el-card shadow="never" class="mt-8" v-for="(itemrecord,index) in item.records" :key="index">
                <div class="flex-row justify-content-between timeline-layout">
                  <div class="timeline-layout-w">
                    <div class="flex-row justify-content-between">
                      <div class="flex-row">
                        <div>{{ itemrecord.createAt | formaDate('hh:mm:ss')  }}</div>
                        <div class="pl-8 pr-8">
                          {{itemrecord.mediator}}
                        </div>
                        <!-- 电话 -->
                        <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">
                          <i v-if="itemrecord.callWay == 1 || itemrecord.callWay == null" class="callphone-icon"></i>
                          <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation != 1" class="callbackphone-icon"></i>
                          <i v-if="itemrecord.callWay == 0 && itemrecord.linkedSituation == 1" class="nocallphone-icon"></i>
                        </div>
                        <span v-if="itemrecord.linkedWay == 1 && itemrecord.linkedSituation != null" class="case-lable">
                          <a :class="'case-status'+ $util.getTelephoneTypeData(itemrecord.linkedSituation).key">{{$util.getTelephoneTypeData(itemrecord.linkedSituation).label}}</a>
                        </span>
                        <!-- 视频 -->
                        <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 2">
                          <i class="callvideo-icon"></i>
                        </div>
                        <!-- 微信 -->
                        <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 3">
                          <i class="callwechat-icon"></i>
                        </div>
                      </div>
                      <div class="">
                        <span class="cursor-pointer mr-8" @click="visiblemediatRecord = true;visiblemediatRecordObj = itemrecord"><i class="ml-8 f14 el-icon-edit"></i></span>
                        <span class="cursor-pointer" v-if="itemrecord.linkedType == 2" @click="mediatRecordDelete(itemrecord)"><i class="ml-8 f14 el-icon-delete"></i></span>
                      </div>
                    </div>
                    <div class="timeline-layout-w-records mt-8 mb-8">
                      <div class="flex-row align-items-center">
                        <div>
                          <span class="pr-8" v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index">
                            {{ itemperson.name}}
                            {{ itemrecord.linkedWay == 1 ? itemperson.phone :''}}
                            <el-tag class="mr-8" size="small" effect="plain" style="height: 22px;">{{itemperson.type}}</el-tag>
                          </span>
                        </div>
                        
                        <el-tag size="small" effect="plain" style="height: 22px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>
                      </div>
                      <!-- 电话 --><!-- 微信 --> <!-- 视频 -->
                      <div class="flex-row align-items-center pt-6">
                        <div v-if="itemrecord.linkedType == 1&&itemrecord.linkedWay == 1">通话{{itemrecord.linkedDuration}}秒</div>
                        <div v-if="itemrecord.linkedType == 1&&itemrecord.linkedWay == 2">视频{{itemrecord.linkedDuration}}秒</div>
                        <el-divider v-if="itemrecord.linkedType == 1 && (itemrecord.linkedWay == 1 || itemrecord.linkedWay == 2)" direction="vertical"></el-divider>
                        <div class="text-center cursor-pointer mr-8" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
                          <i v-if="$util.getFileType(item) != 'image' " class="f14 el-icon-video-play"></i> 
                          {{ $util.getFileType(item) === 'video' ? '播放录像':''}} 
                          {{ $util.getFileType(item) === 'audio' ? '播放录音':''}}
                          {{ $util.getFileType(item) === 'image' ? '查看文件':''}}
                        </div>
                      </div>
                      <!-- 视频 -->
                      <!-- <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">
                        <div v-if="itemrecord.linkedType == 1">视频{{itemrecord.linkedDuration}}秒</div>
                        <el-divider v-if="itemrecord.linkedType == 1" direction="vertical"></el-divider>
                        <div class="text-center cursor-pointer" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
                          <i class="f14 el-icon-video-play"></i> 播放视频 {{index > 0 ? index : ''}}
                        </div>
                      </div> -->
                      <!-- 微信 -->
                      <!-- <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">
                        <div class="text-center cursor-pointer" v-for="(item,index) in itemrecord.files" :key="index" @click="handleCaseShowFile(item)">
                          查看文件 
                        </div>
                      </div> -->

                    </div>

                    <div>
                      沟通备注：
                      <span class="color-FF7D00">{{itemrecord.communicationRemarks}}</span>
                      
                    </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>
        </el-scrollbar>
        

      </div>
      <div class="right-wrap-side">
        <SidebarTool :caseId="caseId" />
      </div>
    </div>

    <MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecordObj="visiblemediatRecordObj" :caseId="caseId" :visiblemediatRecord.sync="visiblemediatRecord" />
    <!-- 文件预览 -->
    <showFile v-if="fileDialog" :fileDialog.sync="fileDialog"/>

  </div>

</template>
<script>
import api from "@/services/caseManagement";
import contactPerson from "@/services/contactPerson";
export default {
  components: {
    showFile: () => import('../../../components/showFile.vue'),//
    RepaymentSchedule: () => import('./RepaymentSchedule.vue'),//还款计划
    RepaymentCertificate: () => import('./RepaymentCertificate.vue'),//还款凭证
    caseMaterial: () => import('./caseMaterial'),//
    caseMaterialLeft: () => import('./caseMaterialLeft'),//案件材料左
    contactPerson: () => import('./contactPerson'),//联系人左
    cassWrit: () => import('./cassWrit'),//案件文书
    portraitPerson: () => import('./portraitPerson.vue'),//人物画像
    SidebarTool: () => import('./SidebarTool'),
    singlesmsPopover: () => import('./singlesmsPopover.vue'),//发送短信
    MediationRecordDialog: () => import('./MediationRecordDialog.vue'),//调解记录
    coobligationInfo: () => import('./coobligationInfo.vue'),//共债
    singleRemarkPopover: () => import('./singleRemarkPopover.vue'),//个人调解备注
  },
  props: {
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },
    
  },
  data() {
    return {
      singleremarkvisible:false,
      fileDialog:null,
      singlesmsvisible:false,
      visiblemediatRecord:false,
      visiblemediatRecordObj:null,
      eventDialog: {caseId: ''},
      leftActive: 1,
      AgentData:[],
      fileList: [],
      mediationRecord: [],//调解记录
      baseInfo: {casePkg:{}},//基本信息
      obligorInfo: [],//债务人信息
      communicationRecord: [],

      mediaterecordpm:{
        caseId:'',
        linkedWay:''
      },
      materialTypeOptions: this.$util.getMediationprogress(),
    };
  },
  computed: {
    // 左侧
    leftContentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 100
    },
    
    MediationrecordHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 57 - 128
    },
  },
  watch: {
    caseId: {
      handler(val) {
        this.mediaterecordpm.caseId = val
        this.getCaseInfoById();//获取详情
        this.getmediate_record()
      },
      immediate: true,
      deep: true
    },
  },
  async created() {
    this.mediaterecordpm.caseId = this.caseId
    this.eventDialog.caseId = this.caseId
    
    this.getCaseInfoById();//获取详情
    this.getAgentList()
    this.getmediate_record()
  },
  beforeDestroy() {
    console.log('销毁')
    this.singlesmsvisible = false
    // if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
    //     clearInterval(this.timer); //关闭
    // }
  },
  methods: {
    updateCaseInfoById(){
      this.$emit('updateCaseInfoById');
    },
    handlerMouseenter(val) {
      this.leftActive = val
      if (val !== 1) this.singlesmsvisible = false
    },
    // 代理人列表数据
    getAgentList() {
      let dataJson = {
        size: 9999,
        current: 1,
        caseId: this.caseId
      }
      
      contactPerson.agentPage(dataJson).then(res => {
        if (!res.code) {
          this.AgentData  = res.records
        }
      })
    },

    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 => {
        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)
        }
      })
    },
    handleBack() {
      // this.$route.query.sourcePage == 'mediationManagement'
      this.$router.push('/mediation-management')
    },
    // 获取调解记录
    getmediate_record() {
      api.mediate_record_list(this.mediaterecordpm).then(res => {
        if (!res.code) {
          this.communicationRecord = res
        } else  {
          this.communicationRecord = []
        }
      })
    },
    handleCaseShowFile(item) {
      //查看录音录像文件相关
      this.$fetchApi.viewFullFile({path: item}).then((res) => {
        this.fileDialog = {showfile: {url: item,fullUrl: res}, filelist: []}
      });
    },
    // 删除调解记录
    mediatRecordDelete(item){
      this.$confirm("请确定是否删除此条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
      }).then(() => {
          if(!this.$clickThrottle()) { return }//防止重复点击
          api.mediate_record_delete({id:item.id}).then((res) => {
            this.$message.success("删除调解记录成功");
            this.getmediate_record(1)
          });
      }).catch(() => {});
    },
    openRecordDialog(obj) {
      this.visiblemediatRecord = true;
      this.visiblemediatRecordObj = obj;
    },
    startOutboundCall(phone, contactId) {
      let params = {
        phone: phone || null,
        contactId: contactId || null
      }
      this.$emit('startOutboundCall', params)
    }
  }
};
</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%;
}

  

  .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{
          .mediate-status-log{
            position: absolute;
            top: 50px;
            left: 270px;
            img{width: 130px;}
          }
          .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: #F2F3FA;
      // 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;
        height: 100%;
      }

      .right-wrap-right{
        width: calc(100% - 367px - 40px);
        .timeline-layout{
          .timeline-layout-w{
            width: calc(50% - 8px);
            .icon-bg{
              width: 20px;
              height: 20px;
              // border-radius: 4px;
              // color: #FFFFFF;

              .callphone-icon{
                background: url('~@/assets/image/mediate/callphone.png') no-repeat;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-size: 100% 100%;
              }
              .callbackphone-icon{
                background: url('~@/assets/image/mediate/callbackphone.png') no-repeat;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-size: 100% 100%;
              }
              .nocallphone-icon{
                background: url('~@/assets/image/mediate/nocallbackphone.png') no-repeat;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-size: 100% 100%;
              }

              .callvideo-icon{
                background: url('~@/assets/image/mediate/callvideo.png') no-repeat;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-size: 100% 100%;
              }
              .callwechat-icon{
                background: url('~@/assets/image/mediate/WeChat.png') no-repeat;
                display: inline-block;
                width: 20px;
                height: 20px;
                background-size: 100% 100%;
              }
            }
            // .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%);
          }
        }
      }

      .right-wrap-side{
        width: 40px;
        height: 100%;
        background-color: #F7F8FA;
      }

      //.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>
