<template>
    <div id="loggraph_new_edit">
        <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> -->

            <!-- <el-switch
               v-model="conditionNum.monthNum"
                @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_new()" style="font-size: 20px;color: cyan;margin-top: 8px;" title="导出Excel"></i>
            </div>
        </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 { get,fileDownload} from '../../util/http_util';
export default {
    data(){
        return{
            img:img,
            myChart_new: null,
            myChart_new_peoson: null,
            data: {x:[] ,y:[[]]},
            conditionNum: {},
            echartsList: [
                {
                    id: 'new_num',
                    title: '新闻编辑各人员统计',
                },
                // {
                //     id: 'new_num_person',
                //     title: '新闻编辑总量统计',
                // }
            ]
        }
    },
    props:{
      condition:{
        "type": [Object]
      }
    },
    methods:{
        export_new(){
            let tmp ='';
            if(this.condition.startTime!=null){
                tmp = tmp+'?startTime='+this.condition.startTime+'&endTime='+this.condition.endTime;
            }
            fileDownload("api/rest/sentiment/exportSentimentNewsStatus" + tmp, '新闻编辑次数统计', 'xls'); 
        },
        search(){
            let tmp ='';
            if(this.condition.startTime!=null){
                tmp = tmp+'?startTime='+this.condition.startTime+'&endTime='+this.condition.endTime;
            }
            // fileDownload("api/rest/sentiment/exportSentimentNewsStatus" + tmp, '新闻编辑统计', 'xls'); 
            get('api/rest/sentiment/countSentimentNewsStatus'+tmp)
                .then(res=>{
                    let arr = this.arr_recombination(res);
                    this.createEcharts_new(arr);
                    // this.createEcharts__new_peoson(arr);
                })
                .catch(err=>{
                this.$message.warning(err.message);
                });
            // countUserPerformance(this.currentPage, this.everySize,'NEWS', tmp)
            // .then(res=>{
            //     res.reverse();
            //     res.forEach((item)=>{
                    
            //     })
            //     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_new(arrs);
            //     this.createEcharts__new_peoson(arrs_peoson);
            // })
            // .catch(err=>{
            //    this.$message.warning(err.message);
            // });
        },
        change(){
            this.search();
        },
        arr_recombination(list){
            let fieldList = [],lists = [];
            list.forEach((e)=>{
                fieldList.push(e.status);
                if(e.num!=undefined){
                    if(e.num.length >0 ){
                        e.num.forEach((c)=>{
                            if(c.account!=undefined&&c.account!=null&&c.account!='')
                            lists.push(c.account)
                        })
                    }
                }
            })
            //数组去重
            lists = lists.filter((e,i,self)=>{
                return self.indexOf(e)==i
            });
            lists = lists.slice(-15);

            fieldList = fieldList.filter((e,i,self)=>{
                return self.indexOf(e)==i
            });
            let arrs ={};
            arrs.zlist = lists;
            arrs.ylist = [];
            arrs.xlist = [];
            if(list.length>0){
                list.forEach((item)=>{
                    let arr_li = {};
                    let a_num = 0;
                    if(item.status=='AUDIT'){
                        arr_li = { product: '审核'}
                    }else if(item.status=='COLLATE'){
                        arr_li = { product: '校验'}
                    }else if(item.status=='EDIT'){
                        arr_li = { product: '编辑'}
                    }
                    item.num.forEach((e)=>{
                        if(e.account!=null){
                            arr_li[e.account] = e.num;
                            a_num = a_num+e.num;
                        }
                    });
                    arrs.xlist.push(a_num);
                    arrs.ylist.push(arr_li);
                })
            }
            let item = arrs.ylist.splice(0, 1);		// arr删除2，把2给item
            arrs.ylist.splice(2, 0, item[0]);
            let item1 = arrs.xlist.splice(0, 1);		// arr删除2，把2给item
            arrs.xlist.splice(2, 0, item1[0]);
            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_new(data) {
            let li =[];
            if(data.zlist.length>0){
                data.zlist.forEach(e=>{
                    li.push({ type: 'bar' })
                });
            }
            let list = data.zlist;
            list.unshift('product');
            let  option = {
                    backgroundColor: "#1d2d46",
                    tooltip: {},
                    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_new.clear();
            this.myChart_new.setOption(option);
        },
        createEcharts__new_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: ['编辑','校验','审核'],
                        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: 1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    series: [
                        {
                            name: '新闻数量',
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            data: data.xlist,
                            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_new_peoson.clear();
            this.myChart_new_peoson.setOption(option);
        },
    },
    computed:{
        con(){
            return{username: this.searchText}
        }
    },
    mounted(){
        this.myChart_new = echarts.init(document.getElementById("new_num"));
        // this.myChart_new_peoson = echarts.init(document.getElementById("new_num_person"));
        // this.search();
    }
}
</script>
<style lang="scss">
.el-switch__label{
    margin-top: 10px;
}
#loggraph_new_edit{
    height: 100%;
    width: 100%;
    #field{
        .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% - 40px);
            height: calc(100% - 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>