<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="filter-container">
          <el-button v-permission="'HY_addL'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_addL()">添加</el-button>
          <el-button v-permission="'HY_editL'" type="primary" class="filter-item" icon="el-icon-edit" @click="btn_editL()">编辑</el-button>
          <el-button v-permission="'HY_deleteL'" type="primary" class="filter-item" icon="el-icon-delete" @click="btn_deleteL()">删除</el-button>
        </div>
        <el-alert :closable="false" title="知识库分类" type="success"/>
        <el-tree
          ref="treeRef"
          :data="treelists"
          :default-expand-all="defaultExpandAll"
          :expand-on-click-node="expandOnNode"
          :props="props"
          node-key="id"
          check-strictly
          highlight-current
          @node-click="treeNodeClick"/>
      </el-col>
      <el-col :span="18">
        <div class="filter-container">
          <el-input v-model="keyword" placeholder="请输入关键字" class="filter-item"/>
          <el-button type="primary" class="filter-item" icon="el-icon-search" @click="btn_searchR">搜索</el-button>
          <el-button v-permission="'HY_addR'" type="primary" class="filter-item" icon="el-icon-plus" @click="btn_addR">添加</el-button>
          <el-button v-permission="'HY_editR'" type="primary" class="filter-item" icon="el-icon-edit" @click="btn_editR">编辑</el-button>
          <el-button v-permission="'HY_deleteR'" type="primary" class="filter-item" icon="el-icon-delete" @click="btn_deleteR">删除</el-button>
        </div>
        <el-alert :closable="false" title="知识库列表" type="success"/>
        <el-table v-loading="loading" :data="scoreLists" border stripe highlight-current-row @row-click="handleTableClick">
          <el-table-column type="index" label="编号" align="center" fixed width="80"/>
          <el-table-column fixed prop="F_Expand1" label="知识库分类" align="center" min-width=""/>
          <el-table-column fixed prop="F_Title" label="知识库标题" align="center" min-width=""/>
          <el-table-column
            :show-overflow-tooltip="true"
            fixed
            label="知识库内容"
            align="center"
            width="252">
            <template slot-scope="scope">
              <span style="color:#409EFF; cursor: pointer;" @click="btn_knowleDetaol(scope.row.F_RepositoryId)">{{ scope.row.F_Content }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="pageParams.total > 0"
          :total="pageParams.total"
          :pageindex.sync="pageParams.pageindex"
          :pagesize.sync="pageParams.pagesize"
          class="pagination"
          @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getTreeList, getScoreList, deleteType, deleteScore } from '@/api/repositoryManage/repositoryManage'
import addOrEditKnowledge from '../component/addOrEditKnowledge'
import addOrEditScore from '../component/addOrEditScore'
import repositoryDetails from '../component/repositoryDetails'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装
export default {
  components: {
    Pagination
  },
  data() {
    return {
      keyword: '',
      treelists: [], // 分类树列表
      treeclickId: '',
      scoreLists: [], // 质检分类列表
      scoreId: '', // 右侧分类id
      defaultExpandAll: true,
      expandOnNode: false,
      loading: false,
      pageParams: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0 // 总共多少数据
      },
      props:{
        value:'id',
        label:'text'
      }
    }
  },
  created() {
    // this.getList() // 分类指标
    this.getTreeLists()// 分类指标
        document.onkeyup = (e) => {
      if (e.keyCode === 13) {
        this.getList()
      }
    }
  },
  mounted: function() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams.pageindex, // 第几页
          pagesize: this.pageParams.pagesize, // 每页几条信息
          keyword: this.keyword.trim(), //	关键字
          pid: this.treeclickId
        }
        getScoreList(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams.total = response.rows.Totals
            this.scoreLists = response.rows.Rows
            // this.$refs.treeRef.setCheckedKeys([]) // 清空权限树的选中状态
          }
        })
        resolve()
      })
    },
    // 分类树
    getTreeLists() {
      return new Promise(resolve => {
        getTreeList().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.treelists = response.data
          }
        })
        resolve()
      })
    },
    // 点击某一行的table
    handleTableClick(row, event, column) {
      this.scoreId = row.F_RepositoryId
    },
    // 左侧添加
    btn_addL() {
      this.$layer.iframe({
        content: {
          content: addOrEditKnowledge, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: '' } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['80%', '90%'],
        shadeClose: false,
        title: '添加知识库分类'
      })
    },
    //		    //左侧编辑
    btn_editL(editId) {
      if (!this.treeclickId) {
        this.$message({
          message: '请选择知识库分类！',
          type: 'warning'
        })
        return
      }
      this.$layer.iframe({
        content: {
          content: addOrEditKnowledge, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: this.treeclickId.toString() } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['80%', '90%'],
        shadeClose: false,
        title: '编辑知识库分类'
      })
    },
    // 左侧删除
    btn_deleteL() {
      if (this.treeclickId) {
        this.deleteType(this.treeclickId)
      } else {
        this.$message({
          message: '请选择知识库分类！',
          type: 'warning'
        })
      }
    },
    // 左侧删除
    deleteType(ids) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteType(ids).then(response => {
            if (response.state.toLowerCase() === 'success') {
              this.getTreeLists()
              this.$message.success('删除成功!')
              this.treeclickId=''
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 右侧搜索
    btn_searchR() {
      this.pageParams.pageindex = 1
      this.getList()
    },
    // 右侧详情
    btn_knowleDetaol(rightId) {
      if (rightId) {
        this.$layer.iframe({
          content: {
            content: repositoryDetails, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: { scoreid: rightId.toString() } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
          },
          area: ['60%', '70%'],
          shadeClose: false,
          title: '知识库内容'
        })
      }
    },

    // 右侧添加
    btn_addR() {
      this.$layer.iframe({
        content: {
          content: addOrEditScore, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { rowid: '' } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['60%', '70%'],
        shadeClose: false,
        title: '添加知识库'
      })
    },
    // 右侧编辑
    btn_editR() {
      if (this.scoreId) {
        this.$layer.iframe({
          content: {
            content: addOrEditScore, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: { scoreid: this.scoreId.toString() } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
          },
          area: ['60%', '70%'],
          shadeClose: false,
          title: '编辑知识库'
        })
      } else {
        this.$message({
          message: '没有可编辑的选项！',
          type: 'warning'
        })
      }
    },
    // 右侧删除
    btn_deleteR() {
      if (this.scoreId) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteScore(this.scoreId).then(response => {
              if (response.state.toLowerCase() === 'success') {
                this.scoreId = ''
                this.getList()
                this.$message.success('删除成功!')
              }
            })
          })
          .catch(() => {
            this.$message.info('已取消删除')
          })
      } else {
        this.$message({
          message: '没有可删除的选项！',
          type: 'warning'
        })
      }
    },
    treeNodeClick(data) {
      this.treeclickId = data.id
      this.getList() // 分类指标
    }
  }

}
</script>
