<template>
  <div class="manage-container">
    <vab-query-form>
      <el-button
        v-if="isBtnPerm('/knowledgeCategory/add')"
        type="primary"
        @click="handleAdd"
      >
        添加分类
      </el-button>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :data="typeData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="id"
        label="ID"
        sortable
        width="180"
      ></el-table-column>
      <el-table-column
        prop="label"
        label="分类名称"
        sortable
        width="180"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template #default="{ row }">
          <el-button
            v-if="isBtnPerm('/knowledgeCategory/update')"
            type="text"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="isBtnPerm('/knowledgeCategory/delete')"
            type="text"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-type ref="type"></add-type>
  </div>
</template>
<script>
import addType from './components/add';
import { doTypeDel, getTypeCategoryTree } from '@/api/knowledge';
export default {
  components: {
    addType,
  },
  data() {
    return {
      typeData: [],
      lazy: true,
      listLoading: true,
      elementLoadingText: '正在加载...',
    };
  },
  computed: {
    height() {
      return 500;
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      const { data } = await getTypeCategoryTree();
      this.typeData = data;
      this.listLoading = false;
    },
    handleAdd() {
      this.$refs.type.categoryEdit();
    },
    handleEdit(row) {
      this.$refs.type.categoryEdit(row);
    },
    handleDelete(row) {
      const that = this;
      if (row.id) {
        this.$confirm('你确定要删除当前项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const { msg } = doTypeDel({ categoryId: row.id });
            this.$message({
              type: 'success',
              message: msg == undefined ? '删除成功' : msg,
            });
            setTimeout(function () {
              that.fetchData();
            }, 1000);
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      }
    },
  },
};
</script>

<style lang="scss">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
}
</style>
