<template>
    <div>
        <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="queryRecordDetailForm">
                    <el-form-item label="项目名称">
                        <el-select v-model="queryRecordDetailForm.gitProjectName" filterable placeholder="请选择项目名称" 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="触发人">
                        <el-input
                            v-model="queryRecordDetailForm.userName"
                            clearable
                            placeholder="请输入触发检查人"
                            style="width:200px">
                            clearable
                        </el-input>
                    </el-form-item>
                    <el-form-item label="触发类型">
                        <el-select v-model="queryRecordDetailForm.eventType" clearable placeholder="请选择触发类型">
                            <el-option v-for="(label, value) in type" :key="value" :label="label" :value="value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doQuery">查询</el-button>
                    </el-form-item>
                </el-form>
                <!-- 列表 -->
                <el-table :data="tableData" style="width: 1680px" stripe border :header-cell-style="{'text-align':'center'}"
                          :cell-style="{'text-align':'center'}">
                    <el-table-column type="index"/>
                    <el-table-column prop="gitProjectName" label="项目名称" min-width="180px" showOverflowTooltip>
                        <template slot-scope="scope">
                            {{ scope.row.record.gitProjectName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="项目类型" showOverflowTooltip>
                        <template slot-scope="scope">
                            {{ scope.row.record.projectType }}
                        </template>
                    </el-table-column>
                    <el-table-column label="事件类型" showOverflowTooltip>
                        <template slot-scope="scope">
                            <span class="fontWeight500"
                                  :style="{color: (scope.row.record.eventType === 1) ? '#67c23a':'#f56c6c'}">{{ type[scope.row.record.eventType] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="触发检查人" min-width="100px" showOverflowTooltip/>
                    <el-table-column prop="gitProjectBranch" label="操作分支" :formatter="defaultFormatter" min-width="100px" showOverflowTooltip/>
                    <el-table-column prop="newBugs" label="新增bug" showOverflowTooltip/>
                    <el-table-column prop="newVulnerabilities" label="新增漏洞" showOverflowTooltip/>
                    <el-table-column prop="newCodeSmells" label="新增异味" showOverflowTooltip/>
                    <el-table-column prop="totalIncrease" label="问题总新增" min-width="100px" showOverflowTooltip/>
                    <el-table-column prop="totalReduction" label="问题总减少" min-width="100px" showOverflowTooltip/>
                    <el-table-column prop="newLines" label="代码行总新增量" min-width="120px" showOverflowTooltip/>
                    <el-table-column prop="reduceLines" label="代码行总减少量" min-width="120px" showOverflowTooltip/>
                    <el-table-column prop="sourceBranch" label="源分支" :formatter="defaultFormatter" showOverflowTooltip/>
                    <el-table-column prop="targetBranch" label="目标分支" :formatter="defaultFormatter" showOverflowTooltip/>
                    <el-table-column prop="status" label="检查状态" showOverflowTooltip>
                        <template slot-scope="scope">
                            <span class="fontWeight500"
                                  :style="{color: successList.indexOf(scope.row.status) === -1 ? '#f56c6c': '#67c23a'}">{{ status[scope.row.status] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gitMergePageUrl" label="报告详情" align="center" showOverflowTooltip>
                        <template slot-scope="scope">
                            <div v-if="scope.row.record.projectType === 4">
                                <el-link :href="scope.row.gitMergePageUrl" type="primary" target="_blank">查看<i class="el-icon-view el-icon--right"></i>
                                </el-link>
                            </div>
                            <div v-else>
                                <!-- 如果为push类型, 没有新增时,展示暂无新增 -->
                                <div v-if="scope.row.newBugs === 0 && scope.row.newVulnerabilities === 0 && scope.row.newCodeSmells === 0"
                                     class="colorGreen fontWeight500">
                                    完美提交
                                </div>
                                <!-- push -->
                                <div v-else-if="scope.row.record.eventType === 1">
                                    <el-link type="primary" target="_blank" @click="toPushIssuesDetail(scope.row.taskId, scope.row.sonarProjectTag)"
                                             v-if="scope.row.taskId && scope.row.sonarProjectTag">
                                        查看<i class="el-icon-view el-icon--right"></i>
                                    </el-link>
                                </div>
                                <div v-else-if="scope.row.record.eventType === 4">
                                    <el-link type="primary" target="_blank" :href="scope.row.gitMergePageUrl">
                                        查看<i class="el-icon-view el-icon--right"></i>
                                    </el-link>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter" width="150px" showOverflowTooltip/>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryRecordDetailForm.page"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="queryRecordDetailForm.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="recordDetailTotal">
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SonarResultPage',
    // 初始数据
    data() {
        return {
            // recordDetail 列表数据
            tableData: [],
            // 分页查询默认参数
            queryRecordDetailForm: {
                gitProjectName: null,
                userName: null,
                projectType: null,
                page: 1,
                size: 10,
            },
            // 默认列表总数
            recordDetailTotal: 0,
            // 检查触发类型选项与后端ProjectEventEnum对应
            type: {
                1: 'push',
                4: 'merge'
            },
            // 项目名称列表, 用户搜索提示
            projectNameList: [],
            // 检查状态, 存储检查中和成功的状态值, 用于显示特定样式
            successList: [0, 5],
            // 检查状态与后端CheckStateEnum对应
            status: {
                0: '检查中',
                1: '代码克隆失败',
                2: '代码切换分支失败',
                3: '代码编译失败',
                4: 'sonar检查异常',
                5: '检查完毕'
            }
        }
    },
    methods: {
        // 查询按钮触发事件
        doQuery() {
            this.queryPage(this.queryRecordDetailForm);
        },
        // 格式化为null的数据默认展示
        defaultFormatter(row, column, cellValue) {
            return cellValue === null ? "-" : cellValue;
        },
        // 修改页大小
        handleSizeChange(size) {
            this.queryRecordDetailForm.size = size;
            this.queryPage()
        },
        // 修改当前页
        handleCurrentChange(index) {
            this.queryRecordDetailForm.page = index;
            this.queryPage()
        },
        // 查询所有项目名称
        async queryAllProjectName() {
            const res = await this.$api.get("/sonar/record/queryAllProjectName")
            if (res.code !== 200) return this.$message.error(res.message)
            this.projectNameList = res.data;
        },
        // recordDetail分页查询
        async queryPage() {
            const res = await this.$api.post("/sonar/record/detail/customPage", this.queryRecordDetailForm)
            if (res.code !== 200) return this.$message.error(res.message)
            this.tableData = res.data.records;
            this.recordDetailTotal = res.data.total;
        },
        // 日期格式化
        dateFormatter(row, column, cellValue) {
            if (cellValue === null) return ''
            const dt = new Date(cellValue)
            const y = dt.getFullYear()
            const m = (dt.getMonth() + 1 + '').padStart(2, '0')
            const d = (dt.getDate() + '').padStart(2, '0')
            const hh = (dt.getHours() + '').padStart(2, '0')
            const mm = (dt.getMinutes() + '').padStart(2, '0')
            const ss = (dt.getSeconds() + '').padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        },
        // 针对push类型的项目, 查看详情的特定跳转
        toPushIssuesDetail(taskId, sonarProjectTag) {
            this.$router.push(
                {
                    path: '/sonar/pushIssuesDetail',
                    query: {
                        taskId: taskId,
                        sonarProjectTag: sonarProjectTag,
                    }
                }
            );
        }
    },
    created() {
        this.queryPage();
        this.queryAllProjectName();
    }
};
</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;

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

        .el-tag {
            width: 100px;
        }

        .fontWeight500 {
            font-weight: 500;
        }

        .colorGreen {
            color: #67c23a;
        }

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

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