<template>
    <div id="loggraph">
        <div id="field">
            <el-switch
               v-model="conditionNum.dayNum"
                @change="change(conditionNum.dayNum)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="按天"
                inactive-text="按月"
                >
            </el-switch>
            <div class="button-search">
                <i class="el-icon-download" @click="export_file()" style="font-size: 20px;color: cyan;margin-top: 8px;" title="导出Excel"></i>
            </div>
            <!-- <el-switch
               v-model="conditionNum.monthNum"
                @change="change(conditionNum.dayNum)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="按月"
                inactive-text=""
                >
            </el-switch> -->
        </div>
        
        <div class="chart-div">
            <div class="myEcharts" v-for="item in echartsList">
                <div class="myEcharts-title">
                    <img :src="img" alt="">
                    <div v-text="item.title"></div>
                </div>
                <div :id="item.id" class="everyCharts"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import img from '../../assets/img/yqjc/68.png';
import{countUserPerformance} from "../../api/user";
import {fileDownload1} from '../../util/http_util';
export default {
    data(){
        return{
            img:img,
            myChart: null,
            myChart_peoson: null,
            data: {x:[] ,y:[[]]},
            conditionNum: {dayNum:false, accountNum: true},
            echartsList: [
                {
                    id: 'file_num',
                    title: '文件上传各人员统计',
                },
                {
                    id: 'file_num_person',
                    title: '文件上传总量统计',
                },
            ]
        }
    },
    props:{
      condition:{
        "type": [Object]
      }
    },
    methods:{
        export_file(){
            this.conditionNum.monthNum = !this.conditionNum.dayNum;
            let tmp = Object.assign(this.conditionNum, this.condition);
            fileDownload1("api/rest/user/exportUserPerformance?logType=LITERATURE",tmp); 
        },
        search(){
            this.conditionNum.monthNum = !this.conditionNum.dayNum;
            let tmp = Object.assign(this.conditionNum, this.condition);
            countUserPerformance(this.currentPage, this.everySize,'LITERATURE', tmp)
            .then(res=>{
                res.reverse();
                let arr = this.groupArr(res,'accountNum');
                let arrs = this.arr_recombination(res,arr,this.conditionNum.monthNum?'monthNum':'dayNum');
                let arrs_peoson = this.arr_recombination_peoson(res,arr,this.conditionNum.monthNum?'monthNum':'dayNum');
                this.createEcharts(arrs);
                this.createEcharts_peoson(arrs_peoson);
            })
            .catch(err=>{
               this.$message.warning(err.message);
            });
        },
        change(){
            this.search();
        },
        arr_recombination(list,arr,dayOrmonth){
            let fieldList = [],lists = [];
            list.map((e)=>{
                fieldList.push(e[dayOrmonth])
                lists.push(e.accountNum);
            })
            //数组去重
            fieldList = fieldList.filter((e,i,self)=>{
                return self.indexOf(e)==i
            });
            if(dayOrmonth=='monthNum'){
                fieldList = fieldList.slice(-5);
            }else{
                fieldList = fieldList.slice(-10);
            }
            lists = lists.filter((e,i,self)=>{
                return self.indexOf(e)==i
            });
            let arrs = {};
            arrs.zlist = lists;
            arrs.xlist = fieldList;
            arrs.ylist = [];
            arr.map((e)=>{
                fieldList.forEach((item)=>{
                    arrs.ylist.push(
                        {
                            name:e.list[0].accountNum,
                            dayOrmonth: item,
                            value:0
                        }
                    )
                })
                e.list.map((c)=>{
                    arrs.ylist.forEach((item,index)=>{
                        if(item.dayOrmonth==c[dayOrmonth]&&c.accountNum==item.name){
                            item.value = c.num;
                        }
                    })
                })
            })
            let li = [];
            arrs.xlist.forEach((items)=>{
                let lis = {product:''};
                arrs.ylist.forEach((item)=>{
                    if(item.dayOrmonth == items){
                        lis.product = items
                        lis[item.name] = item.value;
                    }
                })
                li.push(lis);
            })
            arrs.ylist = li;
            return arrs
        },
        arr_recombination_peoson(list,arr,dayOrmonth){
            let fieldList = [],lists = [];
            list.map((e)=>{
                fieldList.push(e[dayOrmonth])
                lists.push(e.accountNum);
            })
            //数组去重
            fieldList = fieldList.filter((e,i,self)=>{
                return self.indexOf(e)==i
            });
            if(dayOrmonth=='monthNum'){
                fieldList = fieldList.slice(-5);
            }else{
                fieldList = fieldList.slice(-10);
            }
            lists = lists.filter((e,i,self)=>{
                return self.indexOf(e)==i
            });
            let arrs = {};
            arrs.zlist = lists.slice(0,15);
            arrs.xlist = fieldList;
            arrs.ylist = [];
            arr.map((e)=>{
                fieldList.forEach((item)=>{
                    arrs.ylist.push(
                        {
                            name:e.list[0].accountNum,
                            dayOrmonth: item,
                            value:0
                        }
                    )
                })
                e.list.map((c)=>{
                    arrs.ylist.forEach((item,index)=>{
                        if(item.dayOrmonth==c[dayOrmonth]&&c.accountNum==item.name){
                            item.value = c.num;
                        }
                    })
                })
            })
            let li = [];
            arrs.xlist.forEach((items)=>{
                let lis = 0;
                arrs.ylist.forEach((item)=>{
                    if(item.dayOrmonth == items){
                        lis = lis + item.value;
                    }
                })
                li.push(lis);
            })
            arrs.ylist = li;
            return arrs
        },
        groupArr(list,field){
            var fieldList = [],att=[];
            list.map((e)=>{
                fieldList.push(e[field])
            })
            //数组去重
            fieldList = fieldList.filter((e,i,self)=>{
                return self.indexOf(e)==i
            })
            for(var j=0;j<fieldList.length;j++){
                //过滤出匹配到的数据
                var arr = list.filter((e)=>{
                    return e[field]==fieldList[j];
                })
                att.push({
                    list:arr
                })
            }
            return att;
        },
        createEcharts(data) {
            let li =[];
            data.zlist.forEach(e=>{
                li.push({ type: 'bar' })
            });
            let list = data.zlist;
            list.unshift('product');
            let  option = {
                    backgroundColor: "#1d2d46",
                    tooltip: {
                        trigger: 'axis'
                    },
                    dataset: {
                        dimensions: list,
                        source:  data.ylist
                    },
                    legend: {
                        data: data.zlist,
                        textStyle: {
                            color: '#fft'
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '5%',
                        top: '18%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category', 
                        axisLabel: {
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#127186',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '上传数量',
                        nameTextStyle:{
                            color:"white", 
                            fontSize:12,  
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#127186',
                                width: 5,//这里是为了突出显示加上的
                            }
                        }
                    },
                    series: li
            }; 
            this.myChart.clear();
            this.myChart.setOption(option);
        },
        createEcharts_peoson(data) {
            let  option = {
                    backgroundColor: "#1d2d46",
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['文件'],
                        textStyle: {
                            color: '#fft'
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '5%',
                        top: '18%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.xlist,
                        axisLabel: {
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#127186',
                                width: 1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '上传数量',
                        nameTextStyle:{
                            color:"white", 
                            fontSize:12,  
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#127186',
                                width: 5,//这里是为了突出显示加上的
                            }
                        }
                    },
                    series: [
                        {
                            name: '文件',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            data: data.ylist,
                            lineStyle: {
                                width: 0
                            },
                            showSymbol: false,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {
                                opacity: 0.8,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(38, 220, 255, 0.73)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(0, 131, 255)'
                                }])
                            },
                            emphasis: {
                                focus: 'series'
                            },
                        },
                    ]
            }; 
            this.myChart_peoson.clear();
            this.myChart_peoson.setOption(option);
        },
    },
    computed:{
        con(){
            return{username: this.searchText}
        }
    },
    mounted(){
        this.myChart = echarts.init(document.getElementById("file_num"));
        this.myChart_peoson = echarts.init(document.getElementById("file_num_person"));
        this.search();
    }
}
</script>
<style lang="scss">
.el-switch__label{
    margin-top: 10px;
}
#loggraph{
    height: 100%;
    width: 100%;
    #field{
        .el-switch{
            height: 33px;
            float: left;
        }
        .button-search {
            // width: 110px;
            height: 30px;
            line-height: 30px;
            float: left;
            margin-left: 20px;
            text-align: center;
            cursor: pointer;
            // background-image: url(../../assets/img/yqjc/40.png);
            // background-repeat: no-repeat;
            // background-size: 100% 100%;
            font-size: 13px;
        }
    }
    .chart-div{
        height: 100%;
        width: 100%;
        .myEcharts {
            width: calc(100% - 40px);
            height: calc(50% - 60px);
            float: left;
            border: 1px solid #225270;
            box-shadow: 0px 0px 11px #314e7c;
            // background-image: url(../../assets/img/yqjc/67.png);
            // background-size: 100% 100%;
            margin: 10px 20px;
            .myEcharts-title {
                width: 24%;
                height: 30px;
                line-height: 30px;
                position: relative;
                left: calc(46%);
                top: 6px;
                img {
                    width: 30px;
                    height: 30px;
                    float: left;
                }
                div {
                    float: left;
                    font-size: 13px;
                    font-weight: 500;
                }
            }
            .everyCharts {
                width: 96%;
                height: calc(100% - 30px);
                margin-left: 2%;
            }
        }
    }

}
</style>