<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-button @click="goBack" class="goback">返回</el-button>
        </el-breadcrumb>
        <!--   Issues汇总   -->
        <el-card>
            <div class="summary">
                <!--    1     -->
                <div class="summaryTitle">
                    <span>项目简介</span>
                </div>
                <!--    2     -->
                <div>
                    <div class="summaryDetail">
                        <div class="summary-icon">
                            <div>
                                <span class="iconfont icon-cq-zhuzhungtu"></span>
                            </div>
                        </div>
                        <div>
                            <span class="labelName"> 项目名称: {{ this.$route.query.projectName }} </span>
                            <span class="labelName">总数: {{ summary.total }}</span>
                        </div>
                        <div>
                            <span class="labelName">已解决: {{ summary.resolved }}</span>
                            <span class="labelName">未解决: {{ summary.unsolved }}</span>
                        </div>
                        <div>
                            <span class="labelName">本周新增: {{ summary.thisWeekTheNew }}</span>
                            <span class="labelName">本周解决: {{ summary.toSolveThisWeek }}</span>
                        </div>
                        <div>
                            <span class="labelName">今日新增: {{ summary.todayNew }}</span>
                            <span class="labelName">今日解决: {{ summary.toSolveToday }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <!--   Issues详情   -->
        <el-tabs type="border-card" :before-leave=tabChange>
            <el-tab-pane label="问题详情">
                <!--   问题详情列表   -->
                <el-table :data="issuesDetailTable" 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="状态" min-width="100px" 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-column prop="issueCloseDate" label="问题关闭时间" :formatter="dateFormatter" min-width="150px" showOverflowTooltip/>
                </el-table>
                <!--   问题详情分页  -->
                <el-pagination
                    @size-change="handleIssuesDetailSizeChange"
                    @current-change="handleIssuesDetailCurrentChange"
                    :current-page="issuesDetail.page"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="issuesDetail.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="issuesDetailTotal">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="未解决规则汇总">
                <!--   未解决的规则列表   -->
                <el-table :data="unsolvedRuleTable" style="{width: 1300px}"
                          border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                    <el-table-column type="index"/>
                    <el-table-column label="规则名称" min-width="300px" showOverflowTooltip>
                        <template slot-scope="scope">
                            <el-link :href="scope.row.ruleCountAddr" type="primary" target="_blank">{{ scope.row.name }}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="出现次数" showOverflowTooltip/>
                    <el-table-column prop="issueType" label="类型" :formatter="issuesTypeFormatter" showOverflowTooltip/>
                    <el-table-column prop="language" label="语言" showOverflowTooltip/>
                </el-table>
                <!--   未解决的规则分页  -->
                <el-pagination
                    @size-change="handleUnsolvedRuleSizeChange"
                    @current-change="handleUnsolvedRuleCurrentChange"
                    :current-page="unsolvedRuleInfo.page"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="unsolvedRuleInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="unsolvedRuleTotal">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import "/src/assets/font/iconfont.css"
import "/src/assets/font/iconfont.js"

export default {
    name: "SonarSummaryIssuesDetail",
    data() {
        return {
            // 项目维度的统计对象
            summary: {},
            // 问题详情
            issuesDetail: {
                projectName: null,
                eventType: null,
                page: 1,
                size: 10,
            },
            // 问题列表1：表单数据
            issuesDetailTable: [],
            // 问题列表1：表单总数据
            issuesDetailTotal: 0,


            // 未解决的规则列表分页查询默认参数
            unsolvedRuleInfo: {
                projectName: null,
                eventType: null,
                page: 1,
                size: 10,
            },
            // 未解决的问题汇总的规则列表
            unsolvedRuleTable: [],
            // 未解决的问题汇总数据总数
            unsolvedRuleTotal: 0,
            // 问题类型映射表
            issuesTypeMap: {
                b: 'bug',
                l: '漏洞',
                y: '异味',
                s: '安全隐患',
                z: '其他'
            }
        }
    },
    methods: {
        issuesTypeFormatter(row, column, cellValue){
            return this.issuesTypeMap[cellValue]
        },
        // 返回到
        goBack() {
            this.$router.push('/sonar/summaryIssues')
        },
        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)
        },
        // 查询指定项目的问题汇总
        async queryIssues() {
            await this.querySummary();
            await this.queryIssuesDetailPage();
        },
        // 查询问题汇总
        async querySummary() {
            const ressummary = await this.$api.get('/sonar/issues/querySummary', {
                projectName: this.issuesDetail.projectName,
                eventType: this.issuesDetail.eventType
            })
            if (ressummary.data === null) return this.$message.error(ressummary.message)
            this.summary = ressummary.data
        },
        // 分页查询问题详情
        async queryIssuesDetailPage() {
            const respage = await this.$api.postForm('/sonar/issues/page', this.issuesDetail)
            if (respage.data === null) return this.$message.error(respage.message)
            this.issuesDetailTable = respage.data.records
            this.issuesDetailTotal = respage.data.total;
        },
        // 修改页大小
        handleIssuesDetailSizeChange(size) {
            this.issuesDetail.size = size;
            this.queryIssuesDetailPage()
        },
        // 修改当前页
        handleIssuesDetailCurrentChange(index) {
            this.issuesDetail.page = index;
            this.queryIssuesDetailPage()
        },
        // -------------------------------------------------------------------------------
        // 切换tab
        tabChange(activeName, oldActiveName) {
            if (activeName === '0') {
                // 清除数据
                this.issuesDetail.page = 1
                this.issuesDetail.size = 10
                this.issuesDetailTable = []
                this.issuesDetailTotal = 0
                this.queryIssuesDetailPage()
            } else if (activeName === '1') {
                this.unsolvedRuleInfo.page = 1
                this.unsolvedRuleInfo.size = 10
                this.unsolvedRuleTable = []
                this.unsolvedRuleTotal = 0
                this.queryUnsolvedRuleByPage()
            }
        },
        // 修改页大小
        handleUnsolvedRuleSizeChange(size) {
            this.unsolvedRuleInfo.size = size;
            this.queryUnsolvedRuleByPage()
        },
        // 修改当前页
        handleUnsolvedRuleCurrentChange(index) {
            this.unsolvedRuleInfo.page = index;
            this.queryUnsolvedRuleByPage()
        },
        // 分页查询未解决的问题汇总出的规则
        async queryUnsolvedRuleByPage() {
            const respage = await this.$api.postForm('/sonar/issues/countPages', this.unsolvedRuleInfo)
            if (respage.data === null) return this.$message.error(respage.message)
            this.unsolvedRuleTable = respage.data.records
            this.unsolvedRuleTotal = respage.data.total;
        },
    },
    created() {
        this.issuesDetail.projectName = this.$route.query.projectName
        this.issuesDetail.eventType = this.$route.query.eventType
        this.unsolvedRuleInfo.projectName = this.$route.query.projectName
        this.unsolvedRuleInfo.eventType = this.$route.query.eventType
        this.queryIssues()
    }
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
    // 让文字居中显示与返回按钮对齐
    height: 32px;
    line-height: 32px;

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

    /deep/ .cell {
        white-space: nowrap;
    }
}
.el-pagination {
    text-align: center;
    margin-top: 15px;
}
.el-card {
    margin-bottom: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;

    .summary {
        display: flex;
        flex-direction: column;
        width: 80%;
        color: #8A8C94 !important;

        .summaryTitle {
            line-height: 32px;
            font-size: 16px;
            padding: 0 0 0 18px;
            box-sizing: border-box;
            vertical-align: middle;
        }

        .summaryDetail {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 64px;

            .summary-icon {
                vertical-align: middle;
                width: 100px;
                position: relative;
            }

            .summary-icon div {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);

                .iconfont {
                    line-height: 64px;
                    height: 64px;
                    width: 64px;
                    font-size: 32px;
                    text-align: center;
                }
            }

            .labelName {
                line-height: 32px;
                font-size: 14px;
                padding: 0;
                box-sizing: border-box;
                vertical-align: middle;
                display: block;
            }
        }

        .summaryDetail div:not(:first-child) {
            padding-left: 20px;
            border-left: 1px solid #F5F5F5;
        }

        .summaryDetail div:nth-child(2) {
            margin-left: 80px;
            flex: 2;
        }

        .summaryDetail div:nth-child(3) {
            flex: 1;
        }

        .summaryDetail div:nth-child(4) {
            flex: 1;
        }

        .summaryDetail div:nth-child(5) {
            flex: 1;
        }
    }
}
</style>
