<template>
    <div class="mainContent">
        <!-- 天维度问题汇总 -->
        <div class="searchContent">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="日期">
                    <el-date-picker v-model="statisticParam.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 label="项目所属团队" prop="team">
                    <el-select v-model="statisticParam.team" placeholder="请选择项目所属团队" clearable>
                        <el-option v-for="(item, index) in teamList" :label="item" :value="item" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-divider></el-divider>
        <dv-border-box-12 class="top">
            <div class="topInner">
                <div id="dayIssuesSummaryChart"></div>
            </div>
        </dv-border-box-12>
        <el-divider></el-divider>
        <dv-border-box-12 class="bottom">
            <div class="father">
                <div id="compareChart"></div>
                <div id="bugSmellVulnerChart"></div>
            </div>
        </dv-border-box-12>
    </div>
</template>
<script>
export default {
    name: 'codeCheckData',
    data() {
        return {
            // 统计查询参数
            statisticParam: {
                dateList: [],
                language: ''
            },
            languageList: ['JAVA', 'REACT'],
            // 天维度的问题汇总柱状图
            dayIssuesSummaryOption: {
                title: {
                    text: '每日未解决问题总量',
                    x: 'center',
                    y: '0',
                    textStyle: {
                        fontSize: 16
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                calculable: true,
                xAxis: {
                    name: '日期',
                    data: [],
                    type: 'category',
                    // 是否显示X轴 X轴刻度线
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    },
                },
                yAxis: {
                    name: '数量',
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: true
                    },
                    // 设置横线样式
                    // splitLine: {
                    //     lineStyle: {
                    //         color: '#000'
                    //     }
                    // }
                },
                series: [{
                    name: '未解决问题数量',
                    type: 'line',
                    data: [],
                    // itemStyle: {
                    //     barBorderRadius: 5,
                    //     borderWidth: 1,
                    //     borderType: 'solid',
                    //     borderColor: '#73c0de',
                    //     shadowColor: '#5470c6',
                    //     shadowBlur: 3
                    // }
                }],
                color: ['#37A2DA'],
            },
            dayIssuesSummaryChart: {},
            // 天维度的新增和已解决的对比柱状图
            compareIssuesSummaryOption: {
                title: {
                    text: '每日新增和已解决对比',
                    x: 'center',
                    y: '0',
                    textStyle: {
                        fontSize: 16
                    },
                },
                legend: {
                    show: true,
                    top: '0%',
                    left: '70%',
                },
                tooltip: {},
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: '今日新增',
                        type: 'bar',
                        stack: 'x',
                        data: [],
                        itemStyle: {
                            color: '#91CC75'
                        }
                    },
                    {
                        name: '今日已解决',
                        type: 'bar',
                        stack: 'x',
                        data: [],
                        itemStyle: {
                            color: '#37A2DA'
                        }
                    }
                ],
                color: ['#37A2DA'],
            },
            compareIssuesSummaryChart: {},
            // bug、异味、漏洞统计
            bugSmellVulnerOption: {
                title: {
                    text: '每日新增问题类型汇总',
                    x: 'center',
                    y: '0',
                    textStyle: {
                        fontSize: 16
                    },
                },
                legend: {
                    show: true,
                    top: '0%',
                    left: '70%',
                },
                tooltip: {},
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [
                    {
                        name: 'bug',
                        type: 'line',
                        data: [],
                        smooth: true,
                        itemStyle: {
                            color: '#91CC75'
                        }
                    },
                    {
                        name: '异味',
                        type: 'line',
                        data: [],
                        itemStyle: {
                            color: '#37A2DA'
                        }
                    },
                    {
                        name: '漏洞',
                        type: 'line',
                        data: [],
                        itemStyle: {
                            color: '#FB6E25'
                        }
                    }
                ],
                textStyle: {
                    fontFamily: 'Helvetica',
                }
            },
            bugSmellVulnerChart: {},

            // 项目所属团队
            teamList: [],
        }
    },
    mounted() {
        this.chartInit()
        this.query()
    },
    methods: {
        // 获取指定Date的年-月-日形式字符串
        getTargetDate(date) {
            const y = date.getFullYear()
            const m = (date.getMonth() + 1 + '').padStart(2, '0')
            const d = (date.getDate() + '').padStart(2, '0')
            return `${y}-${m}-${d}`
        },
        // 获取两个日期的差值
        getDaysBetween(dateString1, dateString2) {
            const startDate = Date.parse(dateString1);
            const endDate = Date.parse(dateString2);
            if (startDate > endDate) {
                return 0;
            }
            if (startDate === endDate) {
                return 1;
            }
            return (endDate - startDate) / (24 * 60 * 60 * 1000);
        },
        // 图标初始化
        async chartInit() {
            // 天维度问题汇总初始化
            this.dayIssuesSummaryChart = this.$echarts.init(document.getElementById('dayIssuesSummaryChart'))
            this.dayIssuesSummaryChart.setOption(this.dayIssuesSummaryOption)
            // 天维度新增和已解决对比初始化
            this.compareIssuesSummaryChart = this.$echarts.init(document.getElementById('compareChart'))
            this.compareIssuesSummaryChart.setOption(this.compareIssuesSummaryOption)
            // 天维度bug、异味、漏洞统计初始化
            this.bugSmellVulnerChart = this.$echarts.init(document.getElementById('bugSmellVulnerChart'))
            this.bugSmellVulnerChart.setOption(this.bugSmellVulnerOption)
        },
        // 根据日期进行查询
        query() {
            if (this.getDaysBetween(this.statisticParam.dateList[0], this.statisticParam.dateList[1]) > 30 || this.getDaysBetween(this.statisticParam.dateList[0], this.statisticParam.dateList[1]) < 5) {
                return this.$message.warning("选择的日期区间必须大于5 且 小于30")
            }
            if (new Date(new Date().setDate(new Date().getDate()+1)) <  new Date(this.statisticParam.dateList[1])){
                return this.$message.error("请选择当前时间之前的日期!")
            }
            this.querySummaryIssues()
            this.queryCompareIssuesSummary()
            this.queryByType()
        },
        // 查询天维度问题汇总数据
        async querySummaryIssues() {
            const res = await this.$api.post('/sonar/issues/summary', this.statisticParam)
            if (res.code !== 200) return this.$message.error(res.message)
            this.dayIssuesSummaryChart.setOption({
                xAxis: {
                    name: '日期',
                    data: res.data[0],
                },
                series: [{
                    data: res.data[1],
                }],
            })
        },
        // 查询新增和已解决的对比数据, 当日新增和当日关闭的的数据
        async queryCompareIssuesSummary() {
            const res = await this.$api.post('/sonar/issues/queryAddAndResolved', this.statisticParam)
            if (res.code !== 200) return
            this.compareIssuesSummaryChart.setOption({
                xAxis: {
                    name: '日期',
                    data: res.data[0],
                },
                series: [
                    {
                        data: res.data[1]
                    },
                    {
                        data: res.data[2]
                    }
                ],
            })
        },
        // 查询不同类型问题数据
        async queryByType() {
            const res = await this.$api.post('/sonar/issues/queryByType', this.statisticParam)
            if (res.code !== 200) return
            this.bugSmellVulnerChart.setOption({
                xAxis: {
                    name: '日期',
                    data: res.data[0],
                },
                series: [
                    {
                        data: res.data[1]
                    },
                    {
                        data: res.data[2]
                    },
                    {
                        data: res.data[3]
                    }
                ],
            })
        },
        // 查询所有部门名称,用于创建和修改时选择团队
        async queryAllDepartmentName() {
            const res = await this.$api.get('/sonar/department/getAllName')
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.teamList = res.data
        },
    },
    created() {
        this.queryAllDepartmentName()
        // 初始化日期控件默认值
        this.statisticParam.dateList.push(this.getTargetDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 5)))
        this.statisticParam.dateList.push(this.getTargetDate(new Date(new Date().setDate(new Date().getDate()+1))))
    }
}
</script>
<style lang="less" scoped>
.mainContent {
    margin-top: 10px;
    .searchContent {
        .el-button {
            margin-left: 10px;
        }
    }

    .top {
        width: 100%;
        height: 360px;

        .topInner {
            padding-top: 15px;
            height: 350px;

            #dayIssuesSummaryChart {
                width: 98%;
                height: 350px;
            }
        }
    }

    .dv-border-box-12 {
        width: 100%;
        height: 360px;

        .father {
            width: 100%;
            height: 330px;
            display: flex;
            justify-content: space-around;
            padding-top: 30px;

            #compareChart {
                width: 45%;
                height: 300px;
            }
            #bugSmellVulnerChart {
                width: 45%;
                height: 300px;
            }
        }
    }
}
</style>
