<template>
    <ap-container>
        <ap-aside margin="1111" width="170px">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form" ref="tSysEmailType" :inline="true" label-width="80px"
                         :model="tSysEmailTypeForm" :rules="tSysEmailTypeRules">
                    <el-form-item label='父id' prop='fdParentId'>
                        <el-select v-model="tSysEmailTypeForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""></el-option>
                            <el-option
                                v-for="item in groupTypeList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分组">
                        <el-radio v-model="tSysEmailTypeForm.fdIsGroup" :label="1">是
                        </el-radio>
                        <el-radio v-model="tSysEmailTypeForm.fdIsGroup" :label="0">否
                        </el-radio>
                    </el-form-item>
                    <el-form-item label='名称' prop='fdName'>
                        <el-input v-model='tSysEmailTypeForm.fdName'></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input v-model='tSysEmailTypeForm.fdSort'></el-input>
                    </el-form-item>
                    <el-form-item label='备注' prop='fdComment'>
                        <el-input v-model='tSysEmailTypeForm.fdComment'></el-input>
                    </el-form-item>
                </el-form>
                <div slot="tree" slot-scope="scope" style="width: 100%">
                    <div class="tree-node">
                        <span v-if="scope.data.fdIsGroup == 1" style="color: #2e6d91">{{ scope.data.fdName }}</span>
                        <span v-else style="color: #1890FF"><i class="el-icon-guide"/> &nbsp {{
                                scope.data.fdName
                            }}</span>
                    </div>
                </div>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110" class="flex-justify-between">
                <el-form ref="tSysEmailSearchForm" :model="tSysEmailSearchForm" :rules="tSysEmailSearchFormRules"
                         :inline="true" class="layout-header-form">
                    <el-form-item label="" class="layout-header-form-item" prop="type">
                        <el-radio-group v-model="tSysEmailSearchForm.type" @change="changeTab">
                            <el-radio :label="1">邮件配置</el-radio>
                            <el-radio :label="2">模板配置</el-radio>
                            <el-radio :label="3">接口配置</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!--                    <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">-->
                    <!--                        <el-input v-model="tSysEmailSearchForm.likeStr" placeholder="请输入搜索值"></el-input>-->
                    <!--                    </el-form-item>-->
                </el-form>
            </ap-header>
            <ap-main margin="0110" class="flex-justify-start">
                <div v-show="tSysEmailSearchForm.type == 1" class="flex-1" style="height: 100%">
                    <ap-table ref="tSysEmailRef" :options.sync="tSysEmailTable"></ap-table>
                </div>
                <div v-show="tSysEmailSearchForm.type == 1" style="height: 100%;width: 400px;padding-left: 10px">
                    <ap-table ref="tSysEmailParamRef" :options.sync="tSysEmailParamOpt"></ap-table>
                </div>
                <div v-show="tSysEmailSearchForm.type == 2" style="height: 100%;width: 500px;" class="flex-col">

                    <ap-table ref="tSysEmailTemplateRef" :options.sync="tSysEmailTemplateTable" style="height: 55%;"></ap-table>

                    <ap-table ref="tSysEmailInterfaceConfigRef" :options.sync="tSysEmailInterfaceConfigOpt" class="flex-1"></ap-table>
                </div>
                <div v-show="tSysEmailSearchForm.type == 2" class="flex-1 flex-col" style="height: 100%;padding-left: 10px">
                    <div style="padding: 5px" class="flex-justify-between">
                        <div class="flex-justify-between">
                            <span>模板名称：</span>
                            <el-input v-model="tSysEmailTemplateForm.fdName" style="width: 200px"></el-input>

                            <el-select v-model="tSysEmailTemplateForm.fdTypeId" placeholder="选择类型" style="margin-left: 10px">
                                <el-option v-for="item in noGroupTypeList" :key="item.fdId" :label="item.fdName" :value="item.fdId"></el-option>
                            </el-select>
                        </div>

                        <el-button-group>
                            <el-button type="primary" icon="el-icon-tickets" @click="previewTemplate">
                                预览
                            </el-button>
                            <el-button type="primary" icon="el-icon-part" @click="setTemplate" style="margin: 0 5px">
                                默认内容
                            </el-button>
                            <el-button type="primary" icon="el-icon-plus" @click="addTemplate">
                                新建
                            </el-button>
                            <el-button v-if="tSysEmailTemplateForm.fdId != ''" type="danger" icon="el-icon-close" @click="delTemplate">
                                删除
                            </el-button>
                            <el-button icon="el-icon-check" @click="saveTemplate">
                                保存
                            </el-button>
                        </el-button-group>
                    </div>
                    <div style="padding: 0 0 5px 5px;">
                        特殊符号：
                        <span class="ap-tag">&lt;tab> 四个空格</span>
                    </div>
                    <div class="flex-1">
                        <el-input v-model="tSysEmailTemplateForm.fdContent" type="textarea" placeholder="邮件内容" class="template-textarea"></el-input>
                    </div>
                </div>
                <div v-show="tSysEmailSearchForm.type == 3" style="height: 100%;width: 100%">
                    <ap-table ref="tSysEmailInterfaceRef" :options.sync="tSysEmailInterfaceOpt"></ap-table>
                </div>

            </ap-main>
        </ap-container>


        <el-dialog title="预览邮件内容" :visible.sync="showPreviewEmail" width="800px">
            <div style="min-height: 300px;" v-loading="previewEmailLoading">
                <div>
                    <span class="email-label">主题：</span>
                    <span>{{ emailInfo.title }}</span>
                </div>
                <div>
                    <span class="email-label">收件人：</span>
                    <span class="email-address">{{ emailInfo.toList.join() }}</span>
                </div>
                <div>
                    <span class="email-label">抄送人：</span>
                    <span class="email-address">{{ emailInfo.ccList.join() }}</span>
                </div>
                <div>
                    <span class="email-label">附件：</span>
                    <span v-for="item in emailInfo.attachments" @click="downloadAttachment(item.id)" class="email-attachment">
                        {{ item.fileName }}
                    </span>
                </div>
                <div v-html="emailInfo.content" class="email-content">

                </div>
            </div>
        </el-dialog>

        <el-dialog title="预览模板" :visible.sync="showPreviewTemplate" width="800px">
            <div v-html="template" style="height: 100%;">

            </div>
        </el-dialog>

    </ap-container>
</template>

<script>
import {download} from 'ap-util/util/FileServiceUtil'

export default {
    name: 'SysEmail',
    data() {

        let tSysEmailCols = [
            {
                prop: 'fdName',
                label: '邮件名称',
                type: 'input'
            }, {
                prop: 'fdTypeId',
                label: '分组',
                type: "select",
                width: "100px",
                showOverflowTooltip: true,
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "typeList",
                addDefaultValue: () => {
                    return this.treeSelectedValue;
                }
            }, {
                prop: 'fdTemplateId',
                label: '模板',
                type: "select",
                width: "120px",
                showOverflowTooltip: true,
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "templateList"
            }, {
                prop: 'fdCode',
                label: '调度编码',
                type: 'input',
                width: "120px",
            }, {
                prop: 'fdToCode',
                label: '收件人编码',
                type: 'input',
                width: "100px",
            }, {
                prop: 'fdCcCode',
                label: '抄送人编码',
                type: 'input',
                width: "100px",
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input',
                width: "80px",
            },
        ];
        let tSysEmailTable = {
            title: () => {
                return this.emailTableTitle
            },
            columns: tSysEmailCols,
            showPagination: false,
            initData: true,
            dataUrl: "/apm/sys/TSysEmail/getTSysEmailGridList",
            saveUrl: "/apm/sys/TSysEmail/saveTSysEmailGridData",
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apm/sys/TSysEmail/deleteTSysEmailGridData",
            toolbarBtn: [
                {btnType: "primary", text: "发送", icon: "el-icon-s-promotion", onClick: this.sendEmail},
                "separator",
                {btnType: "primary", text: "预览邮件", icon: "el-icon-tickets", onClick: this.previewEmail},
                "separator",
                {btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: this.copyEmail},
                "separator", "add", "edit", "del", "refresh", "save"
            ],
            rowClickEvent: (selection) => {
                let fdId = selection.fdId;
                if (fdId == null || fdId == "") {
                    return;
                }
                this.selectedEmailId = fdId;
                this.emailParamTableTitle = selection.fdName;
                this.$refs.tSysEmailParamRef.refresh()
            },
            params: () => {
                return {
                    likeStr: this.tSysEmailSearchForm.likeStr,
                    typeId: this.treeSelectedValue
                }
            }
        };

        let tSysEmailParamCols = [
            {
                prop: 'fdEmailId',
                label: '邮件Id',
                type: 'input',
                hide: true,
                addDefaultValue: () => {
                    return this.selectedEmailId;
                }
            }, {
                prop: 'fdKey',
                label: '参数名',
                type: 'input',
                help: '传递给接口的参数。<br>配置【companyId】参数后，收件人和抄送人会过滤组织账套'
            }, {
                prop: 'fdValue',
                label: '参数值',
                type: 'input'
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input'
            },
        ];
        let tSysEmailParamTable = {
            title: () => {
                return this.emailParamTableTitle
            },
            columns: tSysEmailParamCols,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apm/sys/TSysEmailParam/getTSysEmailParamGridList",
            saveUrl: "/apm/sys/TSysEmailParam/saveTSysEmailParamGridData",
            deleteUrl: "/apm/sys/TSysEmailParam/deleteTSysEmailParamGridData",
            toolbarBtn: ["add", "edit", "del", "save"],
            initData: false,
            showPagination: false,
            params: () => {
                return {
                    emailId: this.selectedEmailId
                }
            }
        };

        let tSysEmailTemplateCols = [
            {
                prop: 'fdTypeId',
                label: '分组',
                type: "select",
                width: "120px",
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "typeList",
                addDefaultValue: () => {
                    return this.treeSelectedValue;
                }
            }, {
                prop: 'fdName',
                label: '模板名称',
                type: 'input',
            }
        ];
        let tSysEmailTemplateTable = {
            title: () => {
                return this.templateTableTitle
            },
            columns: tSysEmailTemplateCols,
            editPk: "fdId", //默认fdId
            dataUrl: "/apm/sys/TSysEmailTemplate/getTSysEmailTemplateGridList",
            toolbarBtn: ["refresh"],
            initData: true,
            showPagination: false,
            rowClickEvent: (selection) => {
                this.selectedTemplateId = selection.fdId;
                this.selectedTemplateName = selection.fdName;
                this.editTemplate(selection.fdId);
                this.$refs.tSysEmailInterfaceConfigRef.refresh()
            },
            params: () => {
                return {
                    typeId: this.treeSelectedValue
                }
            }
        };

        let tSysEmailInterfaceConfigCols = [
            {
                prop: 'fdInterfaceId',
                label: '接口',
                type: "select",
                minWidth: "120px",
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "interfaceList"
            }, {
                prop: 'fdMapping',
                label: '接口结果映射',
                type: 'input',
                width: '150px',
                help: 'controller data返回值映射。<br>示例：接口结果映射为 <span class="ap-color-red">test</span>，参数引用方式 <span class="ap-color-red">${test.xxx}</span>' +
                    '<br>注1：数据接口时必填。<br>注2：模板名称和模板内容都使用引用参数'
            },
        ];
        let tSysEmailInterfaceConfigOpt = {
            title: () => {
                return this.selectedTemplateName;
            },
            columns: tSysEmailInterfaceConfigCols,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apm/sys/TSysEmailInterfaceConfig/getTSysEmailInterfaceConfigGridList",
            saveUrl: "/apm/sys/TSysEmailInterfaceConfig/saveTSysEmailInterfaceConfigGridData",
            deleteUrl: "/apm/sys/TSysEmailInterfaceConfig/deleteTSysEmailInterfaceConfigGridData",
            toolbarBtn: ["add", "edit", "del", "save"],
            initData: false, // 默认false
            showPagination: false,
            addDefaultObj: () => {
                return {fdTemplateId: this.selectedTemplateId}
            },
            params: () => {
                return {
                    templateId: this.selectedTemplateId
                }
            }
        };

        let tSysEmailInterfaceCols = [
            {
                prop: 'fdTypeId',
                label: '分组',
                type: "select",
                width: "130px",
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "typeList",
                addDefaultValue: () => {
                    return this.treeSelectedValue;
                }
            }, {
                prop: 'fdType',
                label: '接口类型',
                type: 'select',
                width: 100,
                align: 'center',
                selectOptions: [{label: "数据接口", value: 1}, {label: "校验接口", value: 2}, {label: "文件接口", value: 3}],
                addDefaultValue: 1,
                html: (value, row) => {
                    switch (value) {
                        case 1:
                            return '<span class="ap-color-blue"><i class="el-icon-coin" /> 数据接口</span>';
                            break
                        case 2:
                            return '<span class="ap-color-yellow"><i class="el-icon-document-checked" /> 校验接口</span>';
                            break
                        case 3:
                            return '<span class="ap-color-green"><i class="el-icon-excel" /> 文件接口</span>';
                            break
                    }
                    return value;
                }
            }, {
                prop: 'fdName',
                label: '名称',
                type: 'input',
                width: "200px",
            },
            // {
            //     prop: 'fdCode',
            //     label: '编码',
            //     type: 'input',
            //     width: "120px",
            // },
            {
                prop: 'fdValue',
                label: '接口地址',
                type: 'input',
                help: '1、http开头是直接访问 <br>2、非http开头自动拼接中台路径。示例：/dc/test/getxx'
            }, {
                prop: 'fdData',
                label: '返回值映射',
                type: 'input',
                width: "120px",
                help: '默认：data<br>自定义时：<br>1、"table" 或 "TABLE"开头的属性，自动将json对象转为邮件内表格html' +
                    '2、"excel" 或 "EXCEL"开头的属性，自动将json对象转为邮件附件的excel'
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input',
                width: "120px",
            },
        ];
        let tSysEmailInterfaceOpt = {
            title: () => {
                return this.interfaceTableTitle
            },
            columns: tSysEmailInterfaceCols,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apm/sys/TSysEmailInterface/getTSysEmailInterfaceGridList",
            saveUrl: "/apm/sys/TSysEmailInterface/saveTSysEmailInterfaceGridData",
            deleteUrl: "/apm/sys/TSysEmailInterface/deleteTSysEmailInterfaceGridData",
            toolbarBtn: [
                {btnType: "primary", text: "预览", icon: "el-icon-magic-stick", onClick: this.previewInterfaceData},
                "separator",
                {btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: this.copyEmailInterface},
                "separator",
                "add", "edit", "del", "refresh", "save"],
            initData: true,
            params: () => {
                return {
                    typeId: this.treeSelectedValue
                }
            }
        };

        return {
            // ----- 左侧树 -----
            groupTypeList: [],
            noGroupTypeList: [],
            treeOptions: this.getTreeOption(),
            tSysEmailTypeForm: {
                fdParentId: '',
                fdIsGroup: 0,
                fdName: '',
                fdSort: '',
                fdComment: '',
            },
            tSysEmailTypeRules: {
                fdName: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ]
            },
            treeSelectedValue: "",
            treeSelectedNode: null,
            // ----- 右侧 -----
            tSysEmailSearchForm: {
                type: 1,
                likeStr: ""
            },
            tSysEmailSearchFormRules: {
                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            },
            tSysEmailTemplateForm: {
                fdId: "",
                fdTypeId: "",
                fdName: "",
                fdContent: "",
            },
            emailTableTitle: "邮件推送列表",
            templateTableTitle: "模板列表",
            emailParamTableTitle: "参数",
            interfaceTableTitle: "接口列表",
            tSysEmailTable: tSysEmailTable,
            selectedEmailId: "",
            selectedTemplateId: "",
            selectedTemplateName: "模板接口",
            tSysEmailParamOpt: tSysEmailParamTable,
            tSysEmailTemplateTable: tSysEmailTemplateTable,
            tSysEmailInterfaceConfigOpt: tSysEmailInterfaceConfigOpt,
            tSysEmailInterfaceOpt: tSysEmailInterfaceOpt,
            showPreviewEmail: false,
            previewEmailLoading: false,
            emailInfo: {
                ccList: [],
                toList: [],
                attachments: [],
                title: "",
                content: "",
            },
            showPreviewTemplate: false,
            showJsonTableDialog: false,
            template: "",
            jsonStr: "",
            tableHtml: "",
            tabRefresh1: false,
            tabRefresh2: false,
            tabRefresh3: false,

        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "分组",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "邮件推送分组",
                defaultExpandAll: true,
                showCheckbox: false,
                sortByDrag: true,
                onClick: (data, node, comp) => {
                    // 分组没修改时，切换类型不刷新页面
                    if (this.treeSelectedValue != data.fdId) {
                        this.tabRefresh1 = true;
                        this.tabRefresh2 = true;
                        this.tabRefresh3 = true;
                        this["tabRefresh" + this.tSysEmailSearchForm.type] = false; // 当前tab不处理
                    }
                    // 数据处理
                    this.treeSelectedNode = data;
                    this.treeSelectedValue = data.fdId;
                    if (data.fdIsGroup == 1) {
                        return;
                    }
                    this.emailTableTitle = `邮件列表 -【${data.fdName}】`;
                    this.templateTableTitle = `模板列表 -【${data.fdName}】`;
                    this.interfaceTableTitle = `接口列表 -【${data.fdName}】`;
                    this.tSysEmailTemplateForm.fdTypeId = this.treeSelectedValue;
                    this.refreshTable();
                },
                loadOptions: {
                    url: "/apm/sys/TSysEmailType/getTSysEmailTypeList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        let typeList = response.data;
                        if (typeList == null) {
                            return;
                        }
                        let noGroupTypeList = [];
                        let groupTypeList = [];
                        for (let i = 0; i < typeList.length; i++) {
                            if (typeList[i].fdIsGroup == 1) {
                                groupTypeList.push(typeList[i]);
                            } else {
                                noGroupTypeList.push(typeList[i]);
                            }
                        }
                        this.groupTypeList = groupTypeList;
                        this.noGroupTypeList = noGroupTypeList;
                    },
                },
                editOptions: {
                    url: "/apm/sys/TSysEmailType/getTSysEmailTypeByFdId",
                    data: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.tSysEmailTypeForm = response.data;
                    },
                    error() {
                    },
                },
                insertUrl: "/apm/sys/TSysEmailType/insertTSysEmailType",
                insertData: () => {
                    return this.tSysEmailTypeForm
                },
                updateUrl: "/apm/sys/TSysEmailType/updateTSysEmailType",
                updateData: () => {
                    return this.tSysEmailTypeForm
                },
                deleteUrl: "/apm/sys/TSysEmailType/deleteTSysEmailTypeByFdId",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apm/sys/TSysEmailType/updateTSysEmailTypeSort',
                updateSortListUrl: '/apm/sys/TSysEmailType/updateTSysEmailTypeSortList',
                resetForm: () => {
                    this.tSysEmailTypeForm = {
                        fdParentId: '',
                        fdIsGroup: 0,
                        fdName: '',
                        fdSort: '',
                        fdComment: '',
                    };
                },
                afterOpenAddDialog: (node) => {
                    this.tSysEmailTypeForm.fdParentId = node.fdId;
                },
            };
            return treeOptions;
        },
        refreshTable() {
            if (this.tSysEmailSearchForm.type == 1) {
                this.selectedEmailId = "";
                this.emailParamTableTitle = "";
                this.$refs.tSysEmailRef.refresh();
                this.$refs.tSysEmailParamRef.refresh();
            } else if (this.tSysEmailSearchForm.type == 2) {
                this.selectedTemplateId = "";
                this.selectedTemplateName = "模板接口";
                this.$refs.tSysEmailTemplateRef.refresh();
                this.$refs.tSysEmailInterfaceConfigRef.refresh();
                this.tSysEmailTemplateForm = {
                    fdId: "",
                    fdTypeId: "",
                    fdName: "",
                    fdContent: "",
                }
            } else {
                this.$refs.tSysEmailInterfaceRef.refresh();
            }
        },
        // 右侧：查询事件
        searchEvent() {
            // 表单rules认证
            this.$refs.tSysEmailSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tSysEmailRef.refresh();
            });
        },
        // 编辑模板
        editTemplate(id) {
            this.$request({
                url: '/apm/sys/TSysEmailTemplate/getTSysEmailTemplateByFdId',
                method: 'post',
                data: {
                    fdId: id,
                }
            }).then(response => {
                this.tSysEmailTemplateForm = response.data;
            })
        },
        initTemplateForm() {
            this.tSysEmailTemplateForm = {
                fdId: "",
                fdTypeId: "",
                fdName: "",
                fdContent: "",
            }
        },
        previewTemplate() {
            // 预览
            this.template = "";
            this.showPreviewTemplate = true;
            this.$request({
                url: '/apm/sys/TSysEmail/getPreviewTemplateInfo',
                method: 'post',
                data: {
                    templateId: this.selectedTemplateId,
                }
            }).then(response => {
                this.template = response.data;
            })
        },
        setTemplate() {
            this.tSysEmailTemplateForm.fdContent = `亲爱的**：
<tab>您好，中台系统为您推送***********，请您关注!
<tab>\${test.title}
<tab>\${test.grid}

温馨提醒：该邮件为系统自动推送邮件。如有疑问，请回复该邮件到相关人员！`;
        },
        addTemplate() {
            let content = this.tSysEmailTemplateForm.fdContent;
            if (content == null || content == "") {
                this.initTemplateForm();
                return;
            }
            this.$confirm(`新建模板会清空当前内容，是否继续?`, '提示', {
                confirmButtonText: '新建',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.initTemplateForm();
            });
        },
        delTemplate() {
            let id = this.tSysEmailTemplateForm.fdId;
            if (id == null || id == "") {
                this.initTemplateForm();
                return;
            }
            this.$request({
                url: '/apm/sys/TSysEmailTemplate/deleteTSysEmailTemplateByFdId',
                method: 'post',
                data: {
                    fdId: id,
                }
            }).then(response => {
                this.$message.success("删除成功");
                this.initTemplateForm();
                this.$refs.tSysEmailTemplateRef.refresh();
            })
        },
        saveTemplate() {
            let form = this.tSysEmailTemplateForm;
            if (form.fdTypeId == null || form.fdTypeId == "") {
                this.$message.error("请选择类型");
                return;
            }
            if (form.fdName == null || form.fdName == "") {
                this.$message.error("请输入名称");
                return;
            }
            if (form.fdContent == null || form.fdContent == "") {
                this.$message.error("请填写内容");
                return;
            }

            this.$request({
                url: '/apm/sys/TSysEmailTemplate/saveTSysEmailTemplate',
                method: 'post',
                data: this.tSysEmailTemplateForm
            }).then(response => {
                this.$message.success("保存成功");
                this.editTemplate(response.data);
                this.$refs.tSysEmailTemplateRef.refresh();
            })
        },
        sendEmail() {
            let selection = this.$refs.tSysEmailRef.getSelection();
            if (selection.length == 0) {
                this.$message.error(`请选择需要预览的邮件！`);
                return;
            } else if (selection.length > 1) {
                this.$message.error(`只能选择一行！`);
                return;
            }
            this.$request({
                url: '/apm/sys/TSysEmail/sendEmail',
                method: 'post',
                data: {
                    fdId: selection[0].fdId,
                }
            }).then(response => {
                this.$message.success("发送成功");
            })
        },
        previewEmail() {
            this.emailInfo = {
                ccList: [],
                toList: [],
                attachments: [],
                title: "",
                content: "",
            }
            let selection = this.$refs.tSysEmailRef.getSelection();
            if (selection.length == 0) {
                this.$message.error(`请选择需要预览的邮件！`);
                return;
            } else if (selection.length > 1) {
                this.$message.error(`只能选择一行！`);
                return;
            }
            this.showPreviewEmail = true;
            this.previewEmailLoading = true;
            this.$request({
                url: '/apm/sys/TSysEmail/getPreviewEmailInfo',
                method: 'post',
                data: {
                    fdId: selection[0].fdId,
                }
            }).then(response => {
                this.emailInfo = response.data;
            }).finally(() => {
                this.previewEmailLoading = false;
            });

        },
        copyEmail() {
            let selectRow = this.$refs.tSysEmailRef.getSelectOne();

            if (selectRow == null) {
                return;
            }
            this.$request({
                url: '/apm/sys/TSysEmail/copyEmail',
                method: 'post',
                data: {
                    fdId: selectRow.fdId
                }
            }).then(response => {
                this.$message.success("复制成功");
                this.$refs.tSysEmailRef.refresh();
                this.$refs.tSysEmailParamRef.refresh();
            })
        },
        previewInterfaceData() {
            let selectRow = this.$refs.tSysEmailInterfaceRef.getSelectOne();

            if (selectRow == null) {
                return;
            }
            this.$request({
                url: '/apm/sys/TSysEmailInterface/previewData',
                method: 'post',
                data: {
                    path: selectRow.fdValue,
                    dataMap: selectRow.fdData
                }
            }).then(response => {
                this.$alert(response.data, '数据请求结果', {
                    dangerouslyUseHTMLString: true
                });
            })
        },
        copyEmailInterface() {
            let selectRow = this.$refs.tSysEmailInterfaceRef.getSelectOne();

            if (selectRow == null) {
                return;
            }
            this.$request({
                url: '/apm/sys/TSysEmailInterface/copyInterface',
                method: 'post',
                data: {
                    fdId: selectRow.fdId
                }
            }).then(response => {
                this.$message.success("复制成功");
                this.$refs.tSysEmailInterfaceRef.refresh();
            })
        },

        downloadAttachment(interfaceId) {
            let selection = this.$refs.tSysEmailRef.getSelectOne();
            download({
                url: '/apm/sys/TSysEmail/downloadEmailAttachment',
                methods: 'post',
                data: {
                    emailId: selection.fdId,
                    interfaceId: interfaceId,
                }
            })
        },
        changeTab(val) {
            if (this["tabRefresh" + val]) {
                this.refreshTable();
                this["tabRefresh" + val] = false;
            }
        }
    }
}
</script>

<style scoped>
.tree-node {
    font-size: 15px;
}

.template-textarea {
    height: 100%;
}

.template-textarea /deep/ .el-textarea__inner {
    height: 100%;
}

.email-label {
    font-weight: bold;
}

.email-address {
    color: gray;
}

.email-content {
    padding: 5px;
    border: 1px solid #E2E7EF;
    color: black;
}

.email-attachment {
    cursor: pointer;
    text-decoration: underline;
    color: #1890FF;
    margin-right: 15px;
}

.help-title {
    font-size: 15px;
    font-weight: bold;
    padding: 10px 0 3px 0;
}

.help-title-2 {
    font-size: 15px;
    font-weight: bold;
    padding: 3px 0 3px 0;
}
</style>
