<!-- 用户 登录日志 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <h4 class="c-title">数据走势：</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form class="select-form" :inline="true" label-width="6em" @keyup.enter="state.p.pageNo = 1; f5();">
                <in-item name="时间范围：">
                    <el-date-picker class="sw-width" v-model="state.p.startTime" type="date" value-format="YYYY-MM-DD" @change="f5();" placeholder="开始"></el-date-picker>
                    &nbsp; - &nbsp;
                    <el-date-picker class="sw-width" v-model="state.p.endTime" type="date" value-format="YYYY-MM-DD" @change="f5();" placeholder="结束"></el-date-picker>
                    <el-radio-group v-model="state.kjDay" @change="initParam(state.kjDay); f5();" style="margin-left: 5px;">
                        <el-radio-button label="7">近7天</el-radio-button>
                        <el-radio-button label="30">近30天</el-radio-button>
                        <el-radio-button label="90">近90天</el-radio-button>
                        <el-radio-button :label="state.yearDayCount">近一年</el-radio-button>
                    </el-radio-group>
                    <span>&emsp;近&nbsp;</span>
                    <el-input v-model="state.kjDay" class="kj-input" type="number"></el-input>
                    <span>&nbsp;天&nbsp;&nbsp;</span>
                    <el-button class="btn-13" type="primary" @click="initParam(state.kjDay); f5();">确定</el-button>
                </in-item>
                <br>
                <in-item name="图表样式：">
                    <el-radio-group v-model="state.chartType" @change="f5Echarts();">
                        <el-radio-button label="line">折线图</el-radio-button>
                        <el-radio-button label="bar">柱状图</el-radio-button>
                        <el-radio-button label="scatter">散点图</el-radio-button>
                        <el-radio-button label="pictorialBar">象形柱图</el-radio-button>
                    </el-radio-group>
                    <span>&emsp;&emsp;显示刻度：&nbsp;</span>
                    <el-radio-group v-model="state.showKd" @change="f5Echarts();">
                        <el-radio-button :label="false">不显示</el-radio-button>
                        <el-radio-button :label="true">显示刻度</el-radio-button>
                    </el-radio-group>
                    <span>&emsp;折线类型：&nbsp;</span>
                    <el-radio-group v-model="state.lineType" @change="f5Echarts();">
                        <el-radio-button :label="true">曲线</el-radio-button>
                        <el-radio-button :label="false">直线</el-radio-button>
                    </el-radio-group>
                </in-item>
            </el-form>
            <!-- ------------- 图表 ------------- -->
            <div class="echarts-box">
                <div class="echarts-div" id="t-sta" ref="t-sta"></div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="console-plate">
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import * as echarts from "echarts";
import {useComStore} from "../../store/com";
const { proxy } = getCurrentInstance();

defineProps({
    param: {type: Object}
})

// ------------------ 查询条件 ------------------
const state = reactive({
    p: {   // 查询条件
        startTime: new Date(),
        endTime: new Date(),
        f: 2
    },
    yearDayCount: 0,    // 一年应该是多少天 
    kjDay: 30,	        // 时间差
    chartType: 'line',	// 图表类型 (bar, line)
    showKd: false,	    // 显示刻度 
    lineType: true,	    // 是否曲线 
    dateArray: [],	    // 日期数组 
    regCountArray: [],	// 注册数据 
    loginCountArray: [],// 登录数据 
})
let myChart = null;       // 图表对象 

onMounted(function (){
    // 计算从此刻至倒退一年前，相差多少天 
    state.yearDayCount = (new Date().getTime() - new Date().setFullYear(new Date().getFullYear() - 1)) / 86400000;
    // 初始化参数 
    initParam(state.kjDay);
    f5();
})

// ------------------ 查找数据 ------------------
const f5 = function() {
    let param = { // 查询参数  
        startTime: sa.forDate(state.p.startTime) + ' 00:00:00',
        endTime: sa.forDate(state.p.endTime) + ' 23:59:59',
        f: state.p.f
    };
    sa.ajax('/StaData/getRegLoginData', param, function(res) {
        const _dateArray = getDateArray();
        const _regCountArray = [];
        const _loginCountArray = [];
        for (let key of _dateArray) {
            _regCountArray.push(res.regData[key] || 0);
            _loginCountArray.push(res.loginData[key] || 0);
        }

        state.dateArray = _dateArray;
        state.regCountArray = _regCountArray;
        state.loginCountArray = _loginCountArray;

        f5Echarts();
    });
};

// 初始化参数 
const initParam = function(day) {
    state.p.startTime = sa.forDate(new Date().getTime() - 86400000 * (day - 1));
    state.p.endTime = sa.forDate(new Date().getTime());
};

// 获取date数组
const getDateArray = function() {
    // 初始化日期数组
    let startTime = new Date(sa.forDate(state.p.startTime) + ' 00:00:00').getTime();
    let endTime = new Date(state.p.endTime).getTime();
    let dateArray = [];
    for (let i = startTime; i < endTime; i += 86400000) {
        dateArray.push(sa.forDate(i, 'MM-dd'));
    }
    return dateArray;
};

// 刷新图表：日期、注册数据、登录数据 
const f5Echarts = function() {
    // ===========================================  定义数据
    var x_name = '时间'; // x轴名称
    var y_name = "活跃"; // y轴名称
    var legendArray = ['登录数量', '注册数量'];		// 所有显示的图例 
    let _chartType = state.chartType;
    let _dateArray = state.dateArray;
    let _loginCountArray = state.loginCountArray;
    let _lineType = state.lineType;
    let _showKd = state.showKd;
    let _regCountArray = state.regCountArray;

    // console.log('-----', dateArray);
    // console.log('-----', countArray);

    // ===========================================  开始渲染

    if(myChart === null) {
        myChart = echarts.init(proxy.$refs['t-sta']);
    }

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            show: true,
            top: 0,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        grid:{x: 50, y: 50, x2: 60, y2: 50},	//设置canvas内部表格的内距
        legend: {
            data: legendArray
        },
        xAxis: {
            name: x_name,
            type: 'category',
            boundaryGap : ['bar', 'pictorialBar'].indexOf(_chartType) !== -1, // 是否紧缩边界位置
            // axisLabel: {
            // 	'interval': 0
            // }, //强制不缩略x轴刻度,
            data: _dateArray
        },
        yAxis: {
            name: y_name,
            type: 'value'
        },
        series: [
            {
                name: '登录数量',
                type: _chartType,
                data: _loginCountArray,
                smooth: _lineType,	// 曲线形式
                label: {
                    show: _showKd,
                    position: 'top',
                    formatter: '{c}'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   //改变区域颜色
                        {offset: 0, color: 'rgba(70, 128, 255, 0.6)'},
                        {offset: 1, color: 'rgba(70, 128, 255, 0.1)'}
                    ])
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   //改变折线点的颜色
                        {offset: 0, color: 'rgba(70, 128, 255, 0.8)'},
                        {offset: 1, color: 'rgba(70, 128, 255, 0.5)'}
                    ])
                },
            },
            {
                name: '注册数量',
                type: _chartType,
                data: _regCountArray,
                smooth: _lineType,	// 曲线形式
                label: {
                    show: _showKd,
                    position: 'top',
                    formatter: '{c}'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  //改变区域颜色
                        {offset: 0, color: 'rgba(0, 128, 0, 0.6)'},
                        {offset: 1, color: 'rgba(0, 128, 0, 0.1)'}
                    ])
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [   //改变折线点的颜色
                        {offset: 0, color: 'rgba(0, 128, 0, 0.8)'},
                        {offset: 1, color: 'rgba(0, 128, 0, 0.5)'}
                    ])
                },
            },
        ]
    };
    myChart.setOption(option);
    // window.myChart = myChart;
    useComStore().pushResizeCallback('console-plate', function (){
        myChart.resize();
    })
}

</script>

<style scoped lang="scss">
.echarts-box{height: 62vh; padding: 70px 0 10px;}
.echarts-div{height: 100%;}
.kj-input{width: 70px !important; margin: 0 3px;}
.kj-input .el-input__wrapper{padding: 5px; text-align: center;}

// 日期输入框 跟随盒子宽度
.vue-box :deep(.el-date-editor){width: 200px !important;}

</style>
