<template>
    <ap-container>
        <ap-aside margin="1111" width="230px">
            <ap-aside-tree ref="cptTree" :options.sync="treeOptions">
                <el-form slot="form" ref="tDevCpt" :inline="true" label-width="80px"
                         :model="tDevCptForm" :rules="tDevCptRules" class="ap-form">
                    <div class="ap-form-row">
                        <el-form-item label="父节点" prop='fdParentId'>
                            <el-select v-model="tDevCptForm.fdParentId" filterable placeholder="请选择父节点">
                                <el-option label="无" value=""/>
                                <el-option
                                    v-for="item in parentList"
                                    :key="item.fdId"
                                    :label="item.fdName"
                                    :value="item.fdId"
                                />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="ap-form-row">
                        <el-form-item label='节点类型' prop='fdType'>
                            <el-select v-model="tDevCptForm.fdType" filterable placeholder="请选择类型">
                                <el-option key="1" label="Tab" :value=1></el-option>
                                <el-option key="2" label="组件分组" :value=2></el-option>
                                <el-option key="3" label="组件" :value=3></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='语言' prop='fdLanguage'>
                            <el-select v-model="tDevCptForm.fdLanguage" filterable placeholder="请选择语言">
                                <el-option key="vue" label="vue" value="vue"></el-option>
                                <el-option key="java" label="java" value="java"></el-option>
                                <el-option key="abap" label="abap" value="abap"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="ap-form-row">
                        <el-form-item label='名称' prop='fdName'>
                            <el-input v-model='tDevCptForm.fdName'></el-input>
                        </el-form-item>
                        <el-form-item label='备注' prop='fdRemark'>
                            <el-input v-model='tDevCptForm.fdRemark'></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label='编码' prop='fdCode' v-if="tDevCptForm.fdType == 3">
                        <el-input v-model='tDevCptForm.fdCode'></el-input>
                    </el-form-item>
                    <el-form-item label='基础模板' prop='fdBaseId' v-if="tDevCptForm.fdType == 3">
                        <el-select v-model="tDevCptForm.fdBaseId" filterable placeholder="请选择基础模板">
                            <el-option label="无" value=""/>
                            <el-option
                                v-for="item in cptBaseList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label='图标' prop='fdIcon' v-if="tDevCptForm.fdType == 3">
                        <el-input v-model='tDevCptForm.fdIcon'></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input v-model='tDevCptForm.fdSort'></el-input>
                    </el-form-item>
                </el-form>
                <span slot="tree" slot-scope="scope"
                      :style="scope.data.fdType == 3 ? 'color: #1682e6;font-size: 14px;':''">
                    <i :class="scope.data.fdIcon"/>
                    {{ scope.data.fdName }}
                </span>
            </ap-aside-tree>
        </ap-aside>
        <ap-split-panel></ap-split-panel>
        <ap-container>
            <ap-header margin="1110" height="30%">
                <ap-table ref="tDevCptTemplateTableRef" :options.sync="tDevCptTemplateTable">
                    <template #slotTemplate="searchProps">
                        <el-input v-model="searchProps.rowData.fdTemplate" type="textarea" :rows=10></el-input>
                    </template>
                    <template #slotDefault="searchProps">
                        <el-input v-model="searchProps.rowData.fdDefault" type="textarea" :rows=10></el-input>
                    </template>
                </ap-table>
            </ap-header>
            <ap-container>
                <ap-header margin="0110" height="50%">
                    <ap-table ref="tDevCptParamTableRef" :options.sync="tDevCptParamTable">
                        <template #slotOption="searchProps">
                            <el-input v-model="searchProps.rowData.fdOption" type="textarea" :rows=5></el-input>
                            <span
                                style="color: #909399;">注1: 数组格式 [{label:"名字1", value:"值1"},{label:"名字2", value:"值2"}]</span><br>
                            <span style="color: #909399;">注2: 对象格式 {attr1:"属性1", attr2:"属性2"}</span><br>
                        </template>
                    </ap-table>
                </ap-header>
                <ap-main margin="0110">
                    <ap-table ref="tDevCptParamTemplateTableRef" :options.sync="tDevCptParamTemplateTable">
                        <template #slotTemplate="searchProps">
                            <!--                            <el-input v-model="searchProps.rowData.fdTemplate" type="textarea" :rows=10></el-input>-->
                            <cpt-template v-model="searchProps.rowData.fdTemplate" :cptId="selectedCptId"></cpt-template>
                        </template>
                        <template #slotDefault="searchProps">
                            <el-input v-model="searchProps.rowData.fdDefault" type="textarea" :rows=10></el-input>
                        </template>
                    </ap-table>
                </ap-main>
            </ap-container>
        </ap-container>
        <el-dialog
            title="提示"
            :visible.sync="showCopyDialog"
            width="30%">
            <span>复制参数、复制参数模板</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doCopyParam()">仅复制参数</el-button>
                <el-button type="primary" @click="doCopyParam('1')">复制参数和参数模板</el-button>
              </span>
        </el-dialog>
        <el-dialog
            title="参数脚本"
            :visible.sync="showJsCodeDialog"
            width="1500px">
            <div style="width: 100%;height: 450px" class="flex-justify-start">
                <div style="width: 400px;height: 100%">
                    <ap-aside-tree ref="cptParamTreeRef" :options.sync="cptParamTreeOptions">
                        <div slot="tree" slot-scope="scope" class="flex-justify-between" style="width: 100%">
                            <div>
                                <span @click="copyText(scope.data.fdName, $event)">{{ scope.data.fdName }} </span>
                                <span class="ap-color-blue"
                                      @click="copyParamValue(scope.data.fdCode, $event)">{{ scope.data.fdCode }}</span>
                            </div>
                            <div style="margin-right: 10px">
                                <div class="ap-tag" style="font-size: 12px;padding: 2px 5px;"
                                     @click="insertScript(scope.data)">
                                    <span v-if="scope.data.fdShowType == 2">开</span>
                                    <span v-else>不为空</span>
                                </div>
                            </div>
                        </div>
                    </ap-aside-tree>
                </div>
                <div class="flex-1" style="height: 100%;margin-left: 15px">
                    <ap-table ref="tDevCptScriptRef" :options.sync="tDevCptScriptOpt"></ap-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showJsCodeDialog = false">取 消</el-button>
              </span>
        </el-dialog>
        <el-dialog
            title="参数编码/参数名称 批量更新"
            :visible.sync="showHandleCptCodeDialog"
            width="700px">
            <el-form :model="replaceForm" label-width="100px" :inline="true" class="ap-form">
                <div class="ap-form-row">
                    <el-form-item label='旧参数名称' prop='oldName'>
                        <el-input v-model='replaceForm.oldName'></el-input>
                    </el-form-item>
                    <el-form-item label='新参数名称' prop='newName'>
                        <el-input v-model='replaceForm.newName'></el-input>
                    </el-form-item>
                </div>
                <div class="ap-form-row">
                    <el-form-item label='旧参数编码' prop='oldCode'>
                        <el-input v-model='replaceForm.oldCode'></el-input>
                    </el-form-item>
                    <el-form-item label='新参数编码' prop='newCode'>
                        <el-input v-model='replaceForm.newCode'></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showHandleCptCodeDialog = false">取 消</el-button>
                <el-button type="primary" @click="replaceCptNameAndCode">确认替换</el-button>
              </span>
        </el-dialog>
    </ap-container>
</template>

<script>
import clipboard from 'ap-util/util/ClipboardUtil'
import CptTemplate from './CptTemplate'

export default {
    name: 'DevCpt',
    components: {
        CptTemplate
    },
    data() {

        return {
            // ----- 左侧树 -----
            treeOptions: this.getTreeOption(),
            parentList: [],
            cptBaseList: [],
            tDevCptForm: {},
            tDevCptRules: {},
            selectedCptId: "",
            selectedCpt: {},
            // ----- 右侧 -----
            tDevCptTemplateTable: this.getCptTemplateTableOption(),
            tDevCptParamTable: this.getCptParamTableOption(),
            tDevCptParamTemplateTable: this.getCptParamTemplateTableOption(),
            selectedParam: "",
            template: "",
            optionType: "",
            showCopyDialog: false,
            showHandleCptCodeDialog: false,
            showJsCodeDialog: false,
            replaceForm: {
                oldName: "",
                newName: "",
                oldCode: "",
                newCode: "",
            },
            cptParamTreeOptions: this.getCptParamTreeOptions(),
            isErrorScript: "0",
            tDevCptScriptOpt: this.getDevCptScriptOpt(),
            insertScriptId: ""
        }
    },
    mounted() {
        this.getCptList();
        this.getCptBaseList();
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "组件",
                dialogWidth: "700px",
                toolbarBtn: [{
                    icon: "el-icon-copy", onClick: () => {
                        this.copyCpt();
                    }
                }, {
                    icon: "el-icon-bug", onClick: () => {
                        this.clearCpt();
                    }
                }, "add", "edit", "del", "sort"],
                dialogTitle: "组件信息",
                sortByDrag: true,
                onClick: (data, node, comp) => {
                    this.selectedCptId = data.fdId;
                    this.selectedCpt = data;
                    this.selectedParam = "";
                    this.$refs.tDevCptParamTableRef.refresh();
                    this.$refs.tDevCptTemplateTableRef.refresh();
                    this.$refs.tDevCptParamTemplateTableRef.refresh();
                },
                loadOptions: {
                    url: "/apd/TDevCpt/getCptList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                    },
                },
                editOptions: {
                    url: "/apd/TDevCpt/getTDevCptByFdId",
                    data: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.tDevCptForm = response.data;
                    },
                    error() {
                    },
                },
                insertUrl: "/apd/TDevCpt/insertTDevCpt",
                insertData: () => {
                    return this.tDevCptForm
                },
                updateUrl: "/apd/TDevCpt/updateTDevCpt",
                updateData: () => {
                    return this.tDevCptForm
                },
                deleteUrl: "/apd/TDevCpt/deleteTDevCptByFdId",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apd/TDevCpt/updateTDevCptSort',
                updateSortListUrl: '/apd/TDevCpt/updateTDevCptSortList',
                sortByDrag: true,
                resetForm: () => {
                    this.tDevCptForm = {
                        fdName: '',
                        fdType: '',
                        fdCode: '',
                        fdParentId: '',
                        fdBaseId: '',
                        fdLanguage: '',
                        fdIcon: '',
                        fdRemark: '',
                        fdSort: '',
                    };
                },
                afterOpenAddDialog: (node) => {
                },
            };

            return treeOptions;
        },
        getCptList() {
            this.$request({
                url: '/apd/TDevCpt/getCptList',
                method: 'post',
                data: {}
            }).then(response => {
                this.parentList = response.data
            })
        },
        getCptBaseList() {
            this.$request({
                url: '/apd/TDevCptBase/getTDevCptBaseList',
                method: 'post',
                data: {}
            }).then(response => {
                this.cptBaseList = response.data
            })
        },
        // 右侧：组件模板表格
        getCptTemplateTableOption() {
            let tDevCptTemplateCols = [
                {
                    prop: 'fdCptId',
                    label: '所属组件',
                    type: "select",
                    selectOptionsRemote: "cptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    width: '80',
                    addDefaultValue: () => {
                        return this.selectedCptId;
                    }
                }, {
                    prop: 'fdParamName',
                    label: '参数名',
                    type: 'input',
                    width: '90',
                }, {
                    prop: 'fdTemplate',
                    label: '组件模板',
                    minWidth: '130',
                    type: "search",
                    searchTitle: "模板编辑",
                    searchSlot: 'slotTemplate',
                    searchConfirm: (row) => {
                        return true
                    },
                    searchClear: (row) => {
                        row.fdTemplate = '';
                        return true;
                    },
                    html: (value, row) => {
                        return this.handleTemplateHtml(value);
                    },
                    help: "1、参数格式：\${xxxx}<br> xxx只能是字母，默认空格连接<br>" +
                        "2、数组参数格式：\${xxxx#abc}<br>使用#连接，abc为自定义连接符。使用\\n表示换行<br>" +
                        "3、if判断：<br><#if>xxxx&lt/#if>"
                }, {
                    prop: 'fdAddScriptId',
                    label: '模板添加脚本',
                    width: '150',
                    type: "select",
                    selectClearable: true,
                    selectOptionsRemote: "scriptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectHtml: (value, text, row) => {
                        return `<span class="ap-color-blue" title='${row.addScript}'>${text}</span>`
                    },
                }, {
                    prop: 'fdDefault',
                    label: '默认模板',
                    minWidth: '70',
                    type: "search",
                    searchTitle: "模板编辑",
                    searchSlot: 'slotDefault',
                    searchConfirm: (row) => {
                        return true
                    },
                    searchClear: (row) => {
                        row.fdDefault = '';
                        return true;
                    },
                }, {
                    prop: 'fdDefaultScriptId',
                    label: '默认模板使用脚本',
                    width: '150',
                    type: "select",
                    selectClearable: true,
                    selectOptionsRemote: "scriptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectHtml: (value, text, row) => {
                        return `<span class="ap-color-blue" title='${row.defaultScript}'>${text}</span>`
                    }
                }, {
                    prop: 'fdLeftSpace',
                    label: '左侧空格',
                    type: 'input',
                    width: '60',
                }, {
                    prop: 'fdSort',
                    label: '排序',
                    type: 'input',
                    width: '60',
                },
            ];
            let tDevCptTemplateTable = {
                title: "组件模板",
                columns: tDevCptTemplateCols,
                dataUrl: "/apd/TDevCptTemplate/getTDevCptTemplateGridList",
                saveUrl: "/apd/TDevCptTemplate/saveTDevCptTemplateGridData",
                editPk: "fdId", //默认fdId
                deletePk: "fdId", // 默认fdId
                deleteUrl: "/apd/TDevCptTemplate/deleteTDevCptTemplateGridData",
                toolbarBtn: [{
                    btnType: "primary", text: "脚本", icon: "el-icon-collection-tag", onClick: () => {
                        if (this.selectedCptId == null || this.selectedCptId == "") {
                            this.$message.error("请选择组件");
                            return;
                        }
                        if (this.$refs.tDevCptParamTableRef.getAddRowList().length > 0 ||
                            this.$refs.tDevCptParamTableRef.getEditRowList().length > 0 ||
                            this.$refs.tDevCptTemplateTableRef.getAddRowList().length > 0 ||
                            this.$refs.tDevCptTemplateTableRef.getEditRowList().length > 0 ||
                            this.$refs.tDevCptParamTemplateTableRef.getAddRowList().length > 0 ||
                            this.$refs.tDevCptParamTemplateTableRef.getEditRowList().length > 0) {
                            this.$message.error("请先保存数据");
                            return;
                        }

                        this.showJsCodeDialog = true;
                        this.$nextTick(() => {
                            this.$refs.tDevCptScriptRef.refresh();
                            this.$refs.cptParamTreeRef.reLoadTreeData();
                        })
                    }
                }, "separator", {
                    btnType: "primary", text: "编码替换", icon: "el-icon-transfer", onClick: () => {
                        this.showHandleCptCodeDialog = true;
                    }
                }, "separator", "add", "edit", "del", "refresh", "save"],
                showPagination: false,
                params: () => {
                    return {
                        cptId: this.selectedCptId
                    }
                },
                rowDblClickEvent: (row, column, event) => {
                    this.$refs.tDevCptTemplateTableRef.toggleEditRow(row);
                },
            };
            return tDevCptTemplateTable;
        },
        // 右侧：组件参数表格
        getCptParamTableOption() {
            let tDevCptParamCols = [
                {
                    prop: 'fdCptId',
                    label: '所属组件',
                    type: "select",
                    selectOptionsRemote: "cptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    width: '80',
                    addDefaultValue: () => {
                        return this.selectedCptId;
                    }
                }, {
                    prop: 'fdParentId',
                    label: '父参数',
                    type: "select",
                    selectOptionsRemote: "cptParamList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    width: '80',
                }, {
                    prop: 'fdName',
                    label: '参数名称',
                    type: 'input',
                    width: '110',
                }, {
                    prop: 'fdCode',
                    label: '参数编码',
                    type: 'input',
                    minWidth: '120',
                    help: `参数编码。<br>.value: 表示参数值<br>示例："\${InputType.value}"<br>click点击可复制参数取值（如："\${InputType.value}"）`
                }, {
                    prop: 'fdValue',
                    label: '默认值',
                    type: 'input',
                    width: '80',
                    showOverflowTooltip: true,
                    help: `默认值格式：<br>1、非数组参数：字符串<br>2、数组参数: 可执行js，格式：[{参数编码A:"参数值1"},{参数编码B:"参数值2"}]<br>示例：[{InputA:"add"},{InputB:"自定义",InputC:"按钮"}]`
                }, {
                    prop: 'fdShowScriptId',
                    label: '显示条件脚本',
                    width: '130',
                    type: "select",
                    selectClearable: true,
                    selectOptionsRemote: "scriptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectHtml: (value, text, row) => {
                        return `<span class="ap-color-blue" title='${row.showScript}'>${text}</span>`
                    },
                    help: `判断页面是否显示组件。为空，默认显示。<br>示例："\${InputType.value}" == "textarea"`
                }, {
                    prop: 'fdShowType',
                    label: '显示类型',
                    type: 'select',
                    width: '80',
                    selectOptions: [{label: "input", value: 1}, {label: "开关", value: 2}, {label: "下拉单选", value: 3},
                        {label: "数组参数", value: 4}, {label: "单选框", value: 5}, {label: "text", value: 6},
                        {label: "计数文本", value: 7}, {label: "分割线", value: 8}, {label: "文本信息", value: 9}],
                }, {
                    prop: 'fdOption',
                    label: '值选项',
                    width: '100',
                    showOverflowTooltip: true,
                    type: "search",
                    searchTitle: "选项值",
                    searchSlot: 'slotOption',
                    searchConfirm: (row) => {
                        return true
                    },
                    searchClear: (row) => {
                        row.fdOption = '';
                        return true;
                    },
                }, {
                    prop: 'fdMethodScriptId',
                    label: '参数值变化脚本',
                    width: '120',
                    type: "select",
                    selectClearable: true,
                    selectOptionsRemote: "scriptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectHtml: (value, text, row) => {
                        return `<span class="ap-color-blue" title='${row.methodScript}'>${text}</span>`
                    },
                    help: `参数值修改时，调用方法，用于直接设定其他参数值。<br>示例："\${InputType.value}" = "123"`
                }, {
                    prop: 'fdPlaceholder',
                    label: '占位文本',
                    type: 'input',
                    width: '120',
                    showOverflowTooltip: true
                }, {
                    prop: 'fdTab',
                    label: 'tab页',
                    type: 'input',
                    width: '60',
                }, {
                    prop: 'fdTip',
                    label: '提示',
                    type: 'input',
                    minWidth: '120',
                    showOverflowTooltip: true
                }, {
                    prop: 'fdRemark',
                    label: '备注',
                    type: 'input',
                    width: '80',
                    showOverflowTooltip: true,
                }, {
                    prop: 'fdSort',
                    label: '排序',
                    type: 'input',
                    width: '50',
                },
            ];
            let tDevCptParamTable = {
                title: "参数",
                columns: tDevCptParamCols,
                dataUrl: "/apd/TDevCptParam/getTDevCptParamGridList",
                saveUrl: "/apd/TDevCptParam/saveTDevCptParamGridData",
                editPk: "fdId", //默认fdId
                deletePk: "fdId", // 默认fdId
                deleteUrl: "/apd/TDevCptParam/deleteTDevCptParamGridData",
                sortUrl: "/apd/TDevCptParam/updateTDevCptParamSortList",
                toolbarBtn: [{
                    btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: () => {
                        this.copyParam()
                    }
                }, "separator",
                    "sortAuto", "sortDown", "sortUp", "separator",
                    "add", "edit", "del", "refresh", "save"],
                showPagination: false,
                params: () => {
                    return {
                        cptId: this.selectedCptId
                    }
                },
                rowClickEvent: (row, column, event) => {
                    this.selectedParam = row.fdId;
                    this.$refs.tDevCptParamTemplateTableRef.refresh();
                },
                rowDblClickEvent: (row, column, event) => {
                    this.$refs.tDevCptParamTableRef.toggleEditRow(row);
                },
            };
            return tDevCptParamTable;
        },
        // 右侧：参数模板表格
        getCptParamTemplateTableOption() {
            let tDevCptParamTemplateCols = [
                {
                    prop: 'fdParamId',
                    label: '所属参数',
                    type: "select",
                    selectOptionsRemote: "paramList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    width: '110',
                    addDefaultValue: () => {
                        return this.selectedParam;
                    }
                }, {
                    prop: 'fdParamName',
                    label: '参数名',
                    type: 'input',
                    width: '80',
                }, {
                    prop: 'fdTemplate',
                    label: '参数模板',
                    minWidth: '130',
                    showOverflowTooltip: true,
                    type: "search",
                    searchTitle: "模板编辑",
                    searchSlot: 'slotTemplate',
                    searchWidth:"1100px",
                    searchConfirm: (row) => {
                        return true
                    },
                    searchClear: (row) => {
                        row.fdTemplate = '';
                        return true;
                    },
                    html: (value, row) => {
                        return this.handleTemplateHtml(value);
                    },
                    help: `格式：参数格式必须为\${xxxx.xxx} 不能有空格`
                }, {
                    prop: 'fdAddScriptId',
                    label: '模板添加脚本',
                    width: '150',
                    help: `判断是否添加模板。为空，表示默认添加。`,
                    type: "select",
                    selectClearable: true,
                    selectOptionsRemote: "scriptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectHtml: (value, text, row) => {
                        return `<span class="ap-color-blue" title='${row.addScript}'>${text}</span>`
                    }
                }, {
                    prop: 'fdDefault',
                    label: '默认模板',
                    minWidth: '70',
                    showOverflowTooltip: true,
                    type: "search",
                    searchTitle: "模板编辑",
                    searchSlot: 'slotDefault',
                    searchConfirm: (row) => {
                        return true
                    },
                    searchClear: (row) => {
                        row.fdDefault = '';
                        return true;
                    },
                }, {
                    prop: 'fdDefaultScriptId',
                    label: '默认模板使用脚本',
                    width: '140',
                    help: `判断是否使用默认模板。为空，不使用默认模板。<br>示例："\${InputSize.value}" != ""`,
                    type: "select",
                    selectClearable: true,
                    selectOptionsRemote: "scriptList",
                    selectOptionsKey: {label: "fdName", value: "fdId"},
                    selectHtml: (value, text, row) => {
                        return `<span class="ap-color-blue" title='${row.defaultScript}'>${text}</span>`
                    }
                }, {
                    prop: 'fdLeftSpace',
                    label: '左侧空格',
                    type: 'input',
                    width: '60',
                }
            ];
            let tDevCptParamTemplateTable = {
                title: "参数模板",
                columns: tDevCptParamTemplateCols,
                dataUrl: "/apd/TDevCptParamTemplate/getTDevCptParamTemplateGridList",
                saveUrl: "/apd/TDevCptParamTemplate/saveTDevCptParamTemplateGridData",
                editPk: "fdId", //默认fdId
                deletePk: "fdId", // 默认fdId
                deleteUrl: "/apd/TDevCptParamTemplate/deleteTDevCptParamTemplateGridData",
                toolbarBtn: [{
                    btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: () => {
                        this.doCopyParamTemplate()
                    }
                }, "separator", "add", "edit", "del", "refresh", "save"],
                showPagination: false,
                params: () => {
                    return {
                        cptId: this.selectedCptId,
                        paramId: this.selectedParam
                    }
                },
                rowDblClickEvent: (row, column, event) => {
                    this.$refs.tDevCptParamTemplateTableRef.toggleEditRow(row);
                },
            };
            return tDevCptParamTemplateTable;
        },
        replaceCptNameAndCode() {
            let form = this.replaceForm;
            form.cptId = this.selectedCptId
            this.$request({
                url: '/apd/TDevCpt/replaceCptNameAndCode',
                method: 'post',
                data: form
            }).then(response => {
                this.$message.success("替换成功");
                this.$refs.tDevCptParamTableRef.refresh();
                this.$refs.tDevCptTemplateTableRef.refresh();
                this.$refs.tDevCptParamTemplateTableRef.refresh();
                this.showHandleCptCodeDialog = false;
            })
        },
        handleTemplateHtml(str) {
            if (str == null) {
                return "";
            }
            str = str.replaceAll("<", "&lt;")
            let html = `<div class="api-code" style="line-height: 14px;width: 100%; max-height: 80px;overflow: auto;">${str}</div>`;
            return html;
        },
        clearCpt() {
            this.$confirm(`清空无效组件配置(已删除组件的模板、脚本、参数、demo)?`, '提示', {
                confirmButtonText: '清空',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request({
                    url: '/apd/TDevCpt/clearCpt',
                    method: 'post',
                    data: {}
                }).then(response => {
                    this.$message.success("清空成功");
                    this.$refs.cptTree.reLoadTreeData();
                })
            })
        },
        copyCpt() {
            if (this.selectedCptId == "" || this.selectedCptId == null) {
                this.$message.error("请选择需要复制的行");
                return;
            }
            this.$confirm(`确认复制【${this.selectedCpt.fdName}】组件?`, '提示', {
                confirmButtonText: '复制',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request({
                    url: '/apd/TDevCpt/copyCpt',
                    method: 'post',
                    data: {
                        cptId: this.selectedCptId,
                    }
                }).then(response => {
                    this.$message.success("复制成功");
                    this.$refs.cptTree.reLoadTreeData();
                })
            })
        },
        copyParam(type) {
            this.showCopyDialog = true;
        },
        // 复制参数
        doCopyParam(type) {
            let selectedRows = this.$refs.tDevCptParamTableRef.getSelection();
            if (selectedRows.length < 1) {
                this.$message.error("请选择需要复制的行！");
                return;
            }
            if (selectedRows.length > 1) {
                this.$message.error("只能选择单行数据进行复制！");
                return;
            }

            this.$request({
                url: '/apd/TDevCptParam/copyParam',
                method: 'post',
                data: {
                    paramId: selectedRows[0].fdId,
                    copyTemplate: type
                }
            }).then(response => {
                this.$message.success("复制成功");
                this.$refs.tDevCptParamTableRef.refresh();
                if (type == "1") {
                    this.$refs.tDevCptParamTemplateTableRef.refresh();
                }
                this.showCopyDialog = false;
            })

        },
        // 复制参数模板
        doCopyParamTemplate() {
            let selectedRows = this.$refs.tDevCptParamTemplateTableRef.getSelection();
            if (selectedRows.length < 1) {
                this.$message.error("请选择需要复制的行！");
                return;
            }
            if (selectedRows.length > 1) {
                this.$message.error("只能选择单行数据进行复制！");
                return;
            }

            this.$request({
                url: '/apd/TDevCptParam/copyParamTemplate',
                method: 'post',
                data: {
                    templateId: selectedRows[0].fdId,
                }
            }).then(response => {
                this.$message.success("复制成功");
                this.$refs.tDevCptParamTemplateTableRef.refresh();
            })

        },
        // 组件参数
        getCptParamTreeOptions() {
            let treeOptions = {
                title: "组件参数",
                initData: false,
                onClick: (data, node, comp) => {
                },
                loadOptions: {
                    url: "/apd/TDevCptParam/getTDevCptParamList",
                    data: () => {
                        return {
                            cptId: this.selectedCptId
                        }
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                    },
                },
            };

            return treeOptions;
        },
        // 组件脚本
        getDevCptScriptOpt() {
            let columns = [
                {
                    prop: 'fdName',
                    label: '名称',
                    type: 'input',
                    width: 180,
                    help: '参数- <br>显示- <br>显示事件- <br>显示方法-'
                }, {
                    prop: 'fdCode',
                    label: '变量名',
                    type: 'input',
                    width: 100,
                    help: '模板中执行判断的变量名。<br>如<#if testName>'
                }, {
                    prop: 'fdScript',
                    label: '脚本',
                    type: 'input',
                    help: 'js执行脚本。' +
                        '<br><b>一、用于判断是否显示</b>' +
                        '<br><b>可用参数：</b>paramObj, paramTemplateObj' +
                        '<br><b>示例1：</b>"\${InputSize.value}" != ""<br><b>示例2：</b>paramTemplateObj.attrs.length>0'+
                        '<br><b>二、用于修改值(固定格式)：</b>'+
                        '<br><b>可用参数：</b>paramObj,paramList' +
                        '<br><b>格式：</b>changeValue(paramList, \'参数编码\' , \'新值\')' +
                        '<br><b>示例1：</b>changeValue(paramList, \'typeValue\' , \'a\')'
                }, {
                    prop: 'fdComment',
                    label: '备注',
                    type: 'input',
                    width: 100,
                }
            ];
            let tableOpt = {
                title: "组件脚本",
                columns: columns,
                editPk: "fdId", //默认fdId
                deletePk: "fdId", // 默认fdId
                dataUrl: "/apd/TDevCptScript/getTDevCptScriptGridList",
                saveUrl: "/apd/TDevCptScript/saveTDevCptScriptGridData",
                deleteUrl: "/apd/TDevCptScript/deleteTDevCptScriptGridData",
                toolbarBtn: [{
                    btnType: "primary", text: "异常筛选", icon: "el-icon-copy", onClick: () => {
                        this.isErrorScript = "1";
                        this.$refs.tDevCptScriptRef.refresh();
                    }
                }, {
                    btnType: "primary", text: "复制", icon: "el-icon-copy", onClick: () => {
                        this.copyScript()
                    }
                }, "separator", "add", "edit", "del", "cancel", "refresh", "save"],
                initData: false, // 默认false
                showPagination: false,
                afterLoadData: () => {
                    this.isErrorScript = "0";
                },
                addDefaultObj: () => {
                    return {
                        fdCptId: this.selectedCptId
                    }
                },
                params: () => {
                    return {
                        cptId: this.selectedCptId,
                        isErrorScript: this.isErrorScript
                    }
                },
                rowDblClickEvent: (row, column, event) => {
                    this.$refs.tDevCptScriptRef.toggleEditRow(row);
                },
                afterSave: this.refreshScriptTable,
                afterAll: () => {
                    if (this.insertScriptId == null || this.insertScriptId == "") {
                        return;
                    }
                    this.$refs.tDevCptScriptRef.toggleRowSelectionByRowKey(this.insertScriptId, true);
                    this.insertScriptId = "";
                }
            };
            return tableOpt;
        },
        // 刷新脚本相关表格
        refreshScriptTable() {
            console.log("刷新外部表格");
            this.$refs.tDevCptParamTableRef.refresh();
            this.$refs.tDevCptTemplateTableRef.refresh();
            this.$refs.tDevCptParamTemplateTableRef.refresh();
        },
        copyText(text, event) {
            clipboard(text, event);
        },
        copyParamValue(code, event) {
            let str = '"${' + code + '.value}"';
            clipboard(str, event);
        },
        insertScript(data) {
            let name = "";
            if (data.fdName.indexOf("事件") > -1) {
                name = "显示事件-" + data.fdName.replace("事件", "");
            } else if (data.fdCode.indexOf("Method") > -1) {
                name = "显示方法-" + data.fdName;
            } else {
                name = "显示-" + data.fdName;
            }

            let script = "";
            if (data.fdShowType == 2) {
                // 开
                script = '"${' + data.fdCode + '.value}" == "1"';
            } else {
                // 不为空
                script = '"${' + data.fdCode + '.value}" != ""';
            }
            let msg = `确定添加脚本?
                    <br><span style="font-weight: bold">名称：</span><span class="ap-color-blue">${name}</span>
                    <br><span style="font-weight: bold">脚本：</span><span class="ap-color-blue">${script}</span>`
            this.$confirm(msg, '提示', {
                confirmButtonText: '确定添加',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                this.$request({
                    url: '/apd/TDevCptScript/insertTDevCptScript',
                    method: 'post',
                    data: {
                        fdCptId: this.selectedCptId,
                        fdName: name,
                        fdScript: script,
                    }
                }).then(response => {
                    this.insertScriptId = response.data;
                    this.$message.success("添加成功：" + name);
                    this.$refs.tDevCptScriptRef.refresh();
                    this.refreshScriptTable();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                });
            });
        },
        // 复制参数模板
        copyScript() {
            let selectedRows = this.$refs.tDevCptScriptRef.getSelection();
            if (selectedRows.length < 1) {
                this.$message.error("请选择需要复制的行！");
                return;
            }
            if (selectedRows.length > 1) {
                this.$message.error("只能选择单行数据进行复制！");
                return;
            }

            this.$request({
                url: '/apd/TDevCptScript/copyScript',
                method: 'post',
                data: {
                    scriptId: selectedRows[0].fdId,
                }
            }).then(response => {
                this.$message.success("复制成功");
                this.$refs.tDevCptScriptRef.refresh();
            })

        },
    }
}
</script>

<style scoped>
</style>
