<template>
  <div class="sidebar-tab">
    <div class="tab-content p-16" v-if="rightActive">
      <div v-if="rightActive === 1">
        <div class="tab-content-title f16 f-weight600 pb-8">触达记录</div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
          <el-timeline class="padding-2" >
            
            <el-timeline-item v-for="(item,index) in mediatetraceRecord" :key="index" :timestamp="item.date" placement="top" type="primary">
              <el-card shadow="never">
                <div class="mb-16" v-for="(item,index) in item.list" :key="index">{{ item.createAt | formaDate('hh:mm:ss') }}  {{item.remark}}</div>
              </el-card>
            </el-timeline-item>
            
          </el-timeline>
        </el-scrollbar>
      </div>

      <div v-if="rightActive === 2">
        <div class="tab-content-title f16 f-weight600 pb-8">沟通记录</div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
          <div v-for="(item,index) in communicationRecord" :key="index">
            <div class="timeline-layout pt-16 pb-16" v-for="(itemrecord,index) in item.records" :key="index">
              <div class="timeline-layout-100 mb-16">
                <div class="flex-row justify-content-between">
                  <div class="flex-row">
                    <div>{{ itemrecord.createAt | formaDate('yyyy-MM-dd 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>
                  </div>
                  <!-- <span class="cursor-pointer"><i class="ml-8 f14 el-icon-edit"></i></span> -->
                </div>
                <div class="timeline-layout-w-records mt-8 mb-8">
                  <div class="flex-column align-items-start">
                    <div>
                      <span 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 v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">
                    <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration | secondsToMinutes}}</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>
                <div>沟通备注：<span class="color-FF7D00">{{itemrecord.communicationRemarks}}</span></div>
              </div>
              <div class="timeline-layout-100 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 f12">
                  由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
                </div>
              </div>
            </div>
          </div>

        </el-scrollbar>
      </div>

      <div v-if="rightActive === 3">
        <div class="tab-content-title f16 f-weight600 pb-8">短信记录</div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">

          <el-card v-for="(item,index) in smsRecord" :key="index" shadow="never" class="mt-8">
            <div class="flex-row align-items-center pb-6">
              <div class="mr-8"><svg-icon icon-class="dxjl-yx" className="dxjl-svg" /></div>
              <div class="f-weight600">发送{{item.templateId.desc}}短信</div>
            </div>
            <div class="flex-row align-items-center pb-6 f-weight600">
              {{item.contact}} {{item.phone}}
              <el-tag class="ml-8" v-if="item.status.code == 2" size="small" effect="success">{{ item.status.desc }}</el-tag>
              <el-tag class="ml-8" v-else size="small" effect="danger">{{ item.status.desc }}</el-tag>
            </div>
            <div class="pb-6 color-4E5969 f12">失败原因：{{item.failureReason}}</div>
            <div class="pb-6 color-86909C f12">{{ item.createAt | formaDate("yyyy-MM-dd hh:mm:ss") }}</div>
            <div class="flex-row justify-content-between border-radius-2 f12 color-000 short-message-btn" v-if="item.status.code !== 4 && item.status.code !== 2">
              <span class="cursor-pointer" @click="handleRetry(item)">重发</span>
              <span class="cursor-pointer" @click="handleCancel(item)">取消</span>
            </div>
          </el-card>

        </el-scrollbar>
      </div>

      <div v-if="rightActive === 4">
        <div class="tab-content-title f16 f-weight600 pb-8">视频记录</div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
          <div v-for="(item,index) in communicationvideoRecord" :key="index">
            <div class="timeline-layout pt-16 pb-16" v-for="(itemrecord,index) in item.records" :key="index">
              <div class="timeline-layout-100 mb-16">
                <div class="flex-row justify-content-between">
                  <div class="flex-row">
                    <div>{{ itemrecord.createAt | formaDate('yyyy-MM-dd 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 == 2">
                      <i class="callvideo-icon"></i>
                    </div>
                  </div>
                  <!-- <span class="cursor-pointer"><i class="ml-8 f14 el-icon-edit"></i></span> -->
                </div>
                <div class="timeline-layout-w-records mt-8 mb-8">
                  <div class="flex-column align-items-start">
                    <div>
                      <span v-for="(itemperson,index) in itemrecord.linkedPersonInfo" :key="index" style="float: left;margin-bottom: 2px;">
                        {{ itemperson.name}}
                        <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;margin-top: 2px;" v-if="itemrecord.mediateStatus != null">{{ materialTypeOptions.find(item => item.value == itemrecord.mediateStatus).label }}</el-tag>
                  </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>
                <div>沟通备注：<span class="color-FF7D00">{{itemrecord.communicationRemarks}}</span></div>
              </div>
              <div class="timeline-layout-100 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 f12">
                  由于提供的通话记录内容非常有限且不包含具体的人物姓名、对话主旨、相关的时间和金额信息，无法形成有效的摘要。
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <div v-if="rightActive === 5">
        <div class="tab-content-title f16 f-weight600 pb-8">签字记录</div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">

          <el-card shadow="never" class="mt-8" v-for="(item, index) in WritRecord" :key="index">
            <div class="pb-6 color-86909C f12">{{ item.createAt | formaDate("yyyy-MM-dd hh:mm:ss") }}</div>
            <div class="mb-8 flex-row align-items-center border-radius-4 agreement-pdf">
              <a class="case-img"><img :src="imgPdf"/></a>
              <div class="ml-8">{{item.documentType.desc}}</div>
            </div>
            
            <div class="flex-row align-items-center">
              <div class="flex-row align-items-center mr-16" v-if="item.unsign!=''&&item.unsign!=null">{{item.unsign}}<el-tag class="ml-8" size="small" effect="danger">未签</el-tag></div>
              <div class="flex-row align-items-center" v-if="item.signed!=''&&item.signed!=null">{{item.signed}}<el-tag class="ml-8" size="small" effect="success">已签</el-tag></div>
            </div>
          </el-card>
        </el-scrollbar>
      </div>

      <div v-if="rightActive === 6">
        <div class="tab-content-title f16 f-weight600 pb-8">调解日志</div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
          <el-timeline class="padding-2">
            <el-timeline-item v-for="(item,index) in communicationLogRecord" :key="index" :timestamp="item.processDate" placement="top" type="primary">
              <el-card shadow="never">
                <div v-for="(item,index) in item.processList" :key="index" class="mb-8">{{ item.createAt | formaDate("hh:mm:ss") }} {{item.processContent}}</div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>

      <div v-if="rightActive === 7">
        <div class="tab-content-title f16 f-weight600 pb-8">质检评价</div>
        <el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
          <el-rate
              v-model="markNum"
              disabled>
          </el-rate>
          <div class="f12 f-weight600 pt-16 pb-8">主管评价</div>
          <div class="f12 pb-24">
            <div>法律知识扎实：</div>
            <div>团队成员精准引用法律法规，清晰阐释双方权利义务，如在 [法律争议点] 上，[调解员姓名] 凭借对 [法律条款] 的专业解读，推动调解进程，为调解奠定法律基础，增强权威性。</div>
          </div>
          <div class="f12 pb-24">
            <div>沟通技巧娴熟：</div>
            <div>成员善于与各类当事人交流，耐心倾听诉求与情感宣泄，营造信任氛围。面对情绪激动者，[调解员姓名] 巧妙安抚，展现出高沟通智慧与应变能力，有效避免矛盾激化。</div>
          </div>
          <div class="f12 pb-24">
            <div>谈判策略得当：</div>
            <div>团队精准把握双方利益诉求和底线，制定合理谈判策略。如在处理 [核心利益争议点] 时，采取 “求同存异、逐步递进” 策略，促成调解协议，彰显专业与经验。</div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <el-tooltip
        popper-class="custom-tooltip"
        effect="dark"
        content="触达记录"
        placement="left">
      <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
           @click="handleToggle(1)"
           :class="rightActive === 1 ?'active':''">
        <svg-icon :icon-class="rightActive === 1 ? `siderbar-1-active` : 'siderbar-1'" className="tabs-svg" />
      </div>
    </el-tooltip>
    <el-tooltip
        popper-class="custom-tooltip"
        effect="dark"
        content="沟通记录"
        placement="left">
      <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
           @click="handleToggle(2)"
           :class="rightActive === 2 ?'active':''">
        <svg-icon :icon-class="rightActive === 2 ? `siderbar-2-active` : 'siderbar-2'" className="tabs-svg" />
      </div>
    </el-tooltip>
    <el-tooltip
        popper-class="custom-tooltip"
        effect="dark"
        content="短信记录"
        placement="left">
      <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
           @click="handleToggle(3)"
           :class="rightActive === 3 ?'active':''">
        <svg-icon :icon-class="rightActive === 3 ? `siderbar-3-active` : 'siderbar-3'" className="tabs-svg" />
      </div>
    </el-tooltip>
    <el-tooltip
        popper-class="custom-tooltip"
        effect="dark"
        content="视频记录"
        placement="left">
      <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
           @click="handleToggle(4)"
           :class="rightActive === 4 ?'active':''">
        <svg-icon :icon-class="rightActive === 4 ? `siderbar-4-active` : 'siderbar-4'" className="tabs-svg" />
      </div>
    </el-tooltip>
    <el-tooltip
        popper-class="custom-tooltip"
        effect="dark"
        content="签字记录"
        placement="left">
      <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
           @click="handleToggle(5)"
           :class="rightActive === 5 ?'active':''">
        <svg-icon :icon-class="rightActive === 5 ? `siderbar-5-active` : 'siderbar-5'" className="tabs-svg" />
      </div>
    </el-tooltip>
    <el-tooltip
        popper-class="custom-tooltip"
        effect="dark"
        content="调解日志"
        placement="left">
      <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
           @click="handleToggle(6)"
           :class="rightActive === 6 ?'active':''">
        <svg-icon :icon-class="rightActive === 6 ? `siderbar-6-active` : 'siderbar-6'" className="tabs-svg" />
      </div>
    </el-tooltip>
    <el-tooltip
        popper-class="custom-tooltip"
        effect="dark"
        content="质检评价"
        placement="left">
      <div class="tab-icon flex-row justify-content-center align-items-center cursor-pointer"
           @click="handleToggle(7)"
           :class="rightActive === 7 ?'active':''">
        <svg-icon :icon-class="rightActive === 7 ? `siderbar-7-active` : 'siderbar-7'" className="tabs-svg" />
      </div>
    </el-tooltip>
    <!-- 文件预览 -->
    <showFile v-if="fileDialog" :fileDialog.sync="fileDialog"/>
  </div>
</template>

<script>
import tracapi from "@/services/eventTracingApi";
import api from "@/services/caseManagement";
import contactPerson from "@/services/contactPerson";
export default {
  name: "SidebarTool",
  components: {
    showFile: () => import('../../../components/showFile.vue'),//
    uploadFile: () => import('@/components/uploadFile.vue'),//上传
  },
  props: {
    caseId: {
      type: String,
      default: () => {
        return ''
      },
    },

  },
  watch: {
    caseId: {
      handler(val) {
        this.getmediate_record()
      },
      immediate: true,
      deep: true
    },
  },
  data(){
    return{
      fileDialog:null,
      materialTypeOptions: this.$util.getMediationprogress(),
      rightActive: 0,
      imgPdf: require('@/assets/image/util/pdf_img.jpg'),
      markNum: 4,
      mediatetraceRecord:[],
      communicationRecord: [],
      communicationvideoRecord:[],
      communicationLogRecord:[],
      smsRecord:[],
      WritRecord:[],
    }
  },
  computed: {
    contentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 57 - 63
    },
  },
  methods: {
    handleToggle(val){
      if (this.rightActive === val){
        this.rightActive = 0;
      }else {
        this.rightActive = val;
      }
      if(this.rightActive == 1)
      {
        this.getmediatetrace_record()
      }
      if(this.rightActive == 2)
      {
        this.getmediate_record()
      }
      if(this.rightActive == 3)
      {
        this.getsmsList()
      }
      if(this.rightActive == 4)
      {
        this.getvideomediate_record()
      }
      if(this.rightActive == 5)
      {
        this.getWritCaseList()
      }
      if(this.rightActive == 6)
      {
        this.getCaseLogsList()
      }
    },
    // 获取触达记录
    getmediatetrace_record(){
      api.traceRecord_list({id:this.caseId}).then(res => {
        if (!res.code) {
          this.mediatetraceRecord = res
          console.log(this.mediatetraceRecord,'mediatetraceRecordmediatetraceRecord')
        }
      })
    },
    // 获取调解记录
    getmediate_record() {
      api.mediate_record_list({
        caseId:this.caseId,
        linkedWay:'1'
      }).then(res => {
        if (!res.code) {
          this.communicationRecord = res
        }
      })
    },
    // 获取视频调解记录
    getvideomediate_record() {
      api.mediate_record_list({
        caseId:this.caseId,
        linkedWay:'2'
      }).then(res => {
        if (!res.code) {
          this.communicationvideoRecord = res
        }
      })
    },
    // 短信列表数据
    getsmsList() {
      tracapi.posttrace_sms_detail({size:100,current:1,caseId:this.caseId}).then(res => {
        if (!res.code) {
          this.smsRecord = res.records;
        }
      })
    },
    handleRetry(row) {
      this.$confirm("确定重试?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        api.smsRetry({id: row.id}).then(res => {
          this.getsmsList(1);
          this.$message.success("成功");
        })
      }).catch(() => {});
    },
    handleCancel(row) {
      this.$confirm("确定取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        api.smsCancel({id: row.id}).then(res => {
          this.getsmsList(1);
          this.$message.success("成功");
        })
      }).catch(() => {});
    },
    // 签字记录列表数据
    getWritCaseList() {
      tracapi.posttrace_sign_detail({size:100,current:1,caseId:this.caseId}).then(res => {
          if (!res.code) {
            this.WritRecord = res.records;
          }
      })
    },
    // 获取调解日志
    getCaseLogsList() {
      api.mediate_record_log({id:this.caseId}).then(res => {
        if (!res.code) {
          this.communicationLogRecord = res
        }
      })
    },
    handleCaseShowFile(item) {
      //查看录音录像文件相关
      this.$fetchApi.viewFullFile({path: item}).then((res) => {
        this.fileDialog = {showfile: {url: item,fullUrl: res}, filelist: []}
      });
    },

  }
}
</script>

<style scoped lang="scss">
.padding-2{
  padding: 16px 0 16px 2px !important;
}

.sidebar-tab{
  width: 40px;
  .tab-content{
    position: absolute;
    top: 57px;
    right: 40px;
    width: 280px;
    z-index: 100;
    background-color: #ffffff;
    border-left: 1px solid #E5E6EB;
  }

  .tab-icon{
    width: 100%;
    height: 40px;
    .tabs-svg{
      width: 18px;
      height: 18px;
    }
  }
  .active {
    background-color: #ffffff;
  }
}
//
.timeline-layout{
  border-top: 1px solid #F2F3F5;
  .timeline-layout-100{
    width: 100%;
    .icon-bg{
      width: 20px;
      height: 20px;

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

    .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%);
    .ai-logo-img{
      width: 29px;
      height: 29px;
      background: url('~@/assets/image/ai-logo.png') no-repeat;
      background-size: 100%,100%;
    }
  }
}

// 短信记录
.dxjl-svg{
  width: 18px;
  height: 18px;
}
.short-message-btn{
  padding: 8px 16px;
  background-color: #F2F3F5;
}

// 签字记录
.agreement-pdf{
  background-color: #F2F3F5;
  padding: 6px 12px;
  .case-img {
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    img {
      width: 24px;
      height: 24px;
    }
  }
}

// 评分
::v-deep .el-rate{
  .el-rate__item{
    .el-rate__icon{
      font-size: 25px;
    }
  }
}

</style>