<template>
    <ap-container>
        <ap-aside margin="1111" width="300px">
            <ap-aside-tree :options.sync="treeOptions">
                <el-form slot="form" ref="tSysInterfaceType" :inline="true" label-width="80px"
                         :model="tSysInterfaceTypeForm" :rules="tSysInterfaceTypeRules">
                    <el-form-item label='父id' prop='fdParentId'>
                        <el-select v-model="tSysInterfaceTypeForm.fdParentId" filterable placeholder="请选择父节点">
                            <el-option label="无" value=""></el-option>
                            <el-option
                                v-for="item in interfaceTypeList"
                                :key="item.fdId"
                                :label="item.fdName"
                                :value="item.fdId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分组">
                        <el-radio v-model="tSysInterfaceTypeForm.fdIsGroup" :label="1">是
                        </el-radio>
                        <el-radio v-model="tSysInterfaceTypeForm.fdIsGroup" :label="0">否
                        </el-radio>
                    </el-form-item>
                    <el-form-item label='名称' prop='fdName'>
                        <el-input v-model='tSysInterfaceTypeForm.fdName'></el-input>
                    </el-form-item>
                    <el-form-item label='排序' prop='fdSort'>
                        <el-input v-model='tSysInterfaceTypeForm.fdSort'></el-input>
                    </el-form-item>
                    <el-form-item label='备注' prop='fdComment'>
                        <el-input v-model='tSysInterfaceTypeForm.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-main margin="1110">
                <ap-table ref="tSysInterfaceRef" :options.sync="tSysInterfaceOpt"></ap-table>
            </ap-main>
        </ap-container>
    </ap-container>
</template>

<script>
export default {
    name: 'SysInterface',
    data() {

        let columns = [
            {
                prop: 'fdTypeId',
                label: '类型',
                type: "select",
                width: "120px",
                selectOptionsKey: {label: "fdName", value: "fdId"},
                selectOptionsRemote: "typeList",
                addDefaultValue: () => {
                    return this.treeSelectedValue;
                }
            }, {
                prop: 'fdType',
                label: '类型',
                type: 'select',
                width: 80,
                selectOptions: [{label: "数据接口", value: 1}, {label: "校验接口", value: 2}, {label: "文件接口", value: 3}],
                addDefaultValue: 1
            }, {
                prop: 'fdName',
                label: '名称',
                type: 'input',
                width: "150px",
            }, {
                prop: 'fdValue',
                label: '接口地址',
                type: 'input'
            }, {
                prop: 'fdComment',
                label: '备注',
                type: 'input',
                width: "150px",
            },
        ];
        let tableOpt = {
            title: () => {
                return this.tableTitle
            },
            columns: columns,
            editPk: "fdId", //默认fdId
            deletePk: "fdId", // 默认fdId
            dataUrl: "/apm/sys/TSysInterface/getTSysInterfaceGridList",
            saveUrl: "/apm/sys/TSysInterface/saveTSysInterfaceGridData",
            deleteUrl: "/apm/sys/TSysInterface/deleteTSysInterfaceGridData",
            toolbarBtn: [{btnType: "primary", text: "预览", icon: "el-icon-magic-stick", onClick: this.previewData},
                "separator","add", "edit", "del", "refresh", "save"],
            initData: true,
            params: () => {
                return {
                    typeId: this.treeSelectedValue
                }
            }
        };

        return {
            // ----- 左侧树 -----
            interfaceTypeList: [],
            treeOptions: this.getTreeOption(),
            tSysInterfaceTypeForm: {
                fdParentId: '',
                fdIsGroup: 0,
                fdName: '',
                fdSort: '',
                fdComment: '',
            },
            tSysInterfaceTypeRules: {
                fdName: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ]
            },
            treeSelectedValue: "",
            treeSelectedNode: null,
            // ----- 右侧 -----
            tableTitle: "接口列表",
            tSysInterfaceOpt: tableOpt,
        }
    },
    methods: {
        // 左侧树：配置
        getTreeOption() {
            let treeOptions = {
                title: "接口分组",
                toolbarBtn: ["add", "edit", "del", "sort"],
                dialogTitle: "接口分组",
                defaultExpandAll: true,
                showCheckbox: false,
                sortByDrag: true,
                onClick: (data, node, comp) => {
                    this.treeSelectedNode = data;
                    this.treeSelectedValue = data.fdId;
                    if (data.fdIsGroup == 1) {
                        return;
                    }
                    this.tableTitle = `接口列表 -【${data.fdName}】`;
                    this.$refs.tSysInterfaceRef.refresh();
                },
                loadOptions: {
                    url: "/apm/sys/TSysInterfaceType/getTSysInterfaceTypeList",
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                        this.interfaceTypeList = response.data;
                    },
                },
                editOptions: {
                    url: "/apm/sys/TSysInterfaceType/getTSysInterfaceTypeByFdId",
                    data: (node) => {
                        return {
                            fdId: node.fdId
                        }
                    },
                    success: (response) => {
                        this.tSysInterfaceTypeForm = response.data;
                    },
                    error() {
                    },
                },
                insertUrl: "/apm/sys/TSysInterfaceType/insertTSysInterfaceType",
                insertData: () => {
                    return this.tSysInterfaceTypeForm
                },
                updateUrl: "/apm/sys/TSysInterfaceType/updateTSysInterfaceType",
                updateData: () => {
                    return this.tSysInterfaceTypeForm
                },
                deleteUrl: "/apm/sys/TSysInterfaceType/deleteTSysInterfaceTypeByFdId",
                deleteData: (node) => {
                    return {
                        fdId: node.fdId
                    }
                },
                updateSortUrl: '/apm/sys/TSysInterfaceType/updateTSysInterfaceTypeSort',
                updateSortListUrl: '/apm/sys/TSysInterfaceType/updateTSysInterfaceTypeSortList',
                resetForm: () => {
                    this.tSysInterfaceTypeForm = {
                        fdParentId: '',
                        fdIsGroup: 0,
                        fdName: '',
                        fdSort: '',
                        fdComment: '',
                    };
                },
                afterOpenAddDialog: (node) => {
                    this.tSysInterfaceTypeForm.fdParentId = node.fdId;
                },
            };
            return treeOptions;
        },
        previewData() {
            let selectRow = this.$refs.tSysInterfaceRef.getSelectOne();

            if (selectRow == null) {
                return;
            }
            this.$request({
                url: '/apm/sys/TSysInterface/previewData',
                method: 'post',
                data: {
                    path: selectRow.fdValue
                }
            }).then(response => {
                console.log(response.data);
                this.$alert( response.data,'数据请求结果', {
                    dangerouslyUseHTMLString: true
                });
            })
        }
    }
}
</script>

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