<template>

<div>

<div>
    <div class="block">
        <span class="demonstration">筛选日区间：</span>
        <el-date-picker
                v-model="orderCenterValue"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
        <el-button type="primary" @click="dateBtnClick"> &nbsp 查询</el-button>
    </div>
    <br>
    <div id="main" :style="{width: '1500px', height: '550px'}"></div>
</div>

    <br>

<div>
    <div class="block">
        <span class="demonstration">筛选日区间：</span>
        <el-date-picker
                v-model="loginDateValue"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
        <el-button type="primary" @click="loginBtnClick">查询</el-button>
    </div>
    <br>
    <div id="main44" :style="{width: '1500px', height: '500px'}"></div>
</div>

</div>

</template>

<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';
    import moment from 'moment'//导入文件

    export default {
        name: 'Echarts',
        data(){
            return{
                msg: 'Welcome to Your Vue.js App',
                loginInfoCollections:[],
                orderDate:[],
                orderAllPrice:[],
                orderAvgPrice:[],
                loginDateXX:[],
                loginSuccessInfoYY:[],
                loginErrorInfoYY:[],
                xZhou:[],
                yZhou:[],
                avgPriceY:[],
                loginX:[],
                loginSuccessY:[],
                loginErrorY:[],
                orderCenterValue: '',
                loginDateValue:''
            };
        },
        created(){
            this.getOrderCenterInfo();
            this.getLoginInfo();
        },
        mounted(){
            // 这个定时任务其实不想用来着，但是不用的话 数据无法正常显示
            // 等ecahrs图标正确显示完，在问下阔生这个问题
            // 定时任务
            let that = this;
            setTimeout(function () {
                that.myEcharts();
                that.myLoginEchars();
            },300)

        },
        methods:{
            //获取数据
            getOrderCenterInfo(){
                //先获取本月的开始时间戳，和结束时间戳，getDate-天数
                let orderYear1=new Date().getFullYear();
                let orderMonth1=(new Date().getMonth())+1;
                let orderDate1=new Date().getDate();

                axios.post('https://mz.tshe.cn/restauantCH/user/orderCenter/groupFind')
                    .then(res=>{
                        let data1=[];
                        let data2=[];
                        for(let i=1;i<=orderDate1;i++){
                                data1.push({
                                date:`${orderYear1}-${orderMonth1}-${i}`,
                                priceAll:Number(0),
                                priceAvg:Number(0)})
                        }
                        res.data.forEach(item=>{
                            data2.push({date:`${item._id.orderYear}-${item._id.orderMonth}-${item._id.orderDate}`,
                                priceAll:Number((item.totalPriceAll).toFixed(0)),
                                priceAvg:Number((item.totalPriceAll/item.totalNumAll).toFixed(0))})
                        })
                        //数据的处理
                        data1.map((item,index)=>{
                            data2.map(items=>{
                                if(items.date===item.date){
                                    data1[index]=items
                                }
                            })
                        })
                        //将数组拆分开，放到ecahrs里
                        const dateArr=[];
                        data1.forEach(item=>{
                            dateArr.push(item.date)
                            this.orderAllPrice.push(item.priceAll)
                            this.orderAvgPrice.push(item.priceAvg)
                        })
                        //转化日期格式
                        dateArr.forEach(item=>{
                            this.orderDate.push(moment(item,'YY-MM-DD').format("MM-DD"))
                        })
                    })
            },

            getLoginInfo(){
                let loginYear1=new Date().getFullYear();
                let loginMonth1=(new Date().getMonth())+1;
                let loginDate1=new Date().getDate();

                axios.post('https://mz.tshe.cn/restauantCH/login/groupFind')
                    .then(res=>{
                        const data5=[];
                        const data6=[];
                        for(let i=1;i<=loginDate1;i++){
                                data5.push({
                                date:`${loginYear1}-${loginMonth1}-${i}`,
                                loginSuccessInfo:Number(0),
                                loginErrorInfo:Number(0)})
                        }
                        res.data.forEach(item=>{
                            data6.push({
                                date: `${item._id.loginYear}-${item._id.loginMonth}-${item._id.loginDate}`,
                                status:Number(item._id.loginInfo),
                                count:Number(item.count),
                            })
                        })
                        data5.map((item,index)=>{
                            data6.map(items=>{
                                if(item.date===items.date){
                                    if(items.status===1){
                                        data5[index].loginSuccessInfo=items.count;
                                    }
                                    else if(items.status===0){
                                        data5[index].loginErrorInfo=items.count;
                                    }
                                }
                            })
                        })
                        const loginDateX=[];
                        data5.forEach(item=>{
                            loginDateX.push(item.date);
                            this.loginSuccessInfoYY.push(item.loginSuccessInfo);
                            this.loginErrorInfoYY.push(item.loginErrorInfo);
                        })
                        loginDateX.forEach(item=>{
                            this.loginDateXX.push(moment(item,'YY-MM-DD').format('MM-DD'));
                        })
                    })
            },
            myEcharts(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {},
                    legend: {
                        data:['总金额','平均金额']
                    },
                    xAxis:
                        {
                        name:'日期(day)',
                        type : 'category',
                        axisTick: {show:false},
                        data: this.orderDate
                     },
                    yAxis: {
                        name: '金额',
                    },
                    series: [
                        {
                            name:'总金额',
                            type: 'bar',//图形类型
                            data: this.orderAllPrice,
                            color:'#CC0066'
                        },
                        {
                            name:'平均金额',
                            type: 'bar',//图形类型
                            data: this.orderAvgPrice,
                            color:'#009999'
                        }
                             ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            myLoginEchars(){
                let myLoginEchars = this.$echarts.init(document.getElementById('main44'));
                let option={
                    title : {
                        text: '登录状态统计',
                        subtext: '成功/失败'
                    },
                    tooltip : {//提示工具
                        trigger: 'axis'//方式
                    },
                    legend: {
                        data:['成功','失败']
                    },
                    //工具栏。
                    //内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                    toolbox: {
                        show : true,
                        //各工具配置项。
                        feature : {
                            //'line'（切换为折线图）, 'bar'（切换为柱状图）,
                            //'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
                            magicType : {show: true, type: ['line', 'bar' , 'stack' ,'tiled']},

                            //保存为图片。
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            name:'日期(day)',
                            type : 'category',
                            data : this.loginDateXX
                        }
                    ],
                    yAxis : [
                        {
                            name: '次数',
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'成功',
                            type:'bar',
                            data:this.loginSuccessInfoYY,
                            color:'#CC0066'
                        },
                        {
                            name:'失败',
                            type:'bar',
                            data:this.loginErrorInfoYY,
                            color:'#009999'
                        },
                    ]
                }
                myLoginEchars.setOption(option);
            },
            dateBtnClick(){
                const timesTempDay=1000 * 60 * 60 * 24;//一天的的时间戳
                const startTime=this.orderCenterValue[0].getTime();//起始日期时间戳
                const endTime = this.orderCenterValue[1].getTime();//结束日期时间戳
                const timer=endTime - startTime;
                const count=Math.ceil(timer / timesTempDay);//总计多少条

                if(count<=32){
                    axios.post('https://mz.tshe.cn/restauantCH/user/orderCenter/groupFind',{
                        startTime:startTime,
                        endTime:endTime
                    })
                        .then(res=>{

                            let getMounth = (new Date(startTime).getMonth()) + 1;
                            let getDay = (new Date(startTime).getDate());

                            let data3 = [];
                            let data4 = [];

                            for (let i = 0; i < count; i++) {
                                const selectYear = (new Date(startTime + timesTempDay * i)).getFullYear();
                                const selectMonth = ((new Date(startTime + timesTempDay * i)).getMonth()) + 1
                                const selectDate = (new Date(startTime + timesTempDay * i)).getDate()
                                data3.push({
                                    date:`${selectYear}-${selectMonth}-${selectDate}`,
                                    priceAll:0,
                                    priceAvg:0});
                            }
                            res.data.forEach(item=>{
                                data4.push({
                                    date:`${item._id.orderYear}-${item._id.orderMonth}-${item._id.orderDate}`,
                                    priceAll:Number((item.totalPriceAll).toFixed(0)),
                                    priceAvg:Number((item.totalPriceAll/item.totalNumAll).toFixed(0))
                                })
                            })
                            //数据的处理
                            data3.map((item,index)=>{
                                data4.map(items=>{
                                    if(items.date===item.date){
                                        data3[index]=items
                                    }
                                })
                            })
                            // //将数组拆分开，放到ecahrs里
                            const dateArr=[];
                            const selectAllPrice=[];
                            const selectAvgPrice=[];
                            const selectDate=[];
                            data3.forEach(item=>{
                                dateArr.push(item.date)
                                selectAllPrice.push(item.priceAll)
                                selectAvgPrice.push(item.priceAvg)
                            })
                            //转化日期格式
                            dateArr.forEach(item=>{
                                selectDate.push(moment(item,'YY-MM-DD').format("MM-DD"))
                            })
                            this.orderDate=selectDate;
                            this.orderAllPrice=selectAllPrice;
                            this.orderAvgPrice=selectAvgPrice;
                            this.myEcharts();
                        })
                }
                else{
                    this.$message.info('请选择的日期小于31天')
                }
                },
            loginBtnClick(){
                const timesTempDay=1000 * 60 * 60 * 24;//一天的的时间戳
                const startTime=this.loginDateValue[0].getTime();//起始日期时间戳
                const endTime = this.loginDateValue[1].getTime();//结束日期时间戳
                const timer=endTime - startTime;
                const count=Math.ceil(timer / timesTempDay);//总计多少条

                if(count<=32){
                    axios.post('https://mz.tshe.cn/restauantCH/login/groupFind',{
                        startTime:startTime,
                        endTime:endTime
                    })
                        .then(res=>{
                            let getMounth=(new Date(startTime).getMonth())+1;//startTime获取的月份
                            let getDay=(new Date(startTime).getDate());//endTime获取的Date日期
                            const data7=[];
                            const data8=[];

                            for(let i=0;i<count;i++){
                                const ceshiYear=(new Date(startTime+timesTempDay*i)).getFullYear()
                                const ceshiMonth=( (new Date(startTime+timesTempDay*i)).getMonth() ) +1
                                const ceshiDate=( new Date(startTime+timesTempDay*i) ).getDate()
                                data7.push({
                                    date:`${ceshiYear}-${ceshiMonth}-${ceshiDate}`,
                                    selectLoginSuccessInfo:Number(0),
                                    selectLoginErrorInfo:Number(0)
                                });
                            }
                            res.data.forEach(item=>{
                                data8.push({
                                    date:`${item._id.loginYear}-${item._id.loginMonth}-${item._id.loginDate}`,
                                    status:Number(item._id.loginInfo),
                                    count:Number(item.count)
                                })
                            })
                            //处理数据
                            data7.map((item,index)=>{
                                data8.map(items=>{
                                    if(items.date===item.date){
                                        if(items.status===1){
                                            data7[index].selectLoginSuccessInfo=items.count;
                                        }
                                        else if(items.status===0){
                                            data7[index].selectLoginErrorInfo=items.count;
                                        }
                                    }
                                })
                            });
                            //处理X轴日期格式
                            const loginDateX=[];
                            const loginSuccessInfo=[];
                            const loginErrorInfo=[];
                            data7.forEach(item=>{
                                loginDateX.push(item.date);
                                loginSuccessInfo.push(item.selectLoginSuccessInfo);
                                loginErrorInfo.push(item.selectLoginErrorInfo);
                            })
                            const loginDateResult=[];
                            loginDateX.forEach(item=>{
                                loginDateResult.push(moment(item,'YY-MM-DD').format(('MM-DD')));
                            })
                            //将处理好的数据进行显示
                            this.loginDateXX=loginDateResult;
                            this.loginSuccessInfoYY=loginSuccessInfo;
                            this.loginErrorInfoYY=loginErrorInfo;
                            this.myLoginEchars();
                        })
                }
                else{
                    this.$message.info('请选择的日期小于31天')
                }
            },
        }
    }

</script>
