<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 timestamp="2018/4/12" placement="top" type="primary">
              <el-card shadow="never">
                <div class="mb-8">09:36 李四上传还款凭证</div>
                <div class="mb-8">09:33 李四对调解协议进行了电子签名</div>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/3" placement="top" type="primary">
              <el-card shadow="never">
                <div>09:27 李四浏览了案件材料信息</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 class="timeline-layout pt-8">
            <div class="timeline-layout-100 mb-16">
              <div class="flex-row justify-content-between">
                <div class="flex-row">
                  <div>17:15:00</div>
                  <div class="pl-8 pr-8">
                    陈陈陈
                  </div>
                  <!-- 电话 -->
                  <div class="text-center icon-bg icon-phone">
                    <i class="callphone-icon"></i>
                  </div>
                  <!--                  <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">-->
                  <!--                    <i v-if="itemrecord.callWay == 1" 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 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>
                <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-row align-items-center">
                  <div>
                    <span>
                      陈继平 134****9447
                      <el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
                    </span>
                  </div>
                  <el-tag size="small" effect="plain">重点客户</el-tag>
                  <!--                  <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.labelName}}</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 >通话1秒</div>
                  <el-divider direction="vertical"></el-divider>
                  <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>
                </div>
                <!--                <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">-->
                <!--                  <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>-->
                <!--                  <el-divider direction="vertical"></el-divider>-->
                <!--                  <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>-->
                <!--                </div>-->
                <!-- 视频 -->
                <!--                <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">-->
                <!--                  <div>视频{{itemrecord.linkedDuration}}秒</div>-->
                <!--                  <el-divider direction="vertical"></el-divider>-->
                <!--                  <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div>-->
                <!--                </div>-->
                <!-- 微信 -->
                <!--                <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">-->
                <!--                  &lt;!&ndash; <div>通话44秒</div> &ndash;&gt;-->
                <!--                  <el-divider direction="vertical"></el-divider>-->
                <!--                  <div class="text-center cursor-pointer">查看文件</div>-->
                <!--                </div>-->
              </div>
              <div>沟通备注：<span class="color-FF7D00">111</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>
        </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 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">向被申请人发送通知短信</div>
            </div>
            <div class="flex-row align-items-center pb-6 f-weight600">
              李四 134****9447
              <el-tag class="ml-8" size="small" effect="danger">失败</el-tag>
            </div>
            <div class="pb-6 color-4E5969 f12">原因：描述描述描述描述描述描述描述描述描述描述描述</div>
            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
            <div class="flex-row justify-content-between border-radius-2 f12 color-000 short-message-btn">
              <span class="cursor-pointer">修改手机号</span>
              <span class="cursor-pointer">重发</span>
              <span class="cursor-pointer">忽略</span>
            </div>
          </el-card>
          <el-card 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">向被申请人发送通知短信</div>
            </div>
            <div class="flex-row align-items-center pb-6 f-weight600">
              李四 134****9447
              <el-tag class="ml-8" size="small" effect="success">成功</el-tag>
            </div>
            <div class="pb-6 color-4E5969 f12">原因：描述描述描述描述描述描述描述描述描述描述描述</div>
            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</div>
            <div class="flex-row justify-content-between border-radius-2 f12 color-000 short-message-btn">
              <span class="cursor-pointer">修改手机号</span>
              <span class="cursor-pointer">重发</span>
              <span class="cursor-pointer">忽略</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 class="timeline-layout pt-8">
            <div class="timeline-layout-100 mb-16">
              <div class="flex-row justify-content-between">
                <div class="flex-row">
                  <div>17:15:00</div>
                  <div class="pl-8 pr-8">
                    陈陈陈
                  </div>
                  <!-- 视频 -->
                  <div class="text-center icon-bg icon-phone">
                    <i class="callvideo-icon"></i>
                  </div>
                  <!--                  <div class="text-center icon-bg icon-phone" v-if="itemrecord.linkedWay == 1">-->
                  <!--                    <i v-if="itemrecord.callWay == 1" 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 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>
                <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-row align-items-center">
                  <div>
                    <span>
                      陈继平 134****9447
                      <el-tag class="mr-8" size="small" effect="plain">本人</el-tag>
                    </span>
                  </div>
                  <el-tag size="small" effect="plain">重点客户</el-tag>
                  <!--                  <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.labelName}}</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 >视频1秒</div>
                  <el-divider direction="vertical"></el-divider>
                  <div class="text-el-icon-video-play"><i class="f14 el-icon-video-play"></i> 播放视频</div>
                </div>
                <!--                <div v-if="itemrecord.linkedWay == 1" class="flex-row align-items-center pt-6">-->
                <!--                  <div v-if="itemrecord.linkedType == 1">通话{{itemrecord.linkedDuration}}秒</div>-->
                <!--                  <el-divider direction="vertical"></el-divider>-->
                <!--                  <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放录音</div>-->
                <!--                </div>-->
                <!-- 视频 -->
                <!--                <div v-if="itemrecord.linkedWay == 2" class="flex-row align-items-center pt-6">-->
                <!--                  <div>视频{{itemrecord.linkedDuration}}秒</div>-->
                <!--                  <el-divider direction="vertical"></el-divider>-->
                <!--                  <div class="text-center cursor-pointer"><i class="f14 el-icon-video-play"></i> 播放视频</div>-->
                <!--                </div>-->
                <!-- 微信 -->
                <!--                <div v-if="itemrecord.linkedWay == 3" class="flex-row align-items-center pt-6">-->
                <!--                  &lt;!&ndash; <div>通话44秒</div> &ndash;&gt;-->
                <!--                  <el-divider direction="vertical"></el-divider>-->
                <!--                  <div class="text-center cursor-pointer">查看文件</div>-->
                <!--                </div>-->
              </div>
              <div>沟通备注：<span class="color-FF7D00">111</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>
        </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">
            <div class="f-weight600 pb-6">(2022)川092701民诉02号</div>
            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</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">调解协议.PDF</div>
            </div>
            <div class="flex-row align-items-center">
              <div class="flex-row align-items-center mr-16">张三<el-tag class="ml-8" size="small" effect="danger">未签</el-tag></div>
              <div class="flex-row align-items-center">李四<el-tag class="ml-8" size="small" effect="success">已签</el-tag></div>
            </div>
          </el-card>
          <el-card shadow="never" class="mt-8">
            <div class="f-weight600 pb-6">(2022)川092701民诉02号</div>
            <div class="pb-6 color-86909C f12">2024-11-29 21:15:05</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">调解协议.PDF</div>
            </div>
            <div class="flex-row align-items-center">
              <div class="flex-row align-items-center mr-16">张三<el-tag class="ml-8" size="small" effect="danger">未签</el-tag></div>
              <div class="flex-row align-items-center">李四<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 timestamp="2024-12-09" placement="top" type="primary">
              <el-card shadow="never">
                <div class="mb-8">09:36 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:还款计划通知</div>
                <div class="mb-8">09:33 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:调解通知</div>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2024-12-08" placement="top" type="primary">
              <el-card shadow="never">
                <div>09:27 刘二向被申请人李四发送了短信。发送状态:发送中;短信类型:还款计划通知</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-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>
  </div>
</template>

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

  },
  data(){
    return{
      rightActive: 0,
      imgPdf: require('@/assets/image/util/pdf_img.jpg')
    }
  },
  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;
      }
    },

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

</style>