<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 :model="createCallGraphForm" label-width="140px"
                     :rules="createCallGraphFormRules"
                     ref="createCallGraphFormRef">
                <el-form-item label="项目名称" prop="projectName">
                    <el-input placeholder="请输入项目名称" v-model="createCallGraphForm.projectName" style="width: 500px" clearable/>
                </el-form-item>
                <el-form-item label="项目所属渠道" prop="channel">
                    <el-select v-model="createCallGraphForm.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="createCallGraphForm.branch" style="width: 500px"/>
                </el-form-item>
                <el-form-item label="是否删除历史记录" prop="deleteAll">
                    <el-radio v-model="createCallGraphForm.deleteAll" :label="true">是</el-radio>
                    <el-radio v-model="createCallGraphForm.deleteAll" :label="false">否</el-radio>
                    <p style="color: red; size: 10px"> 注意: 不删除全部历史记录, 则只会删除向上调用链的记录</p>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="createCallGraph">生成项目向上调用链</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "JavaCallGraph4Callee",
        data() {
            return {
                // 分页查询参数
                createCallGraphForm: {
                    deleteAll: false
                },
                createCallGraphFormRules: {
                    projectName: [
                        {required: true, message: '请输入项目名称', trigger: 'blur'},
                    ],
                    channel: [
                        {required: true, message: '请输入渠道', trigger: 'blur'},
                    ],
                    branch: [
                        {required: true, message: '请输入版本', trigger: 'blur'},
                    ],
                    deleteAll: [
                        {required: true, message: '请选择是否删除历史记录', trigger: 'blur'},
                    ]
                },
                channelList: []
            }
        },
        methods: {
            createCallGraph() {
                const loading = this.$loading({
                    fullscreen: true,
                    text: "调用链生成中...",
                    background: 'rgba(0,0,0,0, 0.5)'
                })
                this.$refs.createCallGraphFormRef.validate(async (valid) => {
                    if (!valid) return
                    const {data: res} = await this.$api.post('/accurate/graph/create4Callee', this.createCallGraphForm)
                    loading.close()
                    if (res && res.code !== 200) {
                        return this.$message.error(res.message)
                    }
                    return 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
            }
        },
        created() {
            this.queryAllChannel()
        }
    }
</script>
<style lang="less" scoped>
    .el-breadcrumb {
        height: 32px;
        line-height: 32px;
    }
    .el-card {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
    }
</style>
