<template>
    <!--  调用链查询  -->
    <div>
        <!--    面包屑导航区    -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>调用链管理</el-breadcrumb-item>
            <el-breadcrumb-item>调用链</el-breadcrumb-item>
        </el-breadcrumb>

        <!--    搜索表单区域    -->
        <el-card>
            <el-form :inline="true" :model="queryCallGraphForm">
                <el-form-item label="项目名称" prop="projectName">
                    <el-input placeholder="请输入项目名称" v-model="queryCallGraphForm.projectName" clearable/>
                </el-form-item>
                <el-form-item label="渠道" prop="channel">
                    <el-input placeholder="请输入渠道" v-model="queryCallGraphForm.channel" clearable/>
                </el-form-item>
                <el-form-item label="分支" prop="branch">
                    <el-input placeholder="请输入分支" v-model="queryCallGraphForm.branch" clearable/>
                </el-form-item>
                <el-form-item label="类名" prop="simpleClassName">
                    <el-input placeholder="请输入类名" v-model="queryCallGraphForm.className" clearable/>
                </el-form-item>
                <el-form-item label="方法名" prop="fullMethodName">
                    <el-input placeholder="请输入方法名称" v-model="queryCallGraphForm.methodName" clearable/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryCallGraph">查询</el-button>
                </el-form-item>
            </el-form>

            <!--    列表区域    -->
            <el-table :data="callGraphTable" style="{width: 100%}"
                      border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                <el-table-column type="index"/>
                <el-table-column prop="version" label="版本" showOverflowTooltip/>
                <el-table-column prop="simpleClassName" label="类名" showOverflowTooltip/>
                <el-table-column prop="fullClassName" label="全类名" showOverflowTooltip/>
                <el-table-column prop="methodName" label="方法名" showOverflowTooltip/>
                <el-table-column prop="fullMethodName" label="全方法名" showOverflowTooltip/>
                <el-table-column label="操作" align="center" min-width="150px" showOverflowTooltip>
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showDialog(scope.row.methodCallGraph)">向上的调用链</el-button>
                        <el-button type="primary" size="mini" @click="showInterfaceDialog(scope.row.id)">影响接口</el-button>
                        <el-button type="primary" size="mini" @click="showNotControllerDialog(scope.row.id)">响应非接口</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--    分页    -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="queryCallGraphForm.size"
                :current-page="queryCallGraphForm.page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>


        <el-dialog
            title="向上的调用链"
            :visible.sync="callGraphDialogVisible"
            width="80%"
            @close="callGraphDialogClosed">
            <span style="white-space: pre-wrap; font-size: 14px; color: #303133; line-height: 20px">{{methodCallGraphForDialog}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="callGraphDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="方法修改会影响的接口"
            :visible.sync="interfaceDialogVisible"
            width="50%"
            @close="interfaceDialogClosed">
            <el-table :data="interfaceTable" style="width: 100%">
                <el-table-column prop="fullClassName" label="接口所在类名" min-width="120px"/>
                <el-table-column prop="simpleMethodName" label="接口方法名"/>
                <el-table-column prop="line" label="接口调用方法的行号" min-width="50px"/>
                <el-table-column prop="interfaceAddr" label="接口地址"/>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="interfaceDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="方法修改会影响的接口"
            :visible.sync="notControllerDialogVisible"
            width="50%"
            @close="notControllerDialogClosed">
            <el-table :data="notControllerTable" style="width: 100%">
                <el-table-column prop="fullClassName" label="类名" min-width="120px"/>
                <el-table-column prop="simpleMethodName" label="方法名"/>
                <el-table-column prop="line" label="接口调用方法的行号" min-width="50px"/>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="notControllerDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "JavaCallGraphPage",
    data() {
        return {
            // 分页查询参数
            queryCallGraphForm: {
                // projectName: "quality-server",
                // channel: "QIKE",
                // branch: "dev",
                // className: null,
                // methodName: null,
                page: 1,
                size: 10
            },
            total: 0,
            callGraphTable: [],
            callGraphDialogVisible: false,
            methodCallGraphForDialog: 'aaa',

            interfaceDialogVisible: false,
            interfaceTable: [],

            notControllerDialogVisible: false,
            notControllerTable: []
        }
    },
    methods: {
        async queryCallGraph() {
            const res = await this.$api.post('/accurate/analysisRecord/page', this.queryCallGraphForm)
            if (res.code !== 200) return this.$message.error(res.message)
            this.callGraphTable = res.data.records
            this.total = res.data.total
        },
        // 修改页大小
        handleSizeChange(newSize) {
            this.queryCallGraphForm.size = newSize
            this.queryCallGraph()
        },
        // 修改页码
        handleCurrentChange(newPage) {
            this.queryCallGraphForm.page = newPage
            this.queryCallGraph()
        },
        // 调用链弹框关闭
        callGraphDialogClosed(){
            this.methodCallGraphForDialog = ''
            this.callGraphDialogVisible = false
        },
        // 关闭展示方法影响接口的弹框
        interfaceDialogClosed(){
            this.interfaceDialogVisible = false;
        },
        notControllerDialogClosed(){
            this.notControllerDialogVisible = false;
        },
        // 显示调用链
        showDialog(value){
            this.methodCallGraphForDialog = value
            this.callGraphDialogVisible = true
        },
        // 显示方法影响接口
        async showInterfaceDialog(recordId){
            const res = await this.$api.get('/accurate/analysisRecordDetail/queryInterfaceByRecordId', {
                recordId
            })
            if (res.code !== 200) return this.$message.error(res.message)
            this.interfaceTable = res.data
            if (res.data.length > 0){
                this.interfaceDialogVisible = true;
            }else {
                return this.$message.warning("该方法修改后, 不存在接口的顶级出口方法")
            }
        },
        // 显示影响顶级非接口
        async showNotControllerDialog(recordId){
            const res = await this.$api.get('/accurate/analysisRecord/queryNotController', {
                recordId
            })
            if (res.code !== 200) return this.$message.error(res.message)
            this.notControllerTable = res.data
            if (res.data.length > 0){
                this.notControllerDialogVisible = true;
            }else {
                return this.$message.warning("该方法修改后, 不存在非接口的顶级出口方法")
            }
        }
    },
    created() {
        this.queryCallGraph()
    }
}
</script>
<style lang="less" scoped>
    .el-breadcrumb {
        height: 32px;
        line-height: 32px;
    }
    .el-table {
        margin-top: 15px;
        margin-bottom: 15px;
        /deep/ .cell {
            white-space: nowrap;
        }
    }
    .el-card {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
    }
</style>
