<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="main">
        <el-carousel trigger="click" height="560px" interval="1000000000">
                        <el-carousel-item>
                            <div>
                                <div class="title">小组信息</div>
                                <el-row class="box-innercard">
                                    <el-col :span="12">
                                       小组得分: {{totalScore}}
                                    </el-col>
                                    <el-col :span="12">
                                        额外bonus: {{bonus}}
                                    </el-col>
                                </el-row>
                                <div class="title-little">成员信息</div>
                                <el-table
                                        :data="userList"
                                        class="table">
                                    <el-table-column
                                            prop="userId"
                                            label="用户id"
                                            width="150">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="学号信息"
                                            width="150">
                                    </el-table-column>
                                    <el-table-column
                                            prop="email"
                                            label="电子邮箱">
                                    </el-table-column>
                                </el-table>
                                <div class="title-little">项目信息</div>
                                <el-table
                                        :data="productList"
                                        class="table">
                                    <el-table-column
                                            prop="projectId"
                                            label="项目id"
                                            width="150">
                                    </el-table-column>
                                    <el-table-column
                                            prop="projectName"
                                            label="项目名称">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div>
                                <div class="title">commit信息</div>
                                <el-row class="box-innercard">
                                    commit得分: {{commitScore}}
                                </el-row>
                                <el-row class="box-innercard">
                                    <el-col :span="12">
                                        commit总次数: {{commitMessage.commit_times}}
                                    </el-col>
                                    <el-col :span="12">
                                        有效commit次数: {{commitMessage.valid_commit_times}}
                                    </el-col>
                                </el-row>
                                <el-row class="box-innercard">
                                    <el-col :span="12">
                                        bugList_commit次数: {{commitMessage.buglist_commit}}
                                    </el-col>
                                    <el-col :span="12">
                                        feature_commit次数: {{commitMessage.feature_commit}}
                                    </el-col>
                                </el-row>
                                <el-card class="box-innercard" style="background-color: #ffffff;margin: 10px;width: 90%;height:350px;">
                                    <template v-slot:header class="clearfix">
                                        <span style="font-size: 14px">commit具体信息（可下滑查看）</span>
                                    </template>
                                    <el-descriptions :column="1" :colon="false" class="nui-scroll">
                                        <div v-for="item in commitMessage.commit_msg_overview" v-bind:key="item">
                                            <el-descriptions-item :key="item">{{
                                                item
                                                }}</el-descriptions-item>
                                        </div>
                                    </el-descriptions>
                                </el-card>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item>
                            <div>
                                <div class="title" style="margin-top: 50px">缺陷信息</div>
                                <el-row class="box-innercard">
                                    缺陷得分: {{bugScore}}
                                </el-row>
                                <el-row class="box-innercard">
                                    <el-col :span="12">
                                        缺陷数目: {{bugList.bug_times}}
                                    </el-col>
                                    <el-col :span="12">
                                        高优先级缺陷数目: {{bugList.high_times}}
                                    </el-col>
                                </el-row>
                                <el-row class="box-innercard">
                                    <el-col :span="12">
                                        已经修复的缺陷数目: {{bugList.finished_times}}
                                    </el-col>
                                </el-row>
                            </div>
                            <div>
                                <div class="title" style="margin-top: 50px">需求树信息</div>
                                <el-row class="box-innercard">
                                    需求得分: {{nodeScore}}
                                </el-row>
                                <el-row class="box-innercard">
                                    <el-col :span="12">
                                        需求节点数目: {{treeNode.treeNode_times}}
                                    </el-col>
                                    <el-col :span="12">
                                        高优先级需求数目: {{treeNode.high_treeNode_times}}
                                    </el-col>
                                </el-row>
                                <el-row class="box-innercard">
                                    <el-col :span="12">
                                        已经完成的需求数目: {{treeNode.finished_treeNode_times}}
                                    </el-col>
                                </el-row>
                            </div>
                        </el-carousel-item>
            <el-carousel-item>
                <div>
                    <div class="title" style="margin-top: 50px">流水线部署信息</div>
                    <el-row class="box-innercard">
                        部署得分: {{pipelineScore}}
                    </el-row>
                    <el-row class="box-innercard">
                        <el-col :span="12">
                            流水线部署次数: {{arrange.pipeline_deploy}}
                        </el-col>
                        <el-col :span="12">
                            流水线部署成功次数: {{arrange.pipeline_pass}}
                        </el-col>
                    </el-row>
                    <el-row class="box-innercard">
                        <el-col :span="12">
                            流水线部署失败次数: {{arrange.pipline_failure}}
                        </el-col>
                    </el-row>
                </div>
                <!--        图表-->
                <el-card class="box-card" style="margin-top: 20px">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <p class="table_font" style="text-align: center">commit贡献占比</p>
                            <div id="main1" class="pie"
                            /></el-col>
                        <el-col :span="6">
                            <p class="table_font" style="text-align: center">流水线部署贡献占比</p>
                            <div id="main2" class="pie"
                            />
                        </el-col>
                        <el-col :span="6">
                            <p class="table_font" style="text-align: center">缺陷贡献占比</p>
                            <div id="main3" class="pie"
                            /></el-col>
                        <el-col :span="7">
                            <p class="table_font" style="text-align: center">需求树贡献占比</p>
                            <div id="main4" class="pie"
                            />
                        </el-col>
                    </el-row>
                </el-card>
            </el-carousel-item>
        </el-carousel>

    </div>
</template>

<script>
    import * as echarts from "echarts";
    import {getGroupAnalysis,getGroupScore} from "@/api/analysis/devcloud.js";

    export default {
        name: "AnalysisGroupCard",
        props:{
            "num": {type:Number,default:1},
        },
        data() {
            return {
                userId: this.num,

                commitContribution: [
                    // { name: "zqq", times: 0, proportion: 0 },
                    // { name: "ty", times: 2, proportion: 0.4 },
                    // { name: "kcy", times: 1, proportion: 0.2 },
                    // { name: "pyy", times: 2, proportion: 0.4 },
                ],
                interfaceContribution: [
                    // { name: "zqq", times: 4, proportion: 0.8 },
                    // { name: "ty", times: 0, proportion: 0 },
                    // { name: "kcy", times: 0, proportion: 0 },
                    // { name: "pyy", times: 1, proportion: 0.2 },
                ],
                pipelineContribution: [
                    // { name: "zqq", times: 1, proportion: 0.1 },
                    // { name: "ty", times: 1, proportion: 0.1 },
                    // { name: "kcy", times: 2, proportion: 0.2 },
                    // { name: "pyy", times: 6, proportion: 0.6 },
                ],
                bugContribution: [],
                treeContribution: [],

                commitPie: [],
                testPie: [],
                deployPie: [],
                bugListPie: [],
                treePie: [],

                arrange: {
                    pipeline_deploy: 10,
                    pipeline_pass: 20,
                    pipline_failure: 20,
                },
                test: {
                    // total: 20,
                    // execute: 200,
                    // pass: 10,
                    // fail: 20,
                },
                commitMessage: {
                    // commit_times: 5,
                    // valid_commit_times: 3,
                    // buglist_commit: 4,
                    // feature_commit: 3,
                    // commit_msg_overview: [
                    //   "- fix: 修改错误",
                    //   "- feat: 增加评论区功能",
                    //   "- feat: 增加头像上传",
                    //   "- fix: 修复登录页面的错误",
                    // ],
                },
                bugList: {
                    // bug_times: 10,
                    // high_times: 5,
                    // finished_times: 9,
                },
                treeNode: {
                    // treeNode_times: 10,
                    // high_treeNode_times: 5,
                    // finished_treeNode_times: 9,
                },

                userList: [
                    // { userId: 11, name: "测试", email: "2222" },
                    // { userId: 12, name: "测试2", email: "2222" },
                    // { userId: 13, name: "测试3", email: "2222" },
                ],
                productList: [
                    // { projectId: 1, projectName: "fun_frontEnd" },
                    // { projectId: 2, projectName: "fun_backEnd" },
                ],

                totalScore: 0.0,
                commitScore: 0.0,
                bugScore: 0.0,
                nodeScore: 0.0,
                pipelineScore: 0.0,
                bonus: 0.0,
            };
        },

        async mounted() {
            await this.getData();
            await this.getAnalysis();
            this.getCommitPie();
            // this.getTestPie();
            this.getDeployPie();
            this.getBugPie();
            this.getTreePie();
        },

        methods: {
            async getData(){
                try{
                    let res = await getGroupAnalysis({
                        params: {
                            // user_id: this.$route.params.id,
                            // user_id: 1575,
                            user_id: this.userId,
                        },
                    });
                    // console.log(res);
                    // console.log("here");
                    // console.log(res.content.commit["commit_contribution"]);
                    if(res.success){
                        this.userList = res.content.students;
                        this.productList = res.content.projects;
                        this.commitMessage = res.content.commit;
                        this.commitContribution = res.content.commit.commit_contribution;
                        this.test = res.content.test;
                        this.interfaceContribution = res.content.test.test_contribution;
                        this.arrange = res.content.pipeline;
                        this.pipelineContribution = res.content.pipeline.pipeline_contribution;
                        this.bugList = res.content.buglist;
                        this.bugContribution = res.content.buglist.bug_contribution;
                        this.treeNode = res.content.treeNode;
                        this.treeContribution = res.content.treeNode.treeNode_contribution;
                    }
                    // console.log("done");
                    // console.log(this.commitContribution);
                } catch(e) {
                    // this.$message.error("暂未查找到相关数据");
                    alert("暂未查找到相关数据");
                }
                try{
                    let res1 = await getGroupScore({
                        params: {
                            // user_id: this.$route.params.id,
                            // user_id: 1575,
                            user_id: this.userId,
                        }
                    });
                    // console.log(res1);
                    if(res1.success){
                        this.totalScore = res1.content.totalScore;
                        this.commitScore = res1.content.commitScore;
                        this.bugScore = res1.content.bugScore;
                        this.nodeScore = res1.content.nodeScore;
                        this.pipelineScore = res1.content.pipelineScore;
                        this.bonus = res1.content.bonus;
                    }
                } catch (e) {
                    // this.$message.error(e.message);
                }
            },

            async getAnalysis() {
                console.log("analysis:");
                console.log(this.commitContribution);
                for (let i = 0; i < this.commitContribution.length; i++) {
                    this.commitPie.push({
                        value: this.commitContribution[i].times,
                        name: this.commitContribution[i].name,
                    });
                }
                for (let i = 0; i < this.interfaceContribution.length; i++) {
                    this.testPie.push({
                        value: this.interfaceContribution[i].times,
                        name: this.interfaceContribution[i].name,
                    });
                }
                for (let i = 0; i < this.pipelineContribution.length; i++) {
                    this.deployPie.push({
                        value: this.pipelineContribution[i].times,
                        name: this.pipelineContribution[i].name,
                    });
                }
                for(let i = 0; i < this.bugContribution.length; i++) {
                    this.bugListPie.push({
                        value : this.bugContribution[i].times,
                        name: this.bugContribution[i].name,
                    });
                }
                // console.log(this.bugListPie);
                for(let i = 0; i < this.treeContribution.length; i++) {
                    this.treePie.push({
                        value: this.treeContribution[i].times,
                        name: this.treeContribution[i].name,
                    });
                }
            },

            getCommitPie() {
                // 绘制图表
                var myChart1 = echarts.init(document.getElementById("main1"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        // text: 'commit占比信息',
                    },
                    grid: {
                        top: 90,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    series: [
                        {
                            name: "commit次数",
                            center: ["35%", "50%"],
                            type: "pie", // 设置图表类型为饼图
                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data: this.commitPie,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);
            },

            // getTestPie() {
            //   var myChart2 = echarts.init(document.getElementById("main2"));
            //   // 指定图表的配置项和数据
            //   var option = {
            //     title: {
            //       // text: 'commit占比信息',
            //     },
            //     grid: {
            //       top: 90,
            //     },
            //     tooltip: {
            //       trigger: "item",
            //     },
            //     series: [
            //       {
            //         name: "测试次数",
            //         center: ["50%", "40%"],
            //         type: "pie", // 设置图表类型为饼图
            //         radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            //         data: this.testPie,
            //       },
            //     ],
            //   };
            //   // 使用刚指定的配置项和数据显示图表。
            //   myChart2.setOption(option);
            // },

            getDeployPie() {
                var myChart3 = echarts.init(document.getElementById("main2"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        // text: 'commit占比信息',
                    },
                    grid: {
                        top: 90,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    series: [
                        {
                            name: "部署次数",
                            // center: ["50%", "40 %"],
                            center: ["35%", "50%"],
                            type: "pie", // 设置图表类型为饼图
                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data: this.deployPie,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart3.setOption(option);
            },

            getBugPie() {
                var myChart4 = echarts.init(document.getElementById("main3"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        // text: 'commit占比信息',
                    },
                    grid: {
                        top: 90,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    series: [
                        {
                            name: "提交缺陷次数",
                            center: ["35%", "50%"],
                            type: "pie", // 设置图表类型为饼图
                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data: this.bugListPie,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart4.setOption(option);
            },

            getTreePie() {
                var myChart5 = echarts.init(document.getElementById("main4"));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        // text: 'commit占比信息',
                    },
                    grid: {
                        top: 90,
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    series: [
                        {
                            name: "提交需求次数",
                            center: ["35%", "50%"],
                            type: "pie", // 设置图表类型为饼图
                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                            data: this.treePie,
                        },
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart5.setOption(option);
            },
        },

    };

</script>

<style scoped>

    .box-innercard {
        padding: 10px;
        background-color: #F8F9FB;
        font-size:14px;
    }

    .table{
        margin: 10px;
        margin-top: 20px;
        margin-left: 15px;
        margin-bottom: 20px;
        width: 95%;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item{
        /*background-color: #FFFFFF;*/
        background-color: #F8F9FB;
        /*border-radius: 10px;*/
        padding: 10px;
    }

    .title{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
    }

    .title-little{
        margin-top: 10px;
        padding-left: 15px;
        font-size: 14px;
        font-weight: bold;
    }


    .score-box {
        width: 20px;
        height: 10px;
        background-color: #98e7ff;
    }
    .nui-scroll {
        margin-top: 5px;
        width: 99%;
        height: 300px;
        overflow: auto;
    }

    .nui-scroll::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    /*正常情况下滑块的样式*/

    .nui-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .05);
        border-radius: 10px;
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    }
    /*鼠标悬浮在该类指向的控件上时滑块的样式*/

    .nui-scroll:hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        border-radius: 10px;
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    }
    /*鼠标悬浮在滑块上时滑块的样式*/

    .nui-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .4);
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    }
    /*正常时候的主干部分*/

    .nui-scroll::-webkit-scrollbar-track {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        background-color: white;
    }
    /*鼠标悬浮在滚动条上的主干部分*/

    .nui-scroll::-webkit-scrollbar-track:hover {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
        background-color: rgba(0, 0, 0, .01);
    }


    .pie {
        width: 200px;
        height: 150px;
    }
    /* .main{
      display: flex;
    } */
</style>
