<template>
    <ap-container>
        <ap-aside margin="1111">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form" ref="tAbapDocType" :inline="true" label-width="100px"
                         :model="tAbapDocTypeForm" :rules="tAbapDocTypeRules">
                    <el-form-item label="父类别">
                        <el-select v-model="tAbapDocTypeForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""/>
                            <el-option
                                v-for="item in typeList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label='名称' prop='fdName'>
                        <el-input v-model='tAbapDocTypeForm.fdName'></el-input>
                    </el-form-item>
                    <el-form-item label='类型' prop='fdType'>
                        <el-select v-model="tAbapDocTypeForm.fdType" filterable placeholder="请选择类型">
                            <el-option key="1" label="分组" :value=1></el-option>
                            <el-option key="2" label="文档" :value=2></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='布局' prop='fdLayout'>
                        <el-select v-model="tAbapDocTypeForm.fdLayout" filterable placeholder="请选择布局">
                            <el-option key="one" label="单页" value="one"></el-option>
                            <el-option key="left" label="左侧" value="left"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='自定义组件' prop='fdCustom' placeholder="请输入自定义组件名">
                        <el-input v-model='tAbapDocTypeForm.fdCustom'></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input v-model='tAbapDocTypeForm.fdSort'></el-input>
                    </el-form-item>
                </el-form>
                <span slot="tree" slot-scope="scope">
                    <span v-if="scope.data.fdType == 1" style="color: #1890ff;font-size: 13px;">{{ scope.data.fdName }}</span>
                    <span v-else style="font-size: 12px;">{{ scope.data.fdName }}</span>
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-main margin="1110">
                <ap-rich-editor ref="richEditorRef" :options.sync="richEditorOptions" v-loading="loading"/>
            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>

import ApRichEditor from 'ap-plugin/ApRichEditor'


export default {
    name: 'AbapDoc',
    components: {
        ApRichEditor
    },
    data() {
        return {
            // ----- 左侧树 -----
            treeOptions: this.getTreeOption(),
            typeList: [],
            tAbapDocTypeForm: {},
            tAbapDocTypeRules: {},
            selectedDocTypeId: "",
            // ----- 右侧 -----
            loading: false,
            isFirstClick: true, // 第一次点击不校验是否修改
            oldEditorValue: "",
            richEditorOptions: {
                toolbar: `undo redo formatpainter removeformat
                | forecolor backcolor permanentpen bold italic underline strikethrough
                | fontfamily fontsize blocks
                | alignleft aligncenter alignright alignjustify lineheight
                | outdent indent
                | numlist bullist checklist
                | table image apvideo pageembed link
                | codesample apcode
                | searchreplace code preview fullscreen save`,
                save: (value)=> {
                    this.saveDocText(value)
                }
            },
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "SAP开发文档",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "SAP开发文档",
                sortByTree: true,
                sortByDrag: true,
                defaultExpandAll: false,
                onClick: (data, node, comp) => {
                    // 检查未保存
                    if (!this.isFirstClick && this.oldEditorValue != this.$refs.richEditorRef.getContent()) {
                        this.$confirm('当前操作会丢失未保存内容，确认要切换文档?', '提示', {
                            confirmButtonText: '切换',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.selectedDocTypeId = data.fdId;
                            this.getDocText();
                        })
                    } else {
                        this.selectedDocTypeId = data.fdId;
                        this.getDocText();
                        this.isFirstClick = false;
                    }
                },
                loadOptions: {
                    url: "/apd/abap/AbapDoc/getTAbapDocTypeList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.getDocType();
                    },
                },
                editOptions: {
                    url: "/apd/abap/AbapDoc/getTAbapDocTypeByFdId",
                    data: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.tAbapDocTypeForm= response.data;
                    },
                    error() {},
                },
                insertUrl: "/apd/abap/AbapDoc/insertTAbapDocType",
                insertData: () => {
                    return this.tAbapDocTypeForm
                },
                updateUrl: "/apd/abap/AbapDoc/updateTAbapDocType",
                updateData: () => {
                    return this.tAbapDocTypeForm
                },
                deleteUrl: "/apd/abap/AbapDoc/deleteTAbapDocTypeByFdId",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apd/abap/AbapDoc/updateTAbapDocTypeSort',
                updateSortListUrl: '/apd/abap/AbapDoc/updateTAbapDocTypeSortList',
                resetForm: () => {
                    this.tAbapDocTypeForm = {
                        fdId: '',
                        fdParentId: '',
                        fdName: '',
                        fdType: '',
                        fdLayout: '',
                        fdSort: '',
                    };
                },
                afterOpenAddDialog: (node) => {},
            };

            return treeOptions;
        },
        getDocType() {
            this.$request({
                url: '/apd/abap/AbapDoc/getDocTypeList',
                method: 'post',
                data: {}
            }).then(response => {
                this.typeList = response.data
            })
        },
        getDocText() {
            this.loading = true;
            this.$request({
                url: '/apd/abap/AbapDoc/getDocText',
                method: 'post',
                data: {
                    id: this.selectedDocTypeId
                }
            }).then(response => {
                this.$refs.richEditorRef.setContent(response.data);
                this.oldEditorValue = response.data
            }).finally(() => {
                this.loading = false;
            })
        },
        saveDocText(value) {
            this.loading = true;
            this.$request({
                url: '/apd/abap/AbapDoc/saveDocText',
                method: 'post',
                data: {
                    typeId: this.selectedDocTypeId,
                    text: value
                }
            }).then(response => {
                this.$message.success("保存成功");
                this.oldEditorValue = this.$refs.richEditorRef.getContent();
            }).finally(() => {
                this.loading = false;
            })
        },
    }
}
</script>

<style scoped>
</style>
