<template>
  <div class="wrap">
    <!-- <div class="top-line">
      <div style="float: right; margin: 15px 15px 15px 0px">
        <el-dropdown>
          <el-button type="primary">
            操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>编辑</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div> -->

    <div class="main">
      <div class="list">
        <div class="title">
          <p>
            <el-icon style="margin-right: 3px; vertical-align: -15%"><Tickets /></el-icon>
            {{ defaultInfo.title }}
            <span>{{ defaultInfo.reason }}</span>
          </p>
        </div>
        <div class="model-info">
          <span>
            <el-icon style="margin-right: 5px; vertical-align: -15%"><User /></el-icon>作者：{{
              defaultInfo.createBy
            }}
          </span>
          <span>
            <el-icon style="margin-right: 5px; vertical-align: -15%"><Clock /></el-icon>发布于：{{
              defaultInfo.createTime
            }}
          </span>
        </div>
        <div class="content-mode">
          <div class="category">
            <el-icon style="margin-right: 5px; vertical-align: -15%"><Tickets /> </el-icon
            >分类：<span>{{ defaultInfo.categoryname }}</span>
            <el-icon><Discount /></el-icon>标签：<span>{{ defaultInfo.labelname }}</span>
            <el-icon style="margin-right: 5px; vertical-align: -15%"><Tickets /> </el-icon
            >目录分类：<span>{{ defaultInfo.directoryname }}</span>
          </div>
          <div class="content-txt">
            <div class="ql-editor" v-html="defaultInfo.content"></div>
          </div>
          <!-- <div class="time">
            <el-icon style="margin-right: 3px"><Clock /></el-icon>
            <span>最后更新：</span>2023-09-25
          </div> -->
        </div>
      </div>
    </div>
    <div class="attachment">
      <div class="title">
        <span style="width: 50%; float: left">
          <el-icon style="margin-right: 5px; vertical-align: -15%"><Link /></el-icon>附件
        </span>
        <!-- <span style="width: 50%; text-align: right">
          <el-button :icon="Download" text>
            <el-icon><Download /></el-icon>下载全部
          </el-button>
        </span> -->
      </div>
      <div class="file-lists">
        <div class="file-items">
          <div class="file-items-t">
            <img class="img" src="@/assets/images/dark.svg" />
            <p class="titleFile">{{ fileInfo.originalName }}</p>
            <span style="color: rgb(92, 96, 101); font-size: 13px"
              >大小：{{ fileInfo.fileSize }} B</span
            >
          </div>
          <div class="file-items-b">
            <span class="highlight" v-if="imgData.indexOf(fileInfo.fileType) !== -1">
              <el-icon><View /></el-icon>
              <a :href="fileUrl" download target="view——window" style="margin-left: 8px">预览</a>
            </span>
            <span class="highlight" v-if="imgData.indexOf(fileInfo.fileType) === -1">
              <el-icon><Download /></el-icon>
              <a @click="fetchExportBill(fileUrl, fileInfo.originalName)" style="margin-left: 8px"
                >下载</a
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="KnowledgeDetail">
  import { fetchExportBill } from '@/utils';
  import { getPageDetail } from '@/api/main/system/system';
  import { watch } from 'vue';

  const docId = ref('');
  const defaultInfo = ref({});
  const fileInfo = ref({});
  const fileUrl = ref('');
  const imgData = ref(['jpg', 'png']);
  onUpdated(() => {
    docId.value = useRouter().currentRoute.value.query.docId;
  });
  watch(docId, (newValue) => {
    docId.value = newValue;
    getKnowledgeDetail(newValue);
  });
  onMounted(() => {
    docId.value = useRouter().currentRoute.value.query.docId;
  });
  function getKnowledgeDetail(docId) {
    getPageDetail('/km/doc/' + docId).then((data) => {
      if (data.data) {
        defaultInfo.value = data.data;
        if (data.data.fileId) {
          getPageDetail('/km/docfile/' + data.data.fileId).then((data) => {
            console.log(data);
            fileInfo.value = data.data;
            console.log(fileInfo.value.fileType);
            fileUrl.value = import.meta.env.VITE_APP_BASE_API + data.data.physicalPath;
          });
        }
      }
    });
  }
  function delHtmlTag(str) {
    const resultStr = decodeURIComponent(str);
    return resultStr.replace(/<[^>]+>/g, ''); //去掉所有的html标记
    // const resultStr = decodeURIComponent(str);
    // return resultStr.replace(/<[^>]+>/g, ''); //去掉所有的html标记
  }
</script>

<style lang="scss" scoped>
  .wrap {
    background: #f0f2f5;
    .top-line {
      overflow: hidden;
    }
    .attachment {
      background: #fff;
      margin: 15px 0 15px 0;
      border-radius: 5px;
      .title {
        font-size: 16px;
        color: #000c17;
        font-weight: bolder;
        margin-bottom: 0;
        padding: 13px;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        span {
          display: inline;
        }
      }
      .file-lists {
        margin-top: 10px;
        padding: 10px;
        .file-items {
          margin-right: 1%;
          width: 32%;
          display: inline-block;
          border-radius: 5px;
          margin-bottom: 10px;
          padding: 10px;
          .file-items-t {
            overflow: hidden;
            .img {
              float: left;
              width: 33px;
              height: 43px;
              float: left;
              margin-right: 10px;
            }
            .titleFile {
              font-size: 14px;
              color: #000;
              margin-bottom: 2px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .file-items-b {
            font-size: 12px;
            padding: 3px 8px;
            height: 28px;
            line-height: 28px;
            margin-right: 5px;
            color: #5c6065;
            .highlight {
              padding: 0 15px;
              color: #000c17;
              cursor: pointer;
            }
          }
        }
      }
    }
    .main {
      background: #fff;
      border-radius: 5px;
      text-align: left;
      width: 100%;
      .list {
        list-style: none;
        padding: 20px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        .title {
          font-size: 16px;
          font-weight: bolder;
          cursor: pointer;
          color: #000c17;
        }
        .model-info {
          span {
            margin-right: 15px;
            color: #666;
          }
        }
        .content-mode {
          border-radius: 5px;
          margin-top: 5px;
          padding: 10px 15px;
          .category {
            color: #9e9e9e;
            font-size: 12px;
            span {
              background: #f4f4f4;
              font-size: 12px;
              padding: 3px 8px;
              border-radius: 5px;
              height: 28px;
              line-height: 28px;
              margin-right: 5px;
              color: #5c6065;
            }
          }
          .content-txt {
            margin-top: 5px;
            border: none;
            font-size: 15px;
            height: auto;
            .ql-editor {
              box-sizing: border-box;
              color: rgb(0, 0, 0);
              line-height: 1.42;
              height: 100%;
              outline: none;
              overflow-y: auto;
              padding: 12px 15px;
              tab-size: 4;
              -moz-tab-size: 4;
              text-align: left;
              white-space: pre-wrap;
              word-wrap: break-word;
            }
          }
        }
      }
    }
  }
</style>
