<template>
    <div style="display: flex;flex-direction: row;flex-wrap: nowrap">
        <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
            <div>
                <el-card style="border: none">
                    <div slot="header" class="clearfix" style="display: flex;flex-direction: row;flex-wrap: nowrap">
                        <div style="width: 150px;height: 150px;cursor: pointer" >
                            <el-avatar style="background-color: #969896" :src="require('@/assets/logo/tx.png')"
                                       :size="150"></el-avatar>
                        </div>
                        <div style="margin-left: 30px;margin-right: 30px;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;justify-content: center">
                            <span style="font-size: 50px;">
                                {{ this.$cookie.get("adminName") }}
                            </span>
                            <span style="margin-top: 10px;font-size: 16px;color: #969896">
                                超级管理员
                            </span>
                        </div>
                    </div>
                    <div class="text item" style="display: flex;justify-content: flex-start">
                        <span style="font-size: 16px;color: #9ca3af">
                            登录时间: {{loginTime}}
                        </span>
                    </div>
                </el-card>
            </div>
            <div style="margin-top: 20px">
                <el-card class="box-card" style="border: none">
                    <div id="echart1" ref="echart1" style="width:350px;height:300px;">

                    </div>
                </el-card>
            </div>
        </div>
        <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap">
                <el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
                        <i class="el-icon-s-finance"
                           style="width: 100px;
                        height: 100px;
                        background-color: #2ec7c9;
                        line-height: 100px;
                        text-align: center;
                        font-size: 30px;
                        color: #fff;"
                        ></i>
                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
                            <span style="font-size: 30px;font-weight: bold">
                                {{projectTotal}} <span>/个</span>
                            </span>
                            <span style="font-size: 15px;color: #9ca3af">总共项目数量</span>
                        </div>
                    </div>
                </el-card>

                <el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
                        <i class="el-icon-user-solid"
                           style="width: 100px;
                        height: 100px;
                        background-color: #ffb980;
                        line-height: 100px;
                        text-align: center;
                        font-size: 30px;
                        color: #fff;"
                        ></i>
                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
                            <span style="font-size: 30px;font-weight: bold">
                                {{userTotal}} <span>/个</span>
                            </span>
                            <span style="font-size: 15px;color: #9ca3af">总共用户数量</span>
                        </div>
                    </div>
                </el-card>

                <el-card style="margin-left: 40px;margin-bottom: 45px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
                        <i class="el-icon-s-tools"
                           style="width: 100px;
                        height: 100px;
                        background-color: #5ab1ef;
                        line-height: 100px;
                        text-align: center;
                        font-size: 30px;
                        color: #fff;"
                        ></i>
                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
                            <span style="font-size: 30px;font-weight: bold">
                                {{AdminTotal}} <span>/个</span>
                            </span>
                            <span style="font-size: 15px;color: #9ca3af">总共管理员数量</span>
                        </div>
                    </div>
                </el-card>

                <el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
                        <i class="el-icon-s-management"
                           style="width: 100px;
                        height: 100px;
                        background-color: rgb(255,208,20);
                        line-height: 100px;
                        text-align: center;
                        font-size: 30px;
                        color: #fff;"
                        ></i>
                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
                            <span style="font-size: 30px;font-weight: bold">
                                {{ArticleTotal}} <span>/个</span>
                            </span>
                            <span style="font-size: 15px;color: #9ca3af">总共文章数量</span>
                        </div>
                    </div>
                </el-card>

                <el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
                        <i class="el-icon-s-flag"
                           style="width: 100px;
                        height: 100px;
                        background-color: rgba(87,218,93,0.86);
                        line-height: 100px;
                        text-align: center;
                        font-size: 30px;
                        color: #fff;"
                        ></i>
                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
                            <span style="font-size: 30px;font-weight: bold">
                                {{CategoryTotal}} <span>/个</span>
                            </span>
                            <span style="font-size: 15px;color: #9ca3af">总共标签数量</span>
                        </div>
                    </div>
                </el-card>

                <el-card style="margin-left: 40px;width: 18vw;border: none;display: flex;flex-direction: row;align-items: center;" :body-style="{ display: 'flex', padding: 0 }">
                    <div style="border: none;display: flex;flex-direction: row;align-items: center;justify-content: center">
                        <i class="el-icon-s-comment"
                           style="width: 100px;
                        height: 100px;
                        background-color: #ea64bb;
                        line-height: 100px;
                        text-align: center;
                        font-size: 30px;
                        color: #fff;"
                        ></i>
                        <div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center">
                            <span style="font-size: 30px;font-weight: bold">
                                {{CommentTotal}} <span>/个</span>
                            </span>
                            <span style="font-size: 15px;color: #9ca3af">总共评论数量</span>
                        </div>
                    </div>
                </el-card>
            </div>
<!--            eChart 图-->
            <div style="margin-top: 23px;margin-left: 40px;">
                <el-card style="border: none;">
                    <div id="echart2" ref="echart2" style="width: 800px;height: 300px;">
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;


export default {
    data() {
        return {
            activeName: 'first',
            userTotal:null,
            projectTotal:null,
            loginTime:'',
            ArticleTotal:'',
            CategoryTotal:'',
            CommentTotal:'',
            AdminTotal:'',

            date:[],
            dateNum:[],

            Month:[],
            MonthNum:[],

            Year:[],
            YearNum:[],
            categoryArray:[],

        }
    },
    methods: {
        getAdminLoginTime(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/retlogintime',
                // URL 中的查询参数
                params: {
                    adminName:this.$cookie.get('adminName')
                }
            }).then((res)=>{
                that.loginTime=res.data;
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        getUserTotal(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: '/api/userNum',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                that.userTotal=res.data;
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        getProjectTotal(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                that.projectTotal=res.data;
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        getArticleTotal(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/countArticle',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                that.ArticleTotal=res.data;
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        getAdminTotal(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/countAdmin',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                that.AdminTotal=res.data;
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        getCommentTotal(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/countComment',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                that.CommentTotal=res.data;
            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        getCategoryTotal(){
            if (this.$cookie.get('adminName')){
                var that=this;
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/countCategory',
                    // URL 中的查询参数
                    params: {
                    }
                }).then((res)=>{
                    that.CategoryTotal=res.data;
                }).catch((error)=>{
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: error,
                        offset: 50
                    });
                })
            }else{
                return false;
            }

        },
        getProjectByTime(){
            if(this.$cookie.get('adminName')){
                var that=this;
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/retProjectByTime',
                }).then((res)=>{
                    that.date=res.data.Date;
                    that.Month=res.data.Month;
                    that.Year=res.data.Year;

                    that.eChart2(that.date,'echart2');

                }).catch((error)=>{
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: error,
                        offset: 50
                    });
                })
            }else {
                return false;
            }

        },
        eChart2(Date,id){
            var myChart = echarts.init(document.getElementById(id));

            var xData=[],yData=[];
            Date.map(function (a) {
                xData.push(a.date);
                yData.push(a.num);
            });
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [{
                    type: 'category',
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#999"
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    splitNumber: 4,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#DDD'
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#333"
                        },
                    },
                    nameTextStyle: {
                        color: "#999"
                    },
                    splitArea: {
                        show: false
                    }
                }],
                series: [{
                    name: '提交项目数量',
                    type: 'line',
                    data: yData,
                    lineStyle: {
                        normal: {
                            width: 8,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 0,
                                    color: '#A9F387' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#48D8BF' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(72,216,191, 0.3)',
                            shadowBlur: 10,
                            shadowOffsetY: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#fff',
                            borderWidth: 10,
                            /*shadowColor: 'rgba(72,216,191, 0.3)',
                            shadowBlur: 100,*/
                            borderColor: "#A9F387"
                        }
                    },
                    smooth: true
                }]
            };
            myChart.setOption(option);
            //图表大小变动从新渲染，动态自适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        myChart.resize({
              width: 900,
              height: 300
            });


        },

        getCategoryByProject(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/retProjectNumByCategory',
            }).then((res)=>{
                that.categoryArray=res.data;
                var xData=[],yData=[];
                that.categoryArray.map(function (a) {
                    xData.push(a.categoryName);
                    yData.push(a.num);
                });

                that.echart_Pie(xData,yData,'echart1');


            }).catch((error)=>{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: error,
                    offset: 50
                });
            })
        },
        echart_Pie(xData, yData, id) {
            var chartDom = document.getElementById(id);
            var myChart = echarts.init(chartDom);


            var dataName = xData;

            var dataName2 = xData;
            var value = yData
            var dataarr = []
            var max = value[0];
            var dataarr2 = []
            value.forEach(function (ele, index) {
                if (ele > max) {
                    max = ele;
                }
                dataarr.push({
                    value: ele,
                    name: dataName[index]
                })
                dataarr2.push({
                    value: ele,
                    name: dataName2[index]
                })
            })

            var option = {
                // backgroundColor: '#424956',
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",

                },
                legend: {

                    orient: 'vertical',
                    x: 'right',
                    y: 'middle',
                    itemWidth: 20,
                    itemGap: 10,
                    itemHeight: 14,
                    align: 'left',

                    data: dataName,
                    textStyle: {
                        color: '#00000',
                        fontSize: 12
                    }
                },
                series: [{
                    name: '统计',
                    type: 'pie',
                    radius: ['25%', '55%'],
                    center: ['50%', '50%'],
                    color: [
                        '#2CEDED',
                        '#7049F0',
                        '#B347FF',
                        '#E70E65',
                        '#FF714A',
                        '#F6B768',
                        '#B0DF5D',
                        '#FC7DBC',
                        '#0A9FFD'
                    ],

                    labelLine: {
                        normal: {
                            show: true,
                            length: 10,
                            length2: 24
                        }
                    },
                    data: dataarr
                }, {
                    name: '统计',
                    type: 'pie',
                    radius: ['25%', '55%'],
                    center: ['50%', '50%'],
                    color: [
                        'transparent',
                        'transparent',
                        'transparent',
                        'transparent',
                        'transparent',
                        'transparent',
                        'transparent',
                        'rgba(252,125,188,0.5)',
                        'transparent'
                    ],
                    label: {
                        normal: {
                            show: false
                        },

                    },
                    labelLine: {
                        normal: {
                            show: false,
                        }
                    },
                    data: dataarr2,
                    zlevel: 2
                }]
            };
            myChart.clear();
            option && myChart.setOption(option);
            //图表大小变动从新渲染，动态自适应
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            // myChart.resize({
            //   width: 449,
            //   height: 265
            // });
        },

    },
    //  初始化Echart

    mounted() {
            this.getUserTotal();
            this.getProjectTotal();
            this.getAdminLoginTime();
            this.getArticleTotal();
            this.getCommentTotal();
            this.getAdminTotal();
            this.getCategoryTotal();
            this.getProjectByTime();
            this.getCategoryByProject();


    }
}
</script>

<style scoped>

</style>