<template>
    <!--  根据diff结果,生成调用链  -->
    <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 :model="createCallGraphDiffForm" label-width="140px"
                     :rules="createCallGraphDiffFormRules"
                     ref="createCallGraphFormRef">
                <el-form-item label="项目名称" prop="projectName">
                    <el-input placeholder="请输入项目名称" v-model="createCallGraphDiffForm.projectName" style="width: 500px" clearable/>
                </el-form-item>
                <el-form-item label="项目所属渠道" prop="channel">
                    <el-select v-model="createCallGraphDiffForm.channel" placeholder="请选择项目所属渠道" style="width: 500px" clearable>
                        <el-option v-for="(item, index) in channelList" :label="item" :value="item" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="测试分支" prop="branch">
                    <el-input placeholder="请输入分支" v-model="createCallGraphDiffForm.branch" style="width: 500px"/>
                </el-form-item>
                <el-form-item label="基准分支" prop="defaultBranch">
                    <el-input placeholder="请输入分支" v-model="createCallGraphDiffForm.defaultBranch" style="width: 500px"/>
                </el-form-item>
                <el-form-item label="接收结果的邮箱">
                    <el-input placeholder="请输入差异接口发送哪些邮箱, 多个以英文逗号隔开" v-model="createCallGraphDiffForm.emailToUserList" style="width: 500px"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="createCallGraphDiff">对比差异, 获取影响接口</el-button>
                    <el-button type="primary" @click="queryDiff">对比差异, 获取新增的类方法</el-button>
                </el-form-item>
            </el-form>
        </el-card>

<!--        <div v-if="showResult" class="showResult">-->
<!--            &lt;!&ndash; json字符串在页面已json格式展示 &ndash;&gt;-->
<!--            <json-viewer :value="affectInterfaceVoList" :expand-depth=100 style="margin-top: 30px;" copyable boxed sort/>-->
<!--        </div>-->

        <!--    显示diff差异影响的接口    -->
        <el-card v-show="showAffect">
            <span>分支对比, 显示差异中修改的类中的方法所影响到的接口信息</span>
            <p style="font-size: 12px; text-indent: 20px">包含删除、修改的方法所影响的接口, 以及接口本身的改动</p>
            <el-table :data="affectInterfaceVoList" style="width: 100%" stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column  prop="editClassName" label="修改涉及的类" showOverflowTooltip></el-table-column>
                <el-table-column  prop="editMethodName" label="修改涉及的方法" showOverflowTooltip></el-table-column>
                <el-table-column  prop="affectClassName" label="影响的接口" showOverflowTooltip></el-table-column>
                <el-table-column  prop="affectMethodName" label="影响接口中的方法" showOverflowTooltip></el-table-column>
                <el-table-column  prop="callEditMethodLine" label="调用行号修改方法的行号" showOverflowTooltip></el-table-column>
                <el-table-column  prop="affectInterfaceAddr" label="影响接口的地址" showOverflowTooltip></el-table-column>
            </el-table>
        </el-card>

        <!--    显示新增的diff   -->
        <el-card v-show="showAddDiff">
            <span>分支对比, 显示新增的类以及类中的所有方法</span>
            <p style="font-size: 12px; text-indent: 20px">只会展示两个版本diff 测试分支相比基准分支  新增的完整类文件中的方法</p>
            <el-table :data="diffClassInfoVoList" style="width: 100%" stripe border>
                <el-table-column type="index"></el-table-column>
                <el-table-column  prop="newClassName" label="新增类的名称"></el-table-column>
                <el-table-column  prop="newMethodName" label="新增方法的名称"></el-table-column>
                <el-table-column  prop="newMethodParam" label="新增方法的参数列表"></el-table-column>
<!--                <el-table-column  prop="newMethodLine" label="新增方法所处行号"></el-table-column>-->
<!--                <el-table-column  prop="type" label="变更代码类型"></el-table-column>-->
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "JavaCallGraph4Diff",
    data() {
        return {
            // 分页查询参数
            createCallGraphDiffForm: {},
            createCallGraphDiffFormRules: {
                projectName: [
                    {required: true, message: '请输入项目名称', trigger: 'blur'},
                ],
                channel: [
                    {required: true, message: '请输入渠道', trigger: 'blur'},
                ],
                branch: [
                    {required: true, message: '请输入测试分支', trigger: 'blur'},
                ],
                defaultBranch: [
                    {required: true, message: '请输入基准分支', trigger: 'blur'},
                ],
            },
            affectInterfaceVoList: [], // 差异影响接口列表
            diffClassInfoVoList: [],   // 新增类列表
            // 影响接口的查询结果展示标识位
            showAffect: false,
            showAddDiff: false,
            // 渠道列表
            channelList: []
        }
    },
    methods: {
        createCallGraphDiff() {
            const createCallGraphDiffLoading = this.$loading({
                fullscreen: true,
                text: '对比差异,查询影响接口中...',
                background: 'rgba(0,0,0,0, 0.5)'
            })
            this.$refs.createCallGraphFormRef.validate(async (valid) => {
                if (!valid) return
                const res = await this.$api.post('/accurate/graph/queryCallGraphByDiff', this.createCallGraphDiffForm)
                createCallGraphDiffLoading.close()
                if (res.code !== 200) {
                    return this.$message.error(res.message)
                }
                this.affectInterfaceVoList = res.data.data
                this.showAffect = true
                this.$message.success('对比及查询成功!')
            })
        },
        // 查询所有渠道
        async queryAllChannel() {
            const res = await this.$api.get('/sonar/department/getAllChannel')
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.channelList = res.data
        },
        queryDiff(){
            const queryDiffLoading = this.$loading({
                fullscreen: true,
                text: '对比差异,查询新增的类方法中...',
                background: 'rgba(0,0,0,0, 0.5)'
            })
            this.$refs.createCallGraphFormRef.validate(async (valid) => {
                if (!valid) return
                const res = await this.$api.post('/accurate/graph/queryDiff', this.createCallGraphDiffForm)
                queryDiffLoading.close()
                if (res.code !== 200) {
                    return this.$message.error(res.message)
                }
                this.diffClassInfoVoList = res.data.data
                this.showAddDiff = true
                this.$message.success('对比以及查询成功!')
            })
        }
    },
    created() {
        this.queryAllChannel()
    }
}
</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>
