<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-left">
            <div class="JNPF-common-title">
                <h2>知识库</h2>
                <el-dropdown>
                    <el-link icon="icon-ym icon-ym-mpMenu" :underline="false" />
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="initData()">刷新数据</el-dropdown-item>
                        <el-dropdown-item
                            @click.native="toggleTreeExpand(true)">展开全部</el-dropdown-item>
                        <el-dropdown-item
                            @click.native="toggleTreeExpand(false)">折叠全部</el-dropdown-item>
                        <el-dropdown-item @click.native="handleTypeManage">知识库管理</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="JNPF-common-tree-search-box">
                <el-input placeholder="输入关键字" v-model="filterText" suffix-icon="el-icon-search"
                    clearable />
            </div>
            <el-scrollbar class="JNPF-common-el-tree-scrollbar" v-loading="treeLoading">
                <el-tree ref="treeBox" :data="treeData" :props="defaultProps"
                    :default-expand-all="expandsTree" highlight-current
                    :expand-on-click-node="false" node-key="id" @node-click="handleNodeClick"
                    class="JNPF-common-el-tree" :filter-node-method="filterNode" v-if="refreshTree">
                    <span class="custom-tree-node" slot-scope="{ node }">
                        <i class="el-icon-notebook-2" />
                        <span class="text">{{node.label}}</span>
                    </span>
                </el-tree>
            </el-scrollbar>
        </div>
        <div class="JNPF-common-layout-center">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="关键词">
                            <el-input v-model="listQuery.title" placeholder="请输入关键词查询" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">
                                {{$t('common.search')}}</el-button>
                            <el-button icon="el-icon-refresh-right"
                                @click="reset()">{{$t('common.reset')}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head" style="justify-content: space-between;">
                    <div>
                        <el-button type="primary" icon="el-icon-plus"
                            @click="showFrom()">新增</el-button>
                    </div>
                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                                :underline="false" @click="reset()" />
                        </el-tooltip>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="tableData" row-key="id"
                    v-if="refreshTable">
                    <el-table-column prop="title" label="标题" />

                    <el-table-column label="标签">
                        <template slot-scope="scope">
                            <el-tag v-for="item in scope.row.labelList"
                                :key="item">{{ item }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="creatorTime" label="创建时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.creatorTime || '无' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="publishTime" label="发布时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.publishTime || '未发布' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" @click="showFrom(scope.row.id)">编辑</el-button>
                            <el-button type="text"
                                @click="handleDetail(scope.row.id)">详情</el-button>
                            <el-button style="color: #F56C6C;" type="text"
                                @click="handleDel(scope.row.id)">删除</el-button>
                            <el-button type="text" v-if="scope.row.audit"
                                @click="audit(scope.row.id)">审核</el-button>
                        </template>
                    </el-table-column>
                </JNPF-table>
                <pagination :total="total" :page.sync="listQuery.current"
                    :limit.sync="listQuery.size" @pagination="getKnowledgeList" />
            </div>
        </div>
        <TypeList v-if="drawer" ref="TypeList" @refreshDataList="initData" />
        <Detail v-if="drawerDetail" ref="Detail" />
        <Form v-if="formVisible" @refresh="getKnowledgeList" ref="JNPFForm" />
    </div>
</template>

<script>
import {
    getKnowledgeBase,
    getKnowledgeList,
    delKnowledge,
    audit
} from '@/api/governmentCloud/knowledgeBase/knowledgeBase'
import TypeList from './components/index'
import Detail from './Detail'
import Form from './Form.vue'

export default {
    name: 'knowledgeBase',
    components: {
        TypeList,
        Detail,
        Form
    },
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            listQuery: {
                current: 1,
                size: 20,
                knowledgeBaseId: '',
                title: ''
            },
            total: 0,
            drawer: false,
            treeLoading: false,
            listLoading: false,
            treeData: [],
            tableData: [],
            expands: true,
            expandsTree: true,
            refreshTable: true,
            refreshTree: true,
            filterText: '',
            drawerDetail: false,
            formVisible: false,

        }
    },
    watch: {
        filterText(val) {
            this.$refs.treeBox.filter(val)
        }
    },
    created() {
        this.initData(true)
    },
    methods: {
        audit(id) {
            audit(id).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.msg)
                    this.getKnowledgeList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        showFrom(id) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.JNPFForm.init(id || null)
            })

        },
        search() {
            this.getKnowledgeList()
        },
        reset() {
            this.listQuery.title = ''
            this.getKnowledgeList()
        },
        initData(isInit) {
            this.filterText = ''
            this.treeLoading = true
            getKnowledgeBase().then(res => {
                this.treeData = res.data
                this.getKnowledgeList()
                this.treeLoading = false
            }).catch(() => {
                this.treeLoading = false
            })
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        toggleExpand() {
            this.refreshTable = false;
            this.expands = !this.expands;
            this.$nextTick(() => {
                this.refreshTable = true;
            });
        },
        toggleTreeExpand(expands) {
            this.filterText = ''
            this.refreshTree = false
            this.expandsTree = expands
            this.$nextTick(() => {
                this.refreshTree = true
                this.$nextTick(() => {
                    this.$refs.treeBox.setCurrentKey(this.listQuery.knowledgeBaseId)
                })
            })
        },
        getKnowledgeList() {
            this.listLoading = true
            getKnowledgeList(this.listQuery).then(res => {
                this.tableData = res.data.records
                this.tableData.forEach(item => {
                    this.$set(item, "labelList", JSON.parse(item.label))
                })
                this.total = res.data.total
                this.listLoading = false
            }).catch(() => {
                this.listLoading = false
            })
        },
        // 分类管理
        handleTypeManage() {
            this.drawer = true
            this.$nextTick(() => {
                this.$refs.TypeList.init()
            })
        },
        handleNodeClick(data) {
            this.listQuery.knowledgeBaseId = data.id
            this.reset()
        },
        handleDetail(id) {
            this.drawerDetail = true
            this.$nextTick(() => {
                this.$refs.Detail.init(id)
            })
        },
        handleDel(id) {
            this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
                type: 'warning'
            }).then(() => {
                delKnowledge(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        duration: 1500,
                        onClose: () => {
                            this.getKnowledgeList()
                        }
                    })
                })
            }).catch(() => { })
        }
    }
}
</script>
