<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-scrollbar>
      </div>
      <div v-if="rightActive === 2">
        <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="XXX"
        placement="right">
      <div class="tab-icon flex-row justify-content-center align-items-center"
           @click="rightActive === 1 ?  rightActive = 0 : rightActive = 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="XXX"
        placement="right">
      <div class="tab-icon flex-row justify-content-center align-items-center"
           @click="rightActive === 2 ?  rightActive = 0 : rightActive = 2"
           :class="rightActive === 2 ?'active':''">
        <svg-icon :icon-class="rightActive === 2 ? `siderbar-2-active` : 'siderbar-2'" 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
    }
  },
  computed: {
    contentHeight() {
      let oh = document.documentElement.clientHeight;
      return oh - 57 - 63
    },
  },
}
</script>

<style scoped lang="scss">
.sidebar-tab{
  width: 40px;
  .tab-content{
    position: absolute;
    top: 57px;
    right: 40px;
    width: 260px;
    background-color: #ffffff;
    border-left: 1px solid #E5E6EB;
  }

  .tab-icon{
    width: 100%;
    height: 40px;
    .tabs-svg{
      width: 18px;
      height: 18px;
    }
  }
  .active {
    background-color: #ffffff;
  }
}
</style>