<template>
    <ap-container>
        <ap-aside margin="1111">
            <ap-aside-tree :options.sync="tCodeTreeOptions">
                <div slot="tree" slot-scope="scope" class="flex-justify-between tree-item">
                    <span v-if="scope.data.fdCode != undefined && scope.data.fdCode != null && scope.data.fdCode != '' ">
                        {{scope.data.fdCode}} {{ scope.data.fdName }}</span>
                    <span v-else>{{ scope.data.fdName }}</span>
                    <span class="ap-color-blue tree-item-version-text">{{ scope.data.docVersion !=null && scope.data.docVersion !=undefined ? 'V '+ scope.data.docVersion: '' }}</span>
                </div>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-main margin="1110" class="flex-col" v-loading="loading">
                <div class="flex-justify-between" style="padding-bottom: 5px;">
                    <div class="flex-justify-start">
                        <div class="ap-color-blue ap-ellipse" style="width: 220px;"><i class="el-icon-title-flag"/> <span style="font-weight: bold;">{{selectedName}} </span></div>
                        <div>版本名：</div>
                        <div><el-input v-model="form.fdName" size="mini" placeholder="版本名称"></el-input></div>
                        <div style="margin-left: 20px;">版本号：</div>
                        <div><el-input v-model="form.fdVersion" size="mini" style="width: 60px" placeholder="数字"></el-input></div>
                        <el-select v-model="template" clearable placeholder="选择模板" @change="templateChange" style="margin-left: 20px;width: 100px">
                            <el-option key="1" label="操作手册" value="1"></el-option>
                        </el-select>
                        <div v-html="message" style="margin-left: 10px;"></div>
                    </div>
                    <div>
                        <el-button-group>
                            <el-button size="mini" type="primary" @click="showHistory">历史版本</el-button>
                        </el-button-group>
                        <el-button-group>
                            <el-button size="mini" type="primary" @click="save(1)">更新</el-button>
                            <el-button size="mini" type="primary" @click="save(2)">保存草稿</el-button>
                            <el-button size="mini" type="primary" @click="save(3)">发布新版本</el-button>
                        </el-button-group>
                    </div>
                </div>
                <div class="flex-1">
                    <ap-rich-editor ref="richEditorRef"  :options.sync="richEditorOptions"/>
                </div>
            </ap-main>
        </ap-container>
        <el-drawer
            :visible.sync="showDrawer"
            direction="rtl"
            size="800px"
            class="kc-version-detail">
            <div slot="title" style="font-weight: bold">
                版本历史记录
            </div>
            <div class="flex-col" style="padding: 10px;height: 100%;">
                <ap-table ref="tSysDocVersionRef" :options.sync="tSysDocVersionOpt">
                    <template #fdName="slotProps">
                            <span style="color: #0C60E1;cursor: pointer;" :data-id="slotProps.rowData.fdId"
                                  :data-name="slotProps.rowData.fdName" @click="showDetail($event)">{{slotProps.rowData.fdName}}</span>
                    </template>
                </ap-table>
            </div>
        </el-drawer>
    </ap-container>
</template>

<script>

import ApRichEditor from 'ap-plugin/ApRichEditor'
import {getHrefParams} from "ap-util/util/WindowUtil";

export default {
    name: 'SysDoc',
    components: {
        ApRichEditor
    },
    data() {
        let columns = [
            {
                prop: 'fdName',
                label: '名称',
                type: 'slot',
                slot: "fdName"
            }, {
                prop: 'fdVersion',
                label: '版本',
                type: 'input'
            }, {
                prop: 'fdTime',
                label: '发布时间',
                type: 'datePicker',
                datePickerType: 'datetime',
                datePickerFormat: 'yy-MM-dd HH:mm:ss'
            }, {
                prop: 'fdPublishUserName',
                label: '发布人',
                type: 'input'
            },
        ];
        let tableOpt = {
            columns: columns,
            dataUrl: "/apm/doc/TSysDoc/getTSysDocVersionGridList",
            toolbarBtn: [{btnType: "primary", text: "复制内容", icon: "el-icon-copy", onClick: this.copyText},"refresh"],
            initData: true, // 默认false
            params:()=>{
                return {
                    functionId: this.selectedId,
                }
            }
        };
        return {
            // ----- 左侧树 -----
            tCodeTreeOptions: this.getTCodeTreeOption(),
            typeList: [],
            tAbapDocTypeForm: {},
            tAbapDocTypeRules: {},
            selectedId: "",
            selectedName: "请选择应用",
            // ----- 右侧 -----
            loading: false,
            message: "",
            template: "",
            form: this.initForm(),
            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`
            },
            // ----- 弹框 -----
            showDrawer: false,
            tSysDocVersionOpt: tableOpt,
        }
    },
    methods: {
        // 左侧树：配置
        getTCodeTreeOption() {
            let tCodeTreeOptions = {
                title: "应用列表",
                defaultExpandAll: false,
                onClick: (data, node, comp) => {
                    this.selectedId = data.fdId;
                    this.selectedName = data.fdCode != undefined && data.fdCode != null && data.fdCode != '' ?
                    (data.fdCode + " " + data.fdName) : data.fdName ;
                    this.getDocText();
                    // 富文本上传视频的备注参数
                    let sysVideoParam = {
                        remark: this.selectedName
                    }
                    localStorage.setItem("SysVideoParam", JSON.stringify(sysVideoParam));
                },
                loadOptions: {
                    url: "/apm/doc/TSysDoc/getDocMenuList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    data: {},
                    success: (response) => {
                        // 过滤类型为 1 的
                        let nodeList = [];
                        for (let i = 0; i < response.data.length; i++) {
                            if (response.data[i].fdType == 1) {
                                nodeList.push(response.data[i]);
                            }
                        }
                        this.tCodeNodeList = nodeList;
                        let params = getHrefParams();
                        if (params.tcode != null) {
                            this.tCodeTreeSelectedCode = params.tcode;
                        }
                    },
                },
                filterNodeMethod: (value, data) => {
                    // 树节点过滤
                    if (!value) return true;
                    if (data["fdCode"] != null && data["fdCode"].indexOf(value) !== -1) {
                        return true;
                    }
                    if (data["fdName"] != null && data["fdName"].indexOf(value) !== -1) {
                        return true;
                    }
                    return false;
                },
            };

            return tCodeTreeOptions;
        },
        initForm(){
            let form = {
                fdId: '',
                fdFunctionId: '',
                fdName: '',
                fdVersion: '',
                fdTextId: '',
                fdDraftId: '',
                fdText: "",
                versionCount: 0
            }
            return form;
        },
        getDocText() {
            this.initForm();
            this.oldEditorValue = "";
            this.loading = true;
            this.$request({
                url: '/apm/doc/TSysDoc/getDocText',
                method: 'post',
                data: {
                    functionId: this.selectedId,
                }
            }).then(response => {
                let data = response.data;
                this.$refs.richEditorRef.setContent(data.fdText);
                this.oldEditorValue = data.fdText;
                this.form = data;
                if (data.fdDraftId != null && data.fdDraftId != '') {
                    this.message = `<div class="ap-color-red"><i class="el-icon-warning-outline" /> 当前为草稿版本</div>`;
                } else {
                    this.message = "";
                }

            }).finally(() => {
                this.loading = false;
            })
        },
        save(type){
            let url = "";
            let message = "";
            switch (type) {
                case 1:
                    // 更新文档内容
                    url = "/apm/doc/TSysDoc/saveDoc";
                    message = "确认要保存？";
                    break;
                case 2:
                    // 保存草稿
                    url = "/apm/doc/TSysDoc/saveDocDraft";
                    message = "确认要保存草稿？";
                    break;
                case 3:
                    // 发布新版本
                    url = "/apm/doc/TSysDoc/saveDocNewVersion";
                    message = "确认要发送新版本？";
                    break;
            }
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.loading = true;

                this.form.fdText = this.$refs.richEditorRef.getContent();

                // 添加
                if (this.form.fdFunctionId == null) {
                    this.form.fdFunctionId = this.selectedId;
                }
                this.$request({
                    url: url,
                    method: 'post',
                    data: this.form
                }).then(response => {
                    this.$message.success("保存成功");
                    this.getDocText();
                }).finally(() => {
                    this.loading = false;
                })
            })
        },
        showHistory(){
            this.showDrawer = true;
            this.$nextTick(() => {
                this.$refs.tSysDocVersionRef.refresh();
            });
        },
        showDetail(e) {
            // 新页面打开
            let routeData = this.$router.resolve({ path: '/sys/help', query: {
                vid: e.target.getAttribute('data-id')
            } });
            window.open(routeData.href, '_blank');
        },
        copyText(){
            let selectedRows = this.$refs.tSysDocVersionRef.getSelection();
            if (selectedRows.length < 1) {
                this.$message.warning("请选择需要复制的行！");
                return;
            }
            if (selectedRows.length > 1) {
                this.$message.warning("只能选择单行数据进行复制！");
                return;
            }

            this.loading = true;
            this.$request({
                url: '/apm/doc/TSysDoc/getDocByVersionId',
                method: 'post',
                data: {
                    id: selectedRows[0].fdId,
                }
            }).then(response => {
                this.$refs.richEditorRef.setContent(response.data.fdText);
            }).finally(() => {
                this.loading = false;
            })
        },
        templateChange(value) {
            switch (value) {
                case "1":
                    let text = `<div data-version="3.0.0" data-hash="765c3a1e72971a795c2a090a7d6465e6"><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 18px;"><strong>标题XXX</strong></span></div>
<p><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px;">●&nbsp;</span><span style="font-weight: bold; color: #333333; vertical-align: baseline;" data-font-family="宋体">使用人：</span><span style="color: #333333; vertical-align: baseline;" data-font-family="宋体">使用人岗位</span></p>
<div data-version="3.0.0" data-hash="765c3a1e72971a795c2a090a7d6465e6"><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px; text-align: justify; ">●&nbsp;</span><span style="font-weight: bold; color: #333333; vertical-align: baseline;" data-font-family="宋体">主要内容：</span><span style="color: #333333; vertical-align: baseline;" data-font-family="宋体">功能说明</span></div>
<p data-version="3.0.0" data-hash="765c3a1e72971a795c2a090a7d6465e6"><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px; text-align: justify; ">●&nbsp;</span><span style="font-weight: bold; color: #333333; vertical-align: baseline;" data-font-family="宋体">使用场景：</span><span style="color: #333333; vertical-align: baseline;" data-font-family="宋体">使用场景（<span style="color: #333333; vertical-align: baseline;" data-font-family="宋体">什么情况是使用该页面？</span> ）</span></p>
<div>
<div class="document">
<div class="section">
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-18pt pap-hanging-indent-18pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;">&nbsp;</p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-18pt pap-hanging-indent-18pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;"><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px;"><span style="font-weight: bold; color: #333333; vertical-align: baseline;" data-font-family="宋体">功能说明：</span></span></p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;"><strong><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px;">一、创建xxx</span></strong></p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;"><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px;">截图</span></p>
<p>1、说明1</p><p>2、说明2</p><p>&nbsp;</p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;"><strong><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px;">二、修改xxx</span></strong></p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;"><span style="font-family: 'Microsoft YaHei', 'Helvetica Neue', 'PingFang SC', sans-serif; font-size: 16px;">...</span></p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;">&nbsp;</p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;"><strong>三、常见问题说明</strong></p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;">1、xxx</p>
<p class="paragraph text-align-type-justify pap-line-1.3 pap-line-rule-auto pap-spacing-before-3pt pap-spacing-after-3pt pap-left-indent-36pt pap-hanging-indent-36pt" style="text-align: justify; line-height: 130%; margin-top: 4px; margin-bottom: 4px;">2、xxx</p>
</div>
</div>
</div>`
                    this.$refs.richEditorRef.setContent(text);
                    break;
            }
        },
    }
}
</script>

<style scoped>
.kc-version-detail /deep/ .el-drawer__header {
    margin-bottom: 0px;
    padding: 10px 20px;
    border-bottom: 1px solid #cccccc;
}
.tree-item {
    padding-right: 8px;
    width: 100%;
}
.tree-item-version-text{
    font-size: 14px;
}
</style>
