<template>
  <div class="detail">
    <div class="file-list">
      <div class="head" @click="$router.back()">
        <a-icon type="left" class="a-icon"/>
        <span class="title">返回知识库</span>
      </div>
      <p class="system-title">文档列表</p>
      <div class="file-item" v-for="(item, index) in fileList" :key="index" :class="currentFileId==item.id?'active':''"
           @click="switchFile(item.id)">
        <a-tooltip placement="top">
          <template slot="title">
            <span>{{ item.name }}</span>
          </template>
          <span class="file-name">{{ item.name }}</span>
        </a-tooltip>
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(item.id)">
          <a-icon type="delete"/>
        </a-popconfirm>
      </div>
    </div>
    <div class="file-content">
      <div class="file-head">
        <img src="../../assets/system.png" class="icon-file"/>
        <p class="file-title">文档内容</p>
      </div>
      <div class="file-content-box">
        <div class="file-content-item" v-for="(item, index) in currentFile" :key="index">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {documentDetail, documentFileDelete, documentFileDetail} from "../../api";

export default {
  name: 'detail',
  data() {
    return {
      id: '',
      fileList: [],
      currentFileId: '',
      currentFile: []
    }
  },
  created() {
    this.id = this.$route.query && (this.$route.query.id)
    this.getDetail()
  },
  methods: {
    async handleDelete(id) {
      try {
        const res = await documentFileDelete({
          fileId: id,
          documentId: this.id
        })
        if (res.code === 200) {
          this.$message.success(res.message)
          await this.getDetail()
        } else {
          this.$message.error(res.message)
        }
      } catch (e) {
        throw e
      }

    },
    async getDetail() {
      try {
        const res = await documentDetail(this.id)
        if (res.code === 200) {
          this.fileList = res.data
          if (this.fileList.length) {
            this.currentFileId = this.fileList[0].id
            this.getDocumentFileDetail()
          }
        } else {
          this.$message.error(res.message)
        }
      } catch (e) {
        throw e
      }
    },
    switchFile(id) {
      this.currentFileId = id
      this.getDocumentFileDetail()
    },
    async getDocumentFileDetail() {
      try {
        const result = await documentFileDetail({
          fileId: this.currentFileId,
          documentId: this.id
        })
        if (result.code === 200) {
          this.currentFile = result.data
        }
      } catch (e) {
        throw e
      }
    }
  }
}
</script>

<style scoped lang="less">
.detail {
  width: 100%;
  height: 100%;
  display: flex;

  .head {
    margin-bottom: 14px;
    text-align: left;
    margin-top: 12px;

    .a-icon {
      cursor: pointer;
      color: #a1a1aa;
    }

    .title {
      font-family: Poppins, Poppins;
      font-weight: 400;
      font-size: 16px;
      color: #a1a1aa;
      line-height: 19px;
      text-align: left;
      font-style: normal;
    }
  }
.system-title{
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  line-height: 23px;
  text-align: left;
  font-style: normal;
  position: relative;
  margin-bottom: 20px;
}

  .file-list {
    display: flex;
    flex-direction: column;
    width: 220px;
    height: 100%;
    overflow-y: auto;
    background: #18181b;
    border-radius: 5px;

    .file-item {
      min-height: 50px;
      height: 50px;
      margin-right: 5px;
      display: flex;
      align-items: center;
      color: #a1a1aa;
      justify-content: center;
      cursor: pointer;
      padding: 0 5px 6px;
      border-bottom: 1px solid #27272a;

      .file-name {
        flex: 1;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        text-align: left;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
      }

      &.active {
        font-weight: bold;
        color: #ef4444;
      }

      & + .file-item {
        margin-top: 10px;
      }

      .file-name {

      }
    }
  }

  .file-content {
    flex: 1;
    margin-left: 10px;
    background: #18181b;
    border-radius: 5px;
    padding: 46px 10px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .file-head{
      border-bottom: 1px solid #27272a;
      display: flex;
      .icon-file{
        width: 23px;
        height: 23px;
        margin-right: 6px;
      }
      .file-title{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
        line-height: 23px;
        margin-bottom:12px;
        text-align: left;
        font-style: normal;
      }
    }
    .title {
      text-align: left;
      font-size: 16px;
      color: #000;
      margin-bottom: 10px;
      position: relative;
      padding-left: 14px;

      &::before {
        content: "";
        position: absolute;
        top: 2px;
        height: 20px;
        left: 0;
        bottom: 0;
        border-right: 3px solid #1890ff;
        transform: scaleY(1);
        opacity: 1;
        transition: transform .15s cubic-bezier(.645, .045, .355, 1), opacity .15s cubic-bezier(.645, .045, .355, 1);
      }
    }
    .file-content-box{
      // flex: 1;
      height: 480px;
      padding:16px 14px 24px 20px;
      overflow-y: scroll;
      text-align: left;
      text-indent:2em;
      margin-top: 20px;
      border: 1px solid #27272a;
      color: #ffffff;
      border-radius: 4px;
      &::-webkit-scrollbar {
        width: 8px;
      }
      &::-webkit-scrollbar-thumb {
        background: #3f3f46; // 滑块颜色
        border-radius: 5px; // 滑块圆角
      }
      .file-content-item {
        padding: 10px 0;

        & + .file-content-item {
          border-top: 1px dashed #27272a;
        }
      }
    }
  }
}


//删除pop-up样式
:deep(.ant-popover) {  
  .ant-popover-content {
    .ant-popover-inner {
      background-color: #18181b !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
      
      .ant-popover-inner-content {
        color: #ffffff !important;
      }

      .ant-popover-message {
        color: #ffffff !important;
        
        .anticon-exclamation-circle {
          color: #ef4444 !important;
        }
      }

      .ant-popover-buttons {
        .ant-btn {
          &.ant-btn-default {
            background: #3f3f46 !important;
            border-color: #3f3f46 !important;
            color: #ffffff !important;
            
            &:hover {
              background: #52525b !important;
            }
          }
          
          &.ant-btn-primary {
            background: #ef4444 !important;
            border-color: #ef4444 !important;
            color: #ffffff !important;
            
            &:hover {
              background: #dc2626 !important;
            }
          }
        }
      }
    }

    .ant-popover-arrow {
      &::after {
        background-color: #18181b !important;
        box-shadow: none !important;
      }
    }
  }
}

</style>