<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <div class="breadcrumbContext">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>代码质量管理</el-breadcrumb-item>
                <el-breadcrumb-item>代码检测详情</el-breadcrumb-item>
            </div>
        </el-breadcrumb>
        <!--   Issues汇总   -->
        <el-card>
            <!--   详情表格   -->
            <el-table :data="pushIssuesTable" style="{width: 1300px}"
                      border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                <el-table-column type="index"/>
                <el-table-column prop="message" label="问题描述" min-width="300px" showOverflowTooltip>
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 'OPEN'">
                            <el-link :href="scope.row.issuesCodeAddr" type="primary" target="_blank">{{ scope.row.message }}</el-link>
                        </div>
                        <div v-else>
                            {{ scope.row.message }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="规则名称" min-width="300px" showOverflowTooltip>
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 'OPEN'">
                            <el-link :href="scope.row.rulesAddr" type="primary" target="_blank">{{ scope.row.rules.name }}</el-link>
                        </div>
                        <div v-else>
                            {{ scope.row.rules.name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="severity" label="级别" showOverflowTooltip/>
                <el-table-column prop="status" label="状态" showOverflowTooltip/>
                <el-table-column label="文件路径" min-width="300px" showOverflowTooltip>
                    <template slot-scope="scope">
                        {{ scope.row.projects.path }}
                    </template>
                </el-table-column>
                <el-table-column prop="line" label="行号" showOverflowTooltip/>
                <el-table-column prop="authorLogin" label="问题制造者" min-width="200px" showOverflowTooltip/>
                <el-table-column prop="createdAt" label="问题制造时间" :formatter="dateFormatter" min-width="150px" showOverflowTooltip/>
            </el-table>
            <!--   详情分页  -->
            <el-pagination
                @size-change="handleDetailSizeChange"
                @current-change="handleDetailCurrentChange"
                :current-page="pushIssuesInfo.page"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="pushIssuesInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pushIssuesDetailTotal">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import qs from "qs";

export default {
    name: "SonarPushIssuesDetail",
    // 组件默认数据
    data (){
        return {
            // push类型issues分页查询默认参数
            pushIssuesInfo: {
                taskId: null,
                sonarProjectTag: null,
                page: 1,
                size: 10,
            },
            // push类型issues列表数据
            pushIssuesTable: [],
            // push类型issues列表默认总数
            pushIssuesDetailTotal: 0,
        }
    },
    methods: {
        // 日期格式转换方法
        timestampToTime(timestamp) {
            const date = new Date(timestamp);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = date.getDate() + ' ';
            const h = date.getHours() + ':';
            const m = date.getMinutes() + ':';
            const s = date.getSeconds();
            return Y + M + D + h + m + s;
        },
        // 日期列数据格式化
        dateFormatter(row, column, cellValue) {
            return cellValue == null ? "" : this.timestampToTime(cellValue)
        },
        // 修改页大小
        handleDetailSizeChange(size) {
            this.pushIssuesInfo.size = size;
            this.queryIssuesByTaskId()
        },
        // 修改当前页
        handleDetailCurrentChange(index) {
            this.pushIssuesInfo.page = index;
            this.queryIssuesByTaskId()
        },
        // 根据task_id和项目唯一表示sonarProjectTag分页查询
        async queryIssuesByTaskId(){
            const respage = await this.$api.postForm('/sonar/issues/queryIssuesByTaskId', this.pushIssuesInfo)
            if (respage.code !== 200) return this.$message.error(respage.message)
            this.pushIssuesTable = respage.data.records
            this.pushIssuesDetailTotal = respage.data.total;
        },
    },
    // 页面实例创建时执行
    created() {
        this.pushIssuesInfo.taskId = this.$route.query.taskId
        this.pushIssuesInfo.sonarProjectTag = this.$route.query.sonarProjectTag
        this.queryIssuesByTaskId()
    }
}
</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>
