<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>

        <el-tabs type="border-card" v-model="activeName" @tab-click="tabClickHandle">
            <el-tab-pane
                v-for="(item, index) in tabs"
                :key="index"
                :label="item.label"
                :name="item.name"
            >
                <!--   版本汇总头部   -->
                <div class="summary" v-if="index === 0">
                    <div>
                        <div class="summaryDetail">
                            <div class="summary-icon">
                                <div>
                                    <span class="iconfont icon-cq-zhuzhungtu"></span>
                                </div>
                            </div>
                            <div>
                                <span class="labelName"> 发版日期: {{ publishVersionSummary.publishDate }} </span>
                            </div>
                            <div>
                                <span class="labelName"> bug总数: {{ publishVersionSummary.countBug }}个</span>
                                <span class="labelName"> 用例总数: {{ publishVersionSummary.countCase }}个</span>
                                <span class="labelName"> 冒烟用例: {{ publishVersionSummary.countP0Case }}个</span>
                                <span class="labelName"> 代码变更行: {{ publishVersionSummary.countChangeLine }} 行</span>
                            </div>

                            
                            <div>
                                <span class="labelName"> 已关闭bug: {{ publishVersionSummary.finishBug }}个</span>
                                <span class="labelName"> 执行成功用例 {{ publishVersionSummary.countPassCase }}个</span>
                                <span class="labelName"> 冒烟成功用例 {{ publishVersionSummary.countP0PassCase }}个</span>
                                <span class="labelName"> 代码行覆盖率: {{ publishVersionSummary.coverageAvg }} </span>

                            </div>
                            <div>
                                <span class="labelName"> 未关闭bug: {{ publishVersionSummary.openBug }}个</span>
                                <span class="labelName"> 用例执行通过率: {{ publishVersionSummary.passedRate }}</span>
                                <span class="labelName"> 冒烟用例执行通过率: {{ publishVersionSummary.p0PassedRate }}</span>
                                <span class="labelName"> 千行代码bug率: {{ publishVersionSummary.bugFor1000Line }}/每千行</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--   迭代汇总头部   -->
                <div class="summary" v-else-if="index !== 0">
                    <div>
                        <div class="summaryDetail">
                            <div class="summary-icon">
                                <div>
                                    <span class="iconfont icon-cq-zhuzhungtu"></span>
                                </div>
                            </div>
                            <div>
                                <span class="labelName"> 迭代周期: {{ sprintSummary.iterateDate }} </span>
                            </div>
                            <div>
                                <span class="labelName"> bug总数: {{ publishVersionSummary.countBug }}个</span>
                                <span class="labelName"> 用例总数: {{ publishVersionSummary.countCase }}个</span>
                                <span class="labelName"> 冒烟用例: {{ publishVersionSummary.countP0Case }}个</span>
                                <span class="labelName"> 代码变更行: {{ publishVersionSummary.countChangeLine }} 行</span>
                            </div>

                            
                            <div>
                                <span class="labelName"> 已关闭bug: {{ publishVersionSummary.finishBug }}个</span>
                                <span class="labelName"> 执行成功用例 {{ publishVersionSummary.countPassCase }}个</span>
                                <span class="labelName"> 冒烟成功用例 {{ publishVersionSummary.countP0PassCase }}个</span>
                                <span class="labelName"> 代码行覆盖率: {{ publishVersionSummary.coverageAvg }} </span>

                            </div>
                            <div>
                                <span class="labelName"> 未关闭bug: {{ publishVersionSummary.openBug }}个</span>
                                <span class="labelName"> 用例执行通过率: {{ publishVersionSummary.passedRate }}</span>
                                <span class="labelName"> 冒烟用例执行通过率: {{ publishVersionSummary.p0PassedRate }}</span>
                                <span class="labelName"> 千行代码bug率: {{ publishVersionSummary.bugFor1000Line }}/每千行</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!--   提测单信息   -->
                <el-card>
                    <p>提测项目信息:</p>
                    <!--   汇总页面展示   -->
                    <el-table v-if=" index === 0 && submitSummary.submitProjectInfoVoList !== [] && submitSummary.submitProjectInfoVoList !== null"
                              :data="submitSummary.submitProjectInfoVoList"
                              @cell-dblclick="editSort"
                              :key="randomKey"
                              size="medium" border>
                        <el-table-column prop="projectName" label="git项目名称" min-width="15%"></el-table-column>
                        <el-table-column prop="serviceName" label="服务名称" min-width="15%"></el-table-column>
                        <el-table-column prop="branch" label="提测分支" min-width="10%"></el-table-column>
                        <el-table-column prop="projectType" label="项目类型" min-width="8%"></el-table-column>
                        <el-table-column label="覆盖率" min-width="8%">
                            <template v-slot="{ row }">
                                <el-link :href="row.coverageAddr" type="primary" target="_blank">{{ row.coverage }}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="apiAutoRate" label="API自动化" min-width="8%"></el-table-column>
                        <el-table-column prop="" label="链路调用" min-width="10%"></el-table-column>
                        <el-table-column label="排序" property="sort" min-width="5%">
                            <template slot-scope="scope">
                                <el-input v-if="scope.row[scope.column.property + 'isShow']"
                                          :ref="scope.column.property"
                                          v-model="scope.row.sort"
                                          @blur="changeSort(scope.row, scope.column)"></el-input>
                                <span v-else>{{ scope.row.sort }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="10%">
                            <template v-slot="{row}">
                                <el-button type="primary" size="mini" @click="toGitLab(row.publishAddr)">发布流水线</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--   迭代页面展示   -->
                    <el-table v-if=" index !== 0 && submitSummary.submitProjectInfoVoList !== [] && submitSummary.submitProjectInfoVoList !== null"
                              :data="submitSummary.submitProjectInfoVoList" size="medium" border>
                        <el-table-column prop="projectName" label="git项目名称" min-width="20%"></el-table-column>
                        <el-table-column prop="serviceName" label="服务名称" min-width="20%"></el-table-column>
                        <el-table-column prop="branch" label="提测分支" min-width="10%"></el-table-column>
                        <el-table-column prop="projectType" label="项目类型" min-width="8%"></el-table-column>
                        <el-table-column label="覆盖率" min-width="8%">
                            <template v-slot="{ row }">
                                <el-link :href="row.coverageAddr" type="primary" target="_blank">{{ row.coverage }}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="apiAutoRate" label="API自动化" min-width="8%"></el-table-column>
                        <el-table-column prop="" label="链路调用" min-width="10%"></el-table-column>
                        <el-table-column label="操作" min-width="10%">
                            <template v-slot="{row}">
                                <el-button type="primary" size="mini" @click="toGitLab(row.publishAddr)">发布流水线</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <!--   提交记录信息   -->
                <el-card v-if=" index === 0 && submitSummary.submitProjectChangeLogMap !== {} && submitSummary.submitProjectChangeLogMap !== null"
                              :data="submitSummary.submitProjectChangeLogList">
                              
                    <el-button @click="getChangeLog()" >工程变更日志</el-button>
                    <el-tabs id="changelog" :style="{display: 'none'}">
                      <el-tab-pane 
                      v-for="(loginfo, index) in submitSummary.submitProjectChangeLogMap"
                        :key="index"
                        :label="index"
                        :name="index"
                        
                      >
                            <el-table v-if="loginfo !== null && loginfo !=='[]'" :data="loginfo" size="medium" border>
                                <el-table-column prop="logTime" label="提交时间" min-width="30%"></el-table-column>
                                <el-table-column prop="message" label="提交说明" min-width="70%"></el-table-column>
                            </el-table>
                      </el-tab-pane>
                    </el-tabs>
                    
                </el-card>

                <!--   提测配置信息   -->
                <el-card>
                    <p>提测配置信息:</p>
                    <el-table v-if="submitSummary.submitConfigInfoList !== [] && submitSummary.submitConfigInfoList !== null"
                              :data="submitSummary.submitConfigInfoList" size="medium" border>
                        <el-table-column prop="configName" label="配置名称" min-width="10%"></el-table-column>
                        <el-table-column prop="configInfo" label="配置详情" min-width="90%"></el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
export default {
    name: "PublishVersionDetailPage",
    data() {
        return {
            randomKey: Math.random(),
            publishVersionId: 0,
            sprintId: 0,
            // 变更日志默认不展示
            changeLogInfoDialogVisible: false,
            // 版本汇总页面的基本信息
            publishVersionSummary: {},
            sprintSummary: {
                publishDate: '0000-00-00',
                iterateDate: '0000-00-00 至 0000-00-00',
                countBug: 0,
                countCase: 0,
                countChangeLine: 0,
                countNewLine: 0,
                coverageAvg: '--',
                bugFor1000Line: '--',
                p0PassedRate: '--'
            },
            // 版本汇总页面的提测单汇总信息
            submitSummary: {
                submitProjectInfoVoList: [],
                submitConfigInfoList: [],
                submitProjectChangeLogMap: [],
            },
            // 当前激活tab
            activeName: 'summary',
            oldActiveName: 'summary',
            sprintIdList: [],
            sprintList: [],
            // tab  默认第一个为版本汇总
            tabs: [
                {
                    name: "summary",
                    label: "版本汇总",
                }
            ],
        }
    },
    methods: {
        goBack() {
            this.$router.push('/publish/version/page')
        },
        getChangeLog(){
            if (document.getElementById('changelog').style.display !=='none'){
                document.getElementById('changelog').style.display = 'none'
            }else{
                document.getElementById('changelog').style.display = ''
            }
            
        },
        // 根据版本id, 查询版本汇总头部信息
        async getSummaryTopById() {
            const res = await this.$api.get("/sonar/publish/version/getTopForSummaryById", {publishVersionId: this.publishVersionId})
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.publishVersionSummary = res.data
        },
        // 根据迭代id查询迭代tab页的头部汇总信息, 根据版本的周期查询迭代的汇总信息
        async getTopForSprintById() {
            const res = await this.$api.get("/sonar/publish/version/getTopForSprintById", {
                publishVersionId: this.publishVersionId, sprintId: this.sprintId
            })
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.sprintSummary = res.data
        },
        // 查询版本提测汇总信息
        async getSubmitSummaryById() {
            const res = await this.$api.get("/sonar/publish/version/getSubmitSummaryById", {publishVersionId: this.publishVersionId})
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.submitSummary = res.data
            
        },
        async getSubmitSummaryForSprintId() {
            const res = await this.$api.get("/sonar/submit/getSubmitSummaryForSprintId", {sprintId: this.sprintId})
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.submitSummary = res.data
        },
        // 查询版本关联迭代
        async getRelationIdsById() {
            this.sprintIdList = []
            const res = await this.$api.get("/sonar/publish/version/getRelationIdsById", {publishVersionId: this.publishVersionId})
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.sprintList = res.data
            this.sprintList.forEach((sprint, index) => {
                this.sprintIdList.push(sprint['id'])
            })
            this.sprintList.forEach((sprint, index) => {
                this.tabs.push({
                    name: sprint['name'],
                    label: sprint['name'],
                    sprintId: sprint['id']
                })
            });
        },
        // 切换tab
        tabClickHandle(e) {
            if (e.name === 'summary') {
                this.getSummaryTopById()
                this.getSubmitSummaryById()
            } else {
                this.sprintId = this.tabs[e.index]['sprintId']
                this.getTopForSprintById()
                this.getSubmitSummaryForSprintId()
            }
        },
        // 点击发布按钮
        toGitLab(toUrl) {
            window.open(toUrl, '_blank')
        },
        // 显示排序为输入框
        async editSort(row, column) {
            row[column.property + "isShow"] = true
            this.refreshTable() // refreshTable是table数据改动时，刷新table的
        },
        // 更新排序输入框的值
        async changeSort(row, column) {
            // 判断双击事件为排序这一列
            if (column.label === '排序'){
                row[column.property + "isShow"] = false
            }
            const res = await this.$api.postForm("/sonar/submit/projectInfo/updateSortById", {id: row.id, sort: row.sort})
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            console.log('排序修改成功')
            this.refreshTable()
        },
        // 刷新table
        refreshTable() {
            this.randomKey = Math.random()
        },
    },
    created() {
        this.publishVersionId = this.$route.query.publishVersionId
        this.getRelationIdsById()
        this.getSummaryTopById()
        this.getSubmitSummaryById()
    }
}
</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: pre-line; // 识别换行
    }
}

.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: 100%;
    color: #8A8C94 !important;
    margin-bottom: 80px;

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

        .summary-icon {
            vertical-align: middle;
            width: 200px;
            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) {
        flex: 1;
    }

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

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

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