<template>
  <div class="manage-container">
    <div class="manage-wrap">
      <div class="manage-button">
        <el-form-item width="100">
          <el-input
            v-model="queryForm.title"
            placeholder="请输入标题"
          ></el-input>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button
            v-if="isBtnPerm('/knowledge/insert')"
            type="primary"
            size="small"
            @click="handleKnowledgeAdd"
          >
            添加知识库
          </el-button>
          <el-button
            v-if="isBtnPerm('/knowledge/remove')"
            type="primary"
            size="small"
            @click="handleKnowledgeDels"
          >
            批量删除知识库
          </el-button>
        </el-form-item>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <h1 style="margin-top: 0">知识库分类</h1>
          <el-button type="text" @click="clockCheck">取消选择</el-button>
          <el-tree
            :data="typeData"
            :props="defaultProps"
            :default-expand-all="true"
            :expand-on-click-node="false"
            show-checkbox
            check-strictly
            accordion
            node-key="id"
            @check="handleCheckChange"
            ref="tree"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-table
            :data="knowledgeData"
            style="width: 100%; margin-bottom: 20px"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              width="300"
              align="center"
            ></el-table-column>
            <el-table-column prop="introduction" label="简介" align="center">
              <template #default="{ row }">
                <span v-html="row.introduction"></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="category"
              label="分类"
              align="center"
              width="100"
            >
              <template #default="{ row }">
                <span>{{ row.category.categoryName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              align="center"
              width="100"
            >
              <template #default="{ row }">
                <span>{{ row.type.dataValue }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="280"
              align="center"
            >
              <template #default="{ row }">
                <el-button
                  v-if="row.type.dataCode === '1'"
                  type="text"
                  @click="showWord(row)"
                >
                  查看
                </el-button>
                <el-button
                  v-if="row.type.dataCode !== '0'"
                  type="text"
                  @click="download(row)"
                >
                  下载
                </el-button>
                <el-button
                  v-if="isBtnPerm('/knowledge/update')"
                  type="text"
                  @click="handleKnowledgeEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-if="isBtnPerm('/knowledge/remove')"
                  type="text"
                  @click="handleKnowledgeDel(row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :background="background"
            :current-page="queryForm.page"
            :layout="layout"
            :page-size="queryForm.size"
            :total="total"
            style="text-align: right"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <add-knowledge ref="knowledge"></add-knowledge>
    <show-file ref="file"></show-file>
  </div>
</template>

<script>
import {
  doDelete,
  doTypeDel,
  getKnowledgeList,
  getTypeCategoryTree,
} from '@/api/knowledge';
import addKnowledge from './components/knowledge/add';
import { baseURL } from '@/config/net.config';
import showFile from '@/views/dev/knowledge/components/knowledge/showFile.vue';
export default {
  components: {
    addKnowledge,
    showFile,
  },
  data() {
    return {
      typeData: [],
      deptData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      currentNodeKey: '',
      knowledgeData: [],
      queryForm: {
        category: '',
        title: '',
        page: 1,
        size: 20,
      },
      background: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      ids: [],
    };
  },
  created() {
    this.getKnowledgeList();
    this.getTypeCategoryTree();
  },
  methods: {
    showWord(row) {
      var filePath = baseURL + '/static/img/' + row.annex;
      var parts = filePath.split('.');
      var extension = parts.pop().toLowerCase();
      console.log(extension);
      this.$refs.file.showFileView({
        src: filePath,
        type: extension,
      });
    },
    download(row) {
      window.open(baseURL + '/static/img/' + row.annex);
    },
    // 分类树
    async getTypeCategoryTree() {
      const { data } = await getTypeCategoryTree();
      this.typeData = data;
    },
    // 单选
    handleCheckChange(data, node, self) {
      // 如果已经选中了一个节点，则取消选择
      if (this.currentNodeKey?.label && this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([]);
        // 更新当前选中节点的 key
        this.$refs.tree.setCheckedNodes([data]);
      }
      // 更新当前选中节点的 key
      this.currentNodeKey = data;
      this.queryForm.category = data.id;
      this.getKnowledgeList();
    },
    search() {
      this.getKnowledgeList();
    },
    // 取消选择
    clockCheck() {
      this.queryForm.category = '';
      this.currentNodeKey = '';
      this.$refs.tree.setCheckedKeys([]);
      this.getKnowledgeList();
    },
    // 知识库列表查询
    async getKnowledgeList() {
      const { data } = await getKnowledgeList(this.queryForm);
      this.knowledgeData = data.items;
      this.total = data.total;
    },
    // 添加知识库
    handleKnowledgeAdd() {
      this.$refs.knowledge.showEdit();
    },
    // 编辑知识库
    handleKnowledgeEdit(row) {
      this.$refs.knowledge.showEdit(row);
    },
    handleSelectionChange(val) {
      const ids = [];
      val.forEach(row => {
        ids.push(row.id);
      });
      this.ids = ids;
    },
    // 批量删除知识库
    handleKnowledgeDels() {
      if (this.ids == '') {
        this.$message({
          type: 'info',
          message: '请选择要删除的数据',
        });
      } else {
        this.knowledgeRemove(this.ids);
      }
    },
    // 删除知识库
    handleKnowledgeDel(row) {
      this.knowledgeRemove([row.id]);
    },
    knowledgeRemove(ids) {
      this.$confirm('你确定要删除当前项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { msg } = doDelete(ids);
          this.$message({
            type: 'success',
            message: msg == undefined ? '删除成功' : msg,
          });
          const that = this;
          setTimeout(function () {
            that.getKnowledgeList();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    handleQuery() {
      this.queryForm.page = 1;
      this.getKnowledgeList();
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.getKnowledgeList();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.getKnowledgeList();
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .el-input {
    width: 200px !important;
  }
  .el-select {
    width: 200px !important;
  }
  .manage-button {
    padding-left: 12px;
  }
}
</style>
