<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-tabs type="border-card" v-model="activeName" @tab-click="tabClickHandle">
                <el-tab-pane label="全量覆盖率" name="first">
                    <el-alert title="注意：当前tab下, 会根据填入的测试分支进行全量覆盖率报告的生成" type="warning" show-icon :closable="false"/>
                    <el-form label-position="top" label-width="80px">
                        <el-form-item label="项目名称">
                            <el-select v-model="createReportInfo.projectName" placeholder="请选择项目名称" @change="changeProjectName($event)" filterable clearable style="width: 300px">
                                <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="createReportInfo.moduleName" placeholder="请选择项目子模块" clearable style="width: 300px">
                                <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="当前测试使用的分支" style="width: 30%">
                            <el-input v-model="createReportInfo.branch" placeholder="请输入分支名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="环境" style="width: 30%">
                            <el-input v-model="createReportInfo.env" placeholder="请输入环境名称" clearable></el-input>
                        </el-form-item>
                        <!-- 日期选择控件 -->
                        <el-form-item label="请选择生成报告的日期">
                            <el-date-picker v-model="createReportInfo.dateList" type="daterange" :editable="false"
                                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至"
                                            start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="createReport">生成覆盖率</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="增量覆盖率" name="second">
                    <el-alert title="注意：当前tab下, 会根据测试使用分支 与 基准分支对比, 相对于基准分支增量的部分进行覆盖率的统计" type="warning" show-icon :closable="false"/>
                    <el-form label-position="top" label-width="80px">
                        <el-form-item label="项目名称">
                            <el-select v-model="createReportInfo.projectName" placeholder="请选择项目名称" @change="changeProjectName($event)" filterable clearable style="width: 300px">
                                <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="createReportInfo.moduleName" placeholder="请选择项目子模块" clearable style="width: 300px">
                                <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="当前测试使用的分支" style="width: 30%">
                            <el-input v-model="createReportInfo.branch" placeholder="请输入分支名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="基准分支" style="width: 30%">
                            <span v-show="!editBaseBranch">{{ createReportInfo.baseBranch }} </span>
                            <el-input v-show="editBaseBranch" v-model="createReportInfo.baseBranch"></el-input>
                            <i :class="{'el-icon-edit': !editBaseBranch, 'el-icon-check': editBaseBranch}" @click="editBaseBranch = !editBaseBranch"></i>
                        </el-form-item>
                        <el-form-item label="环境" style="width: 30%">
                            <el-input v-model="createReportInfo.env" placeholder="请输入环境名称" clearable></el-input>
                        </el-form-item>
                        <!-- 日期选择控件 -->
                        <el-form-item label="请选择生成报告的日期">
                            <el-date-picker v-model="createReportInfo.dateList" type="daterange" :editable="false"
                                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至"
                                            start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="createReport">生成覆盖率</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="对比两个Tag" name="third" disabled>
                    <el-alert title="注意：当前tab下, 会根据测试使用分支的 新tag 对比 老tag, 增量部分进行覆盖率的统计" type="warning" show-icon :closable="false"/>
                    <el-form label-position="top" label-width="80px">
                        <el-form-item label="项目名称">
                            <el-select v-model="createReportInfo.projectName" placeholder="请选择项目名称" @change="changeProjectName($event)" filterable clearable style="width: 300px">
                                <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="createReportInfo.moduleName" placeholder="请选择项目子模块" clearable style="width: 300px">
                                <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="当前测试使用的分支" style="width: 30%">
                            <el-input v-model="createReportInfo.branch" placeholder="请输入分支名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="新Tag" style="width: 30%">
                            <el-input v-model="createReportInfo.newTag" placeholder="请输入新tag名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="老Tag" style="width: 30%">
                            <el-input v-model="createReportInfo.oldTag" placeholder="请输入老tag名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="环境" style="width: 30%">
                            <el-input v-model="createReportInfo.env" placeholder="请输入环境名称" clearable></el-input>
                        </el-form-item>
                        <!-- 日期选择控件 -->
                        <el-form-item label="请选择生成报告的日期">
                            <el-date-picker v-model="createReportInfo.dateList" type="daterange" :editable="false"
                                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至"
                                            start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="createReport">生成覆盖率</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="上传覆盖率生成报告" name="four">
                    <el-alert title="注意：根据上传的覆盖率二进制文件, 以及指定分支, 增量部分进行覆盖率的统计" type="warning" show-icon :closable="false"/>
                    <el-form label-position="top" label-width="80px">
                        <el-form-item label="项目名称">
                            <el-select v-model="createReportInfo.projectName" placeholder="请选择项目名称" @change="changeProjectName($event)" filterable clearable style="width: 300px">
                                <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="createReportInfo.moduleName" placeholder="请选择项目子模块" clearable style="width: 300px">
                                <el-option v-for="(item, index) in moduleNameList" :label="item" :value="item" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox-group
                                    v-model="modeCheckedList"
                                    :min="0"
                                    :max="1"
                                    @change="modeChange"
                            >
                                <el-checkbox v-for="(value, key) in modeOptionsMap" :label="key" :key="key">{{ value }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="当前测试使用的分支" style="width: 30%">
                            <el-input v-model="createReportInfo.branch" placeholder="请输入分支名称" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="基准分支" style="width: 30%" v-if="showBaseBranch">
                            <span v-show="!editBaseBranch">{{ createReportInfo.baseBranch }} </span>
                            <el-input v-show="editBaseBranch" v-model="createReportInfo.baseBranch"></el-input>
                            <i :class="{'el-icon-edit': !editBaseBranch, 'el-icon-check': editBaseBranch}" @click="editBaseBranch = !editBaseBranch"></i>
                        </el-form-item>
                        <el-form-item label="上传收集的覆盖率exec文件">
                            <el-upload
                                    drag
                                    action="#"
                                    multiple
                                    :file-list="formFileList"
                                    :limit="5"
                                    :before-remove="beforeRemove"
                                    :on-remove="onRemoveFile"
                                    :on-exceed="handleExceed"
                                    :on-change="onChangeFile"
                                    :auto-upload="false"
                                    accept=".exec"
                            >
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">只能上传exec文件，且不超过10M</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="createReportByExec">生成覆盖率</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="手动选择文件生成报告" name="five">
                    <el-alert title="注意：选择项目后对应的展示项目所有exec文件" type="warning" show-icon :closable="false"/>
                    <el-form label-position="top" label-width="80px" :model="createReportInfo" :rules="fiveRules" ref="fiveRuleForm">
                        <el-form-item label="模块名称" prop="moduleName" >
                            <el-select v-model="createReportInfo.moduleName" placeholder="请选择项目服务模块" @change="changeProjectNameForExec($event)" filterable clearable style="width: 400px">
                                <el-option v-for="(item, index) in moduleForExecList" :label="item" :value="item" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Exec文件名称" prop="execSet">
                            <el-select v-model="createReportInfo.execSet" placeholder="请选择覆盖率Exec文件" multiple clearable filterable style="width: 400px">
                                <el-option v-for="(item, index) in execFileNameList" :label="item" :value="item" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="测试分支" prop="branch" style="width: 30%">
                            <span v-show="!editBranch">{{ createReportInfo.branch }} </span>
                            <el-input v-show="editBranch" v-model="createReportInfo.branch"></el-input>
                            <i :class="{'el-icon-edit': !editBranch, 'el-icon-check': editBranch}" @click="editBranch = !editBranch"></i>
                        </el-form-item>
                        <el-form-item label="报告模式" prop="mode">
                            <el-checkbox-group v-model="modeCheckedList" :min="0" :max="1" @change="modeChange" >
                                <el-checkbox v-for="(value, key) in modeOptionsMap" :label="key" :key="key">{{ value }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="基准分支" prop="baseBranch" style="width: 30%" v-if="showBaseBranch">
                            <span v-show="!editBaseBranch">{{ createReportInfo.baseBranch }} </span>
                            <el-input v-show="editBaseBranch" v-model="createReportInfo.baseBranch"></el-input>
                            <i :class="{'el-icon-edit': !editBaseBranch, 'el-icon-check': editBaseBranch}" @click="editBaseBranch = !editBaseBranch"></i>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="createReportForExec('fiveRuleForm')">生成覆盖率</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script>
    export default {
        name: "JacocoCreate",
        data() {
            return {
                // 创建报告所需的属性
                createReportInfo: {
                    projectName: null,
                    moduleName: null,
                    env: null,
                    branch: null,
                    baseBranch: 'prod',
                    channel: "QIKE", // 目前平台默认的渠道都是QIKE
                    mode: 2,
                    newTag: null,
                    oldTag: null,
                    dateList: null,
                    execSet: null,
                },
                // 上传文件时组件保存的文件列表
                formFileList: [],
                // 提取文件列表中的二进制文件数据,用于提交到后台
                execFileList: [],
                // 项目模块映射表
                moduleNameMap: {},
                // 模块列表
                moduleNameList: [],
                // 项目列表
                projectNameList: [],
                // 是否显示子模块选择框
                isMultiModuleProject: false,
                // 当前默认激活的tab
                activeName: 'second',
                // 记录上一次激活的tab
                oldActiveName: 'second',
                // 全量覆盖率下,默认分支是否可编辑的默认状态
                editBaseBranch: false,
                editBranch: false,
                // 是否显示基准分支
                showBaseBranch: false,
                // 模式选项,以map存储,方便拿到key进行对应后台的枚举
                modeOptionsMap: {
                    1: '全量',
                    2: '增量'
                },
                // 选中的模式列表
                modeCheckedList: [],
                // 全局按钮点击次数
                buttonClickTag: 0,


                // 项目列表
                moduleForExecList: [],
                // exec文件名称列表
                execFileNameList: [],
                // 项目映射exec文件列表
                moduleForExecListMap: {},
                fiveRules: {
                    moduleName: { required: true, message: '请选择项目服务模块', trigger: 'blur' },
                    execSet: { required: true, message: '请选择覆盖率文件', trigger: 'blur' },
                    branch: { required: true, message: '请输入测试分支', trigger: 'blur' },
                    env: { required: true, message: '请输入测试环境', trigger: 'blur' },
                    mode: { required: true, message: '请选择报告模式', trigger: 'blur' },
                    baseBranch: { required: true, message: '请输入基准分支', trigger: 'blur' },
                }
            }
        },
        methods: {
            // 查询项目和对应服务模块
            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) {
                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.createReportInfo.moduleName = null
                    this.moduleNameList = this.moduleNameMap[name]
                } else {
                    this.isMultiModuleProject = false
                    this.moduleNameList = []
                    this.createReportInfo.moduleName = null
                }
            },
            // 监听tab点击事件
            tabClickHandle(e) {
                // 校验当前激活的是哪个tab，对比事件对象触发的name
                if (e.name === this.oldActiveName) return
                if (e.name === 'first') {
                    this.createReportInfo.mode = 1;
                    this.createReportInfo.branch = undefined;
                } else if (e.name === 'second') {
                    this.createReportInfo.mode = 2;
                    this.createReportInfo.branch = undefined;
                } else if (e.name === 'five'){
                    this.createReportInfo.mode = 2;
                    this.createReportInfo.branch = 'uat';
                }
                this.createReportInfo.projectName = undefined;
                this.createReportInfo.moduleName = undefined;
                this.createReportInfo.newTag = undefined;
                this.createReportInfo.oldTag = undefined;
                this.createReportInfo.env = undefined;
                this.createReportInfo.dateList = [];
                this.createReportInfo.execSet = []
                this.createReportInfo.baseBranch = e.name === 'fourth' ? null : 'prod';
                this.oldActiveName = this.activeName;

                this.execFileNameList = []
            },
            // 生成覆盖率报告
            async createReport() {
                const respage = await this.$api.post('/jacoco/report/createReport', this.createReportInfo)
                if (respage.code !== 200) return this.$message.error(respage.message)
                return this.$message.success("覆盖率报告正在生成, 请稍后查询!");
            },
            // 超出文件限制数量时
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            // 上传文件有变化时
            onChangeFile(file, fileList) {
                const isLt10M = file.size / 1024 / 1024 < 10
                if (!isLt10M) {
                    this.$msgbox.alert('上传文件大小不能超过 10MB!')
                    return false
                }
                this.resetFileList(file, fileList)
            },
            // 移除文件之前
            beforeRemove(file, fileList) {
                return this.$msgbox.alert(`确定移除 ${file.name}？`)
            },
            // 移除文件
            onRemoveFile(file, fileList) {
                this.resetFileList(file, fileList)
            },
            // 将上传的控件fileList数据中的每个file对象提取出来, 放到execFileList中
            resetFileList(file, fileList) {
                this.execFileList = []
                for (let x of fileList) {
                    if (x.raw) {
                        this.execFileList.push(x.raw)
                    }
                }
            },
            // 生成报告的模式变化时
            modeChange(value) {
                // 增量时, 设置默认的基准分支为prod
                if (value.length !== 0 && value[0] === '2') {
                    this.createReportInfo.baseBranch = 'prod'
                    this.showBaseBranch = true
                    this.createReportInfo.mode = 2
                } else {
                    this.createReportInfo.baseBranch = null
                    this.showBaseBranch = false
                    this.createReportInfo.mode = 1
                }
            },
            // 根据上传的exec文件进行报告生成
            async createReportByExec() {
                if (this.modeCheckedList === null || this.modeCheckedList.length === 0) return this.$message.error("请选择报告的生成模式")
                if (this.buttonClickTag !== 0) return this.$message.warning("请勿重复点击!!!")
                this.buttonClickTag = 1;
                setTimeout(function () {
                    this.buttonClickTag = 0
                }.bind(this), 3000);

                this.createReportInfo.mode = this.modeCheckedList[0]
                this.createReportInfo.files = this.execFileList
                const respage = await this.$api.postFormData('/jacoco/report/createReportByExec', this.createReportInfo);
                if (respage.code !== 200) return this.$message.error(respage.message)
                return this.$message.success("覆盖率报告正在生成, 请稍后查询!");
            },
            async findByExecFile(){
                const respage = await this.$api.post('/jacoco/report/findByExecFile')
                if (respage.code !== 200) return this.$message.error(respage.message)
                this.moduleForExecListMap = respage.data
                this.moduleForExecList = Object.keys(this.moduleForExecListMap)
            },
            changeProjectNameForExec(name){
                this.execFileNameList = this.moduleForExecListMap[name]
            },
            createReportForExec(formName){
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        const respage = await this.$api.post('/jacoco/report/createReportForExec', this.createReportInfo)
                        if (respage.code !== 200) return this.$message.error(respage.message)
                        return this.$message.success("覆盖率报告正在生成, 请稍后查询!");
                    } else {
                        this.$message.warning('必填项未完整填写, 请检查!')
                        return false;
                    }
                });
            }
        },
        created() {
            // 查询当前全部的项目集合与模块映射数据
            this.queryProjectServiceModule();
            this.findByExecFile();
        }
    }
</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-form {
            margin-left: 20px;
        }
        .el-alert {
            margin-left: 20px;
            width: 480px;
        }
        .el-table {
            margin-top: 15px;
            margin-bottom: 15px;
        }
    }
</style>
