<template>
    <el-dialog :title="!dataForm.id ? '新建' :'编辑'" :close-on-click-modal="false" append-to-body
        :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="1000px">
        <el-row :gutter="15" class="">
            <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small"
                label-width="100px" label-position="right">
                <template v-if="!loading">
                    <!-- 具体表单 -->
                    <el-col :span="24">
                        <jnpf-form-tip-item label="标题" align="left" prop="title">
                            <JnpfInput v-model="dataForm.title" placeholder="请输入" clearable
                                :style='{"width":"100%"}'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24">
                        <jnpf-form-tip-item label="知识库" align="left" prop="knowledgeBaseId">
                            <JnpfTreeSelect :options="treeOptions"
                                v-model="dataForm.knowledgeBaseId" placeholder="请选择数据字典" lastLevel
                                clearable @change="knowledgeBaseChange" :props="treeSelectProps"
                                @selectChange="selectChange">
                            </JnpfTreeSelect>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="标签" align="left" prop="label">
                            <el-select v-model="dataForm.label" multiple filterable allow-create
                                default-first-option placeholder="请选择标签">
                                <el-option v-for="item in labelOptions" :key="item.value"
                                    :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="内容" align="left" prop="content">
                            <JnpfEditor v-model="dataForm.content" ref="myQuillEditor" />
                        </jnpf-form-tip-item>
                    </el-col>
                    <!-- 表单结束 -->
                </template>
            </el-form>

        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false"> 取 消</el-button>
            <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确
                定</el-button>
        </span>
    </el-dialog>
</template>


<script>
import request from '@/utils/request'
import { mapGetters } from "vuex";


import {
    getKnowledgeBase,
} from '@/api/governmentCloud/knowledgeBase/knowledgeBase'

export default {
    components: {},
    props: [],
    data() {
        return {
            dataFormSubmitType: 0,
            continueBtnLoading: false,
            index: 0,
            visible: false,
            loading: false,
            btnLoading: false,
            dataValueAll: {},
            addTableConf: {
            },
            //可选范围默认值
            ableAll: {
            },
            tableRows: {
            },
            Vmodel: "",
            currVmodel: "",
            dataForm: {
                knowledgeBaseId: '',
                title: '',
                label: [],
                content: '',
            },
            tableRequiredData: {},
            dataRule:
            {
                title: [
                    {
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    },
                ],
                label: [
                    {
                        required: true,
                        message: '请选择标签',
                        trigger: 'change'
                    },
                ],
                content: [
                    {
                        required: true,
                        message: '请输入内容',
                        trigger: 'change'
                    },
                ],
                knowledgeBaseId: [
                    {
                        required: true,
                        message: '请选择知识库',
                        trigger: 'change'
                    },
                ],
            },
            treeOptions: [],
            labelOptions: [],
            treeSelectProps: {
                value: 'id',             // ID字段名
                label: 'name',       // 显示名称
                children: 'children',    // 子级字段名
            }
        }
    },
    computed: {
        ...mapGetters(['userInfo']),


    },
    watch: {},
    created() {
        this.dataAll()
        this.dataValueAll = JSON.parse(JSON.stringify(this.dataForm))
    },
    mounted() { },
    methods: {
        knowledgeBaseChange(e) {
            console.log(e)
        },
        selectChange(e) {

        },
        getInfo(id) {
            request({
                url: '/api/SystemInterface/SystemInterface/' + id,
                method: 'get'
            }).then(res => {
                this.dataInfo(res.data)
            });
        },
        goBack() {
            this.visible = false
            this.$emit('refreshDataList', true)
        },
        dataAll() {
            this.getKnowledgeBase();
        },
        getKnowledgeBase() {
            getKnowledgeBase().then(res => {
                this.treeOptions = res.data
            })
        },
        clearData() {
            this.dataForm = JSON.parse(JSON.stringify(this.dataValueAll))
        },
        init(id) {
            this.loading = true
            console.log(this.dataValueAll)
            console.log(id)
            this.clearData()
            if (id) {
                this.dataForm.id = id
            }
            this.$nextTick(() => {
                if (this.dataForm.id) {
                    request({
                        url: '/api/web/knowledge/' + this.dataForm.id,
                        method: 'get'
                    }).then(res => {
                        this.dataInfo(res.data)
                        this.loading = false
                        this.visible = true;
                    });
                } else {
                    this.visible = true;
                    this.loading = false
                }
            });
        },

        // 表单提交
        dataFormSubmit(type) {
            this.dataFormSubmitType = type ? type : 0
            this.$refs['formRef'].validate((valid) => {
                if (valid) {
                    this.request()
                }
            })
        },
        request() {
            let _data = this.dataList()
            this.btnLoading = true


            _data.label = JSON.stringify(_data.label)

            request({
                url: '/api/web/knowledge/save',
                method: 'POST',
                data: _data
            }).then((res) => {
                this.$message({
                    message: res.msg,
                    type: 'success',
                    duration: 1000,
                    onClose: () => {
                        this.visible = false
                        this.btnLoading = false
                        this.clearData()
                        this.$emit('refresh', true)

                    }
                })
            }).catch(() => {
                this.btnLoading = false
                this.continueBtnLoading = false
            })

        },
        dataList() {
            var _data = JSON.parse(JSON.stringify(this.dataForm));
            return _data;
        },
        dataInfo(dataAll) {
            this.dataForm.content = dataAll.content
            this.dataForm.label = JSON.parse(dataAll.label)
            this.dataForm.knowledgeBaseId = dataAll.knowledgeBaseId
            this.dataForm.title = dataAll.title
            this.isEdit = true
            this.dataAll()
        },
    },
}

</script>
