<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="main">
        <el-carousel trigeer="click" height="580px" 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-row class="box-innercard" style="padding-left: 20px;">
                        <el-col :span="12">
                            姓名: {{user.name}}
                        </el-col>
                        <el-col :span="12">
                            用户id: {{user.userId}}
                        </el-col>
                    </el-row>
                    <el-row class="box-innercard" style="padding-left: 20px;">
                        <el-col :span="12">
                            电子邮箱: {{user.email}}
                        </el-col>
                    </el-row>
                    <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>
                    <el-row>
                        <el-col :span="20" class="title">
                            commit信息
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" @click="showModel1">commit组成信息</el-button>
                        </el-col>
                    </el-row>
                    <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>
                    <el-row style="margin-top: 50px">
                        <el-col :span="20" class="title">
                            缺陷信息
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" @click="showModel4">缺陷修复率</el-button>
                        </el-col>
                    </el-row>
                    <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>
                    <el-row style="margin-top: 50px">
                        <el-col :span="20" class="title">
                            需求树信息
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" @click="showModel5">需求完成率</el-button>
                        </el-col>
                    </el-row>
                    <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>
                    <el-row style="margin-top: 20%">
                        <el-col :span="20" class="title">
                            流水线部署信息
                        </el-col>
                        <el-col :span="4">
                            <el-button type="text" @click="showModel3">部署通过率</el-button>
                        </el-col>
                    </el-row>
                    <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-carousel-item>
        </el-carousel>
        <el-dialog v-model="visible1">
            <div
                    class="righttop"
                    ref="charts1"
                    :style="{
          width: '100%',
          height: '280px',
          background: 'rgba(255,0,0,0)',
        }"
            ></div>
        </el-dialog>
        <el-dialog v-model="visible2">
            <div
                    class="righttop"
                    ref="charts2"
                    :style="{
          width: '100%',
          height: '280px',
          background: 'rgba(255,0,0,0)',
        }"
            ></div>
        </el-dialog>
        <el-dialog v-model="visible3">
            <div
                    class="righttop"
                    ref="charts3"
                    :style="{
          width: '100%',
          height: '280px',
          background: 'rgba(255,0,0,0)',
        }"
            ></div>
        </el-dialog>
        <el-dialog v-model="visible4">
            <div
                    class="righttop"
                    ref="charts4"
                    :style="{
          width: '100%',
          height: '280px',
          background: 'rgba(255,0,0,0)',
        }"
            ></div>
        </el-dialog>
        <el-dialog v-model="visible5">
            <div
                    class="righttop"
                    ref="charts5"
                    :style="{
          width: '100%',
          height: '280px',
          background: 'rgba(255,0,0,0)',
        }"
            ></div>
        </el-dialog>
    </div>
</template>

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

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

                visible1: false,
                commitAnalysis: [],
                visible2: false,
                testAnalysis: [],
                visible3: false,
                deployAnalysis: [],
                arrange: {},
                user: {},
                test: {},
                commitMessage: {},
                visible4: false,
                bugAnalysis: [],
                bugList:{},
                visible5: false,
                treeAnalysis:[],
                treeNode:{},
                //项目列表
                productList: [],

                totalScore:0.0,
                commitScore:0.0,
                bugScore:0.0,
                nodeScore:0.0,
                pipelineScore:0.0,
                bonus:0.0,
            };
        },
        async mounted() {
            await this.getData();
            this.getAnaylysis();
        },
        methods: {
            async getData() {
                try {
                    let res = await getStudentAnalysis({
                        params: {
                            // user_id: this.$route.params.id,
                            // user_id: 1575,
                            user_id: this.userId,
                        },
                    });
                    // console.log(res);
                    if (res.success) {
                        this.user = res.content;
                        this.productList = res.content.projects;
                        this.commitMessage = res.content.commit;
                        this.test = res.content.test;
                        this.bugList = res.content.buglist;
                        this.pipeline = res.content.pipeline;
                        this.treeNode = res.content.treeNode;
                    }
                } catch (e) {
                    // this.$message.error(e.message);
                    alert("暂未查找到相关数据");
                }
                try{
                    let res1 = await getStudentScore({
                        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);
                }
            },
            getAnaylysis() {
                //部署信息图表
                this.deployAnalysis.push({
                    value: this.pipeline.pipeline_deploy,
                    name: "部署成功次数",
                });
                this.deployAnalysis.push({
                    value: this.pipeline.pipline_failure,
                    name: "部署失败次数",
                });
                //commit信息图表
                this.commitAnalysis.push({
                    value: this.commitMessage.feature_commit,
                    name: "feature_commit次数",
                });
                this.commitAnalysis.push({
                    value: this.commitMessage.buglist_commit,
                    name: "buglist_commit次数",
                });
                //test信息图表
                this.testAnalysis.push({
                    value: this.test.test_concurrency_failure,
                    name: "接口测试失败次数",
                });
                this.testAnalysis.push({
                    value: this.test.test_concurrency_success,
                    name: "接口测试通过次数",
                });
                //bug信息图表
                this.bugAnalysis.push({
                    value: this.bugList.finished_times,
                    name: "已完成的缺陷数目",
                });
                this.bugAnalysis.push({
                    value: (this.bugList.bug_times - this.bugList.finished_times),
                    name: "未完成的缺陷数目",
                });
                //需求信息图表
                this.treeAnalysis.push({
                    value: this.treeNode.finished_treeNode_times,
                    name: "已完成的需求数目",
                });
                this.treeAnalysis.push({
                    value: (this.treeNode.treeNode_times - this.treeNode.finished_treeNode_times),
                    name: "未完成的需求数目",
                });
            },
            initBarChart1() {
                let newPromise = new Promise((resolve) => {
                    resolve();
                });
                newPromise.then(() => {
                    let myChart1 = echarts.init(this.$refs.charts1);
                    myChart1.setOption({
                        title: {
                            text: "commit占比信息",
                        },
                        grid: {
                            top: 90,
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        series: [
                            {
                                name: "commit次数",
                                type: "pie", // 设置图表类型为饼图
                                radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data: this.commitAnalysis,
                            },
                        ],
                    });
                });
            },
            initBarChart2() {
                let newPromise = new Promise((resolve) => {
                    resolve();
                });
                newPromise.then(() => {
                    let myChart2 = echarts.init(this.$refs.charts2);
                    myChart2.setOption({
                        title: {
                            text: "接口测试通过率",
                        },
                        grid: {
                            top: 90,
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        series: [
                            {
                                name: "测试次数",
                                type: "pie", // 设置图表类型为饼图
                                radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data: this.testAnalysis,
                            },
                        ],
                    });
                });
            },
            initBarChart3() {
                let newPromise = new Promise((resolve) => {
                    resolve();
                });
                newPromise.then(() => {
                    let myChart3 = echarts.init(this.$refs.charts3);
                    myChart3.setOption({
                        title: {
                            text: "部署通过率",
                        },
                        grid: {
                            top: 90,
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        series: [
                            {
                                name: "部署次数",
                                type: "pie", // 设置图表类型为饼图
                                radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data: this.deployAnalysis,
                            },
                        ],
                    });
                });
            },
            initBarChart4() {
                let newPromise = new Promise((resolve) => {
                    resolve();
                });
                newPromise.then(() => {
                    let myChart4 = echarts.init(this.$refs.charts4);
                    myChart4.setOption({
                        title: {
                            text: "缺陷修复率",
                        },
                        grid: {
                            top: 90,
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        series: [
                            {
                                name: "缺陷数目",
                                type: "pie", // 设置图表类型为饼图
                                radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data: this.bugAnalysis,
                            },
                        ],
                    });
                });
            },

            initBarChart5() {
                let newPromise = new Promise((resolve) => {
                    resolve();
                });
                newPromise.then(() => {
                    let myChart5 = echarts.init(this.$refs.charts5);
                    myChart5.setOption({
                        title: {
                            text: "需求完成率",
                        },
                        grid: {
                            top: 90,
                        },
                        tooltip: {
                            trigger: "item",
                        },
                        series: [
                            {
                                name: "需求数目",
                                type: "pie", // 设置图表类型为饼图
                                radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data: this.treeAnalysis,
                            },
                        ],
                    });
                });
            },
            showModel1() {
                this.visible1 = true;
            },
            showModel2() {
                this.visible2 = true;
            },
            showModel3() {
                this.visible3 = true;
            },
            showModel4() {
                this.visible4 = true;
            },
            showModel5() {
                this.visible5 = true;
            },
        },
        watch: {
            visible1: function (val) {
                if (val) {
                    this.initBarChart1();
                }
            },
            visible2: function (val) {
                if (val) {
                    this.initBarChart2();
                }
            },
            visible3: function (val) {
                if (val) {
                    this.initBarChart3();
                }
            },
            visible4: function (val) {
                if (val) {
                    this.initBarChart4();
                }
            },
            visible5: function (val) {
                if (val) {
                    this.initBarChart5();
                }
            },
        },
    };
</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: 30px;
        padding-left: 15px;
        font-size: 14px;
        font-weight: bold;
    }


    .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);
    }
</style>
