<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付统计</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/js/rem.js}"></script>
    <script th:src="@{/js/echarts/echarts.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/rules.js}"></script>
    <script th:src="@{/js/echarts/echarts.min.js}"></script>

    <style>
        .layui-layout-body{background:#f2f2f2;}
        #boxDiv{margin: 8px;position:absolute;width: 100%;height:calc(100% - 16px);display: flex;background: #FFFFFF;flex-direction: column;}
        .searchDiv{height: 60px;}
        .button-box{display: flex;height: 60px; align-items:center;width: 50%;justify-content:space-around;}
        .content{display: flex;width: 100%;background: #FFFFFF;flex-grow: 1;flex-direction: column;}
        .title-div{height: 60px;line-height: 60px;padding-left: 20px;font-weight: bold;color:#626A7D;}
        .echarts-div{flex-grow: 1;height:0px;}
        .line-div{width: 100%;padding: .5px;background: #F3F5F6;}
        .charts{width:100%;height: 100%;}
    </style>
</head>
<body class="layui-layout-body">
<div id="boxDiv" style="">
    <div class="searchDiv button-box">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="setChartsDate(1)">最近7天</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="setChartsDate(2)">最近30天</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="setChartsDate(3)">上一季度</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="showSelectTime()">自定义</button>
    </div>
    <div class="line-div"></div>
    <div class="content">
        <div class="title-div">支付类别交易笔数</div>
        <div class="line-div"></div>
        <div class="echarts-div"><div id="charts1" class="charts"></div></div>
        <div class="line-div"></div>
        <div class="title-div">支付类别交易金额</div>
        <div class="line-div"></div>
        <div class="echarts-div"><div id="charts2" class="charts"></div></div>
    </div>
</div>

<div id="selectDate" style="display: none;">
</div>
</body>
<script th:inline="javascript">

    let layer,laydate,table,tree,form;

    layui.use(['element','table','laydate','layer','form','tree'], function() {
        layer = layui.layer;
        table = layui.table;
        laydate = layui.laydate;
        tree = layui.tree;
        form = layui.form;

        //计算显示时间
        let startTime= getBeforeDate(31);
        let endTime= getBeforeDate(1);

        //时间控件
        laydate.render({
            elem: '#selectDate'
            ,range: '~'
            ,type: 'date'
            ,position: 'static'
            ,value: startTime+' ~ '+endTime
            ,btns: ['confirm']
            ,done:function (val){
                layer.close(selectDateIndex);

                let time = val.split("~");
                let startTime=time[0].trim();
                let endTime=time[1].trim();
                findChartsData(startTime,endTime);
            }
        });

        setChartsDate(1);
    });

    //选择时间
    let selectDateIndex;
    function showSelectTime(){
        selectDateIndex=layer.open({
            type : 1,
            title : "选择时间",
            shade : 0,
            area : [ '546px', '375px' ],
            offset : 'auto',
            content : $("#selectDate"),
            btnAlign : 'c',
            yes : function(index, layero) {
            },
            btn2 : function() {}
        });
    }

    //设置查询日期
    function setChartsDate(num){
        let startTime;
        let endTime;
        if (num===1){
            startTime = getBeforeDate(7);
            endTime = getBeforeDate(1);
        }else if (num===2){
            startTime=getBeforeDate(30);
            endTime = getBeforeDate(1);
        }else if (num===3){
            let val=  getLastQuarter();
            let time = val.split("~");
            startTime=time[0].trim();
            endTime=time[1].trim();
        }

        findChartsData(startTime,endTime);
    }

    //查询图表数据
    function findChartsData(startTime,endTime){
        let url="/paymentStatistics/findpaymentStatisticsData";
        let param={};
        param.startTime=startTime;
        param.endTime=endTime;

        AjaxPostJson(url,param,function (rulData){
            if(rulData.errCode==='0'){
                showCharts(rulData);
            }
        });

    }

    function showCharts(data){
        let resultNumList=data.resultNumList;
        let allNum=[];
        for (let i = 0; i < resultNumList.length; i++) {

            let newObj = resultNumList[i];
            let countNum=newObj.data;
            for (let j = 0; j < countNum.length; j++) {
                if (allNum[j]){
                    allNum[j]=(Number(allNum[j])+Number(countNum[j])).toFixed(0);
                }else{
                    allNum[j]=Number(countNum[j]);
                }
            }
            resultNumList[i].type='line';
        }

        let seriesDate=[];
        seriesDate.push({name:"全部",data:allNum,type:"line"});
        seriesDate=seriesDate.concat(resultNumList);

        let legendData=seriesDate.map(obj=>{
            return obj.name;
        })

        let betweenDate=data.betweenDate;

        let option = {
            grid: {
                top: '40px',
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legendData
            },
            xAxis: {
                type: 'category',
                data: betweenDate
            },
            yAxis: {
                name: name,
                type: 'value'
            },
            series: seriesDate
        };
        let myChart = echarts.init(document.getElementById('charts1'));
        myChart.setOption(option);


        let resultMoneyList=data.resultMoneyList;
        let allNum2=[];
        for (let i = 0; i < resultMoneyList.length; i++) {

            let newObj = resultMoneyList[i];
            let countNum=newObj.data;
            for (let j = 0; j < countNum.length; j++) {
                if (allNum2[j]){
                    allNum2[j]=(Number(allNum2[j])+Number(countNum[j])).toFixed(2);
                }else{
                    allNum2[j]=Number(countNum[j]);
                }
            }
            resultMoneyList[i].type='line';
        }

        let seriesDate2=[];
        seriesDate2.push({name:"全部",data:allNum2,type:"line"});
        seriesDate2=seriesDate2.concat(resultMoneyList);

        let legendData2=seriesDate2.map(obj=>{
            return obj.name;
        })

        let option2 = {
            grid: {
                top: '40px',
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legendData2
            },
            xAxis: {
                type: 'category',
                data: betweenDate
            },
            yAxis: {
                name: name,
                type: 'value'
            },
            series: seriesDate2
        };


        let myChart2 = echarts.init(document.getElementById('charts2'));
        myChart2.setOption(option2);
    }


</script>
</html>