<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信年度聊天报告</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
    <style>
        body{
            display: flex;
            flex-direction: column;
            margin: 0;
            align-items: center;
        }
    </style>
</head>
<body>
<h1>{{my_nickname}}——{{ta_nickname}}</h1>
<div>
    <p class="mt-3">我们第一次聊天在</p>
    <p id="first_time" class="first-time">{{first_time}}</p>
    <p class="mt-3">距今已有</p>
    <div class="mt-3">
        <span id="t_d"></span>
        <span id="t_h"></span>
        <span id="t_m"></span>
        <span id="t_s"></span>
    </div>
    <div><br></div>
</div>
<div id="echarts-month_count" style="width: 800px; height: 600px;"></div>
<div>
    <h2>消息统计</h2>
    <div id="echarts-sender" style="width: 800px; height: 600px;"></div>
    <div id="echarts-types" style="width: 800px; height: 600px;"></div>
    <div id="echarts-weekday" style="width: 800px; height: 600px;"></div>
</div>
<div id="echarts-wordcloud" style="width: 800px; height: 800px;"></div>
<div id="echarts-calendar" style="width: 800px; height: 300px;"></div>


<script type="text/javascript"> function getRTime() {
    var tt = document.getElementById("first_time").innerText;
    var EndTime = new Date(tt);
    var NowTime = new Date();
    var t = NowTime.getTime()-EndTime.getTime();
    var d = Math.floor(t / 1000 / 60 / 60 / 24);
    var h = Math.floor(t / 1000 / 60 / 60 % 24);
    var m = Math.floor(t / 1000 / 60 % 60);
    var s = Math.floor(t / 1000 % 60);
    document.getElementById("t_d").innerHTML = d + " 天";
    document.getElementById("t_h").innerHTML = h + " 时";
    document.getElementById("t_m").innerHTML = m + " 分";
    document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);

</script>
<script>
    var wxid = '{{wxid}}';
    function month_count(time_range){
        const requestData = {
            wxid: wxid,
            time_range: time_range
        };
        fetch('/month_count',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(chartOptions => {
            // 在这里使用 ECharts 渲染图表
            var myChart = echarts.init(document.getElementById('echarts-month_count'));
            var option = chartOptions.chart_data;
            myChart.setOption(JSON.parse(option));
        });
    }
    function wordcloud(time_range){
        const requestData = {
            wxid: wxid,
            time_range: time_range
        };
        fetch('/wordcloud',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(chartOptions => {
            // 在这里使用 ECharts 渲染图表
            var myChart = echarts.init(document.getElementById('echarts-wordcloud'));
            var option = chartOptions.chart_data;
            myChart.setOption(JSON.parse(option));
        });
    }
    function calendar(time_range){
        const requestData = {
            wxid: wxid,
            time_range: time_range
        };
        fetch('/calendar',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(chartOptions => {
            // 在这里使用 ECharts 渲染图表
            var myChart = echarts.init(document.getElementById('echarts-calendar'));
            var option = chartOptions.chart_data;
            myChart.setOption(JSON.parse(option));
        });
    }
    function message_counter(time_range){
        const requestData = {
            wxid: wxid,
            time_range: time_range
        };
        fetch('/message_counter',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        })
        .then(response => response.json())
        .then(chartOptions => {
            // 在这里使用 ECharts 渲染图表
            var myChart = echarts.init(document.getElementById('echarts-sender'));
            var option = chartOptions.chart_data_sender;
            myChart.setOption(JSON.parse(option));
            var myChart1 = echarts.init(document.getElementById('echarts-types'));
            var option = chartOptions.chart_data_types;
            myChart1.setOption(JSON.parse(option));
            var myChart2 = echarts.init(document.getElementById('echarts-weekday'));
            var option = chartOptions.chart_data_weekday;
            myChart2.setOption(JSON.parse(option));
        });
    }
    var time_range=['1997-01-01 00:00:00','2035-01-01 00:00:00']
    message_counter(time_range);
    month_count(time_range);
    calendar(time_range);
    wordcloud(time_range);
</script>
</body>
</html>
