<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="queryPublishRecordParam">
                <el-form-item label="项目名称">
                    <el-select v-model="queryPublishRecordParam.projectName" filterable placeholder="请选择项目名称" @change="changeProjectName($event)" clearable>
                        <el-option v-for="(item, index) in projectNameList" :label="item" :value="item" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="子模块名称" v-if="isMultiModuleProject">
                    <el-select v-model="queryPublishRecordParam.moduleName" placeholder="请选择项目子模块" clearable>
                        <el-option v-for="(item, index) in moduleNameList" :label="item" :value="item" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="服务名称">
                    <el-input v-model="queryPublishRecordParam.serverName" placeholder="请输入分支名称"></el-input>
                </el-form-item>
                <el-form-item label="分支名称">
                    <el-input v-model="queryPublishRecordParam.branch" placeholder="请输入分支名称"></el-input>
                </el-form-item>
                <el-form-item label="环境名称">
                    <el-input v-model="queryPublishRecordParam.env" placeholder="请输入环境名称"></el-input>
                </el-form-item>
                <el-form-item label="发布人">
                    <el-input v-model="queryPublishRecordParam.announcer" placeholder="请输入环境名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryPublishRecordByPage">查询</el-button>
                </el-form-item>
            </el-form>
            <!--    列表    -->
            <el-table :data="publishRecordTable" style="width: 100%"
                      border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                <el-table-column type="index"/>
                <el-table-column prop="projectName" label="项目名称" min-width="10%" showOverflowTooltip/>
                <el-table-column prop="serverName" label="服务名称" min-width="10%" showOverflowTooltip/>
                <el-table-column prop="branch" label="分支" min-width="10%" showOverflowTooltip/>
                <el-table-column prop="env" label="环境" min-width="10%" showOverflowTooltip/>
                <el-table-column prop="announcer" label="发布人" min-width="10%" showOverflowTooltip/>
                <el-table-column prop="createTime" label="发布时间" min-width="10%" showOverflowTooltip/>
                <el-table-column label="日志地址" min-width="5%" showOverflowTooltip>
                    <template v-slot="{ row }">
                        <el-link :href="row.jobUrl" type="primary" target="_blank">发布日志</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="发布地址" min-width="5%" showOverflowTooltip>
                    <template v-slot="{ row }">
                        <el-link :href="row.pipeLineUrl" type="primary" target="_blank">pipeline地址</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="发布状态" min-width="5%" showOverflowTooltip>
                    <template v-slot="{ row }">
                        <span :style="{color: row.status ?  '#67c23a' : '#f56c6c'}">{{ statusMap[row.status] }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!--    分页    -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryPublishRecordParam.page"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="queryPublishRecordParam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>


        <!--    自动分析模块的分支填写Dialog    -->
        <el-dialog
            title="请填写分析项目使用的分析"
            :visible.sync="createReportDialogVisible"
            width="30%"
            :before-close="createReportDialogClose">
            <el-input v-model.trim="baseBranch" placeholder="prod" clearable/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createReportDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createReport">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "PublishPage",
    data() {
        return {
            // 分页查询报告参数
            queryPublishRecordParam: {
                projectName: null,
                moduleName: null,
                serverName: null,
                branch: null,
                evn: null,
                announcer: null,
                page: 1,
                size: 10
            },
            publishRecordTable: [],
            total: 0,
            // 是否展示子模块下拉选项框
            isMultiModuleProject: false,
            // 项目与模块的映射表
            moduleNameMap: {},
            // 模块名称列表
            moduleNameList: [],
            // 项目名称列表
            projectNameList: [],
            statusMap: {
                true: '发布成功',
                false: '发布失败',
            },
            // 根据发布记录创建增量覆盖率报告的
            createReportDialogVisible: false,
            publishId: 0,
            baseBranch: 'prod',
        }
    },
    methods: {
        async queryPublishRecordByPage() {
            const res = await this.$api.postForm("/sonar/publish/record/page", this.queryPublishRecordParam)
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.publishRecordTable = res.data.records
            this.total = res.data.total
        },
        // 监听页大小改变的事件
        handleSizeChange(newSize) {
            this.queryPublishRecordParam.size = newSize;
            this.queryPublishRecordByPage()
        },
        // 监听页码改变的事件
        handleCurrentChange(newPage) {
            this.queryPublishRecordParam.page = newPage;
            this.queryPublishRecordByPage()
        },
        // 查询所有项目和项目下服务模块
        async queryProjectServiceModule() {
            const res = await this.$api.get("/sonar/project/config/queryAllProjectAndServiceModule")
            if (res.code !== 200) return this.$message.error(res.message)
            this.projectNameList = res.data['project'];
            this.moduleNameMap = res.data['module'];
        },
        // 监听项目选择变更事件
        changeProjectName(name) {
            this.moduleNameList = null;
            if (this.moduleNameMap[name] !== undefined && JSON.parse(JSON.stringify(this.moduleNameMap[name])).length > 0 && JSON.parse(JSON.stringify(this.moduleNameMap[name]))[0] !== null) {
                this.isMultiModuleProject = true;
                this.moduleNameList = this.moduleNameMap[name];
            } else {
                this.isMultiModuleProject = false;
                this.moduleNameList = []
                this.queryPublishRecordParam.moduleName = null;
            }
        },

        // 显示根据发布记录生成增量覆盖率的基准分支输入弹框
        showCreateReportDialog(id) {
            this.createReportDialogVisible = true
            this.publishId = id
        },
        async createReport() {
            const createReportLoading = this.$loading({
                fullscreen: true,
                text: '前置检查中, 请稍等...',
                background: 'rgba(0,0,0,0, 0.5)'
            })
            const res = await this.$api.postForm("/jacoco/report/createReportByPublishId", {
                id: this.publishId,
                baseBranch: this.baseBranch,
                mode: 2   // 默认只有增量模式
            })
            createReportLoading.close()
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)

            return this.$message.info("报告生成中, 请稍后到查看覆盖率报告页面查看结果!")
        },
        createReportDialogClose() {
            this.createReportDialogVisible = false
            this.baseBranch = 'prod'
            this.publishId = 0
        }
    },
    created() {
        // 查询当前全部的项目集合与模块映射数据
        this.queryProjectServiceModule();
        this.queryPublishRecordByPage();
    }
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
    height: 32px;
    line-height: 32px;
}

.el-table /deep/ .cell {
    white-space: nowrap;
}

.el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;

    .el-table {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .el-pagination {
        text-align: center;
        margin-top: 15px;
    }
}
</style>
