<template>
  <el-dialog
    :visible.sync="dialogShow"
    title=""
    width="1000px"
    append-to-body>
    <div class="k-div">
      <div class="k-title">
        {{ knowledge.kName }}
      </div>
      <div class="k-subtitle">
        <div>所属类别:{{ knowledge.kTypeName }}</div>
        <div>发布人:{{ knowledge.publisherName }}</div>
        <div>权属单位:{{ knowledge.deptName }}</div>
        <div>发布时间:{{ knowledge.publishTime }}</div>
      </div>
      <el-scrollbar class="k-content">
        <div>
          {{ knowledge.kInfo }}
        </div>
      </el-scrollbar>
      <div v-show="fileList.length>0" class="k-files" >
        <div class="k-files-name">附件:</div>
        <div class="k-files-content">
          <div v-for="file in fileList" :key="file.url">
            <!-- {{ file.name }} -->
            <a :href="file.url" target="_blank">{{ file.name }}</a>
          </div>
        </div>
      </div>
      <div class="check-content" style="text-align: left">
        <div>审核状态: {{ knowledge.checkStatusName }}</div>
        <div v-show="knowledge.checkStatus!='0'">审核意见: {{ knowledge.notes }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { knowledgeDetail } from '@/api/knowledge'
export default {
  name: 'KnowledgeDetail',
  data() {
    return {
      knowledge: {
        kName: '',
        kTypeName: '',
        publisherName: '',
        kInfo: '',
        publishTime: '',
        deptName: '',
        file: '',
        checkStatusName: "",
        notes: ''
      },
      staticPath: process.env.BASE_API + '/static/',
      fileList: [],
      dialogShow: false
    }
  },
  methods: {
    //  初始化对话框
    initDialog(row) {
      this.dialogShow = true
      this.fetchKnowledge(row.kId)
    },
    // 请求详情
    fetchKnowledge(id) {
      knowledgeDetail(id).then(response => {
        if (response.code === 200) {
          this.knowledge = response.data
          // 处理fileList
          if (response.data.file && response.data.file !== '') {
            const file_strs = response.data.file.split(';')
            const fileList = []
            for (const item of file_strs) {
              const strs = item.split(':')
              fileList.push({
                name: strs[0],
                url: this.staticPath + strs[1]
              })
            }
            this.fileList = fileList
          } else {
            this.fileList = []
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.k-div{
  text-align: center;
  padding: auto 20px;
  .k-title{
    color:#3a8ee6;
    font-size:25px;
    line-height: 25px;
  }
  .k-subtitle{
    margin-top: 15px;
    line-height: 1.5;
  }
  .k-content{
    text-align: justify;
    margin-top: 20px;
    font-size:16px;
    line-height: 20px;
    text-indent:25px;
    height:220px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .k-files{
    text-align: left;
    display: flex;
    align-items: flex-start;
    .k-files-name{
      margin-left: 25px;
      margin-right: 10px;
    }
    .k-files-content{
      flex: 1;
      a{
        color:#3a8ee6;
        line-height:1.5
      }
    }
  }
  .check-content{
    text-align: left;
    margin-left: 25px;
    margin-top:10px;
    line-height: 1.55;
  }
}
</style>

<style rel="stylesheet/scss" lang="scss">
  .k-content {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>