<template>
  <el-drawer title="知识文档" :visible.sync="drawerDetail" :wrapperClosable="false" ref="drawerDetail"
    size="100%" :before-close="handleDrawerClose" class="JNPF-common-drawer" append-to-body>
    <div class="JNPF-flex-main">
      <div class="box">
        <div class="title">
          <h1>{{ dataForm.title }}</h1>
        </div>
        <div class="publishTime">发布时间：{{ dataForm.publishTime }}</div>
        <div class="label">
          <el-tag style="margin-right: 10px;" v-for="item in dataForm.labelList"
            :key="item">{{ item }}</el-tag>
        </div>
        <div class="content">
          <div v-html="dataForm.content"></div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.box {
  margin: 20px 0 20px 50px;
}
.content {
  width: 100%;
  margin-top: 20px;
  height: 70vh;
  overflow-y: auto;
}
.label {
  margin-top: 20px;
}
</style>

<script>
import { getKnowledgeInfo } from "@/api/governmentCloud/knowledgeBase/knowledgeBase";

export default {
  data() {
    return {
      drawerDetail: false,
      loading: false,
      dataForm: {
        id: "",
        title: "",
        label: "",
        content: "",
        publishTime: null,
        relatedKnowledgeList: [],
        labelList: []
      },
    };
  },
  methods: {
    init(id) {
      this.drawerDetail = true
      this.loading = true
      getKnowledgeInfo(id).then(res => {
        this.dataForm = res.data
        this.dataForm.labelList = JSON.parse(this.dataForm.label) || []
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleDrawerClose(done) {
      done();
    }
  },
};
</script>
