'use strict';
const axios = require('axios');
const fs = require('fs');
const path = require('path');
const render = require('./render');

exports.main_handler = async (event, context, callback) => {
  // 1. 接受链接上的query参数api，用于判断是输出html，还是输出数据
  let api = event.queryString.api || false;

  // 2. 请求疫情数据
  let result = await axios.get(
    `https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5`
  );

  // 3. 中国地图数据
  let china_map = JSON.stringify(require('./china.json'));

  // 4. 解析并渲染 html 页面
  let html = fs.readFileSync(path.resolve(__dirname, './index.html'), {
    encoding: 'utf-8'
  });
  html = render(html, { disease_data: result.data.data, china_map });

  if (!api) {
    return {
      isBase64Encoded: false,
      statusCode: 200,
      headers: { 'Content-Type': 'text/html' },
      body: html
    };
  }
  
  // 5. 输出疫情数据
  return {
    isBase64Encoded: false,
    statusCode: 200,
    headers: { 'Content-Type': 'application/json' },
    body: result.data.data
  };
};

let dom = document.getElementById('container');
let myChart = echarts.init(dom);
let app = {};
myChart.showLoading();

// 1. 填充地图模板变量

let china_map = ${china_map} || null;

function updateMap() {
  $.get('?api=true', function(disease_data) {
    // 2. 填充确诊、疑似、治愈、死亡数据

    let chinaTotal = disease_data.chinaTotal;
    let chinaAdd = disease_data.chinaAdd;

    $('.confirm .add span').html(`+${chinaAdd.confirm}`);
    $('.suspect .add span').html(`+${chinaAdd.suspect}`);
    $('.cure .add span').html(`+${chinaAdd.heal}`);
    $('.dead .add span').html(`+${chinaAdd.dead}`);

    $('.confirm .number').html(`${chinaTotal.confirm}`);
    $('.suspect .number').html(`${chinaTotal.suspect}`);
    $('.cure .number').html(`${chinaTotal.heal}`);
    $('.dead .number').html(`${chinaTotal.dead}`);

    // 3. 处理疫情地图中的确诊数据格式
    /**
     * 需要 {name: 'xxx', value: 'xxx'} 这样的格式
     */

    let province = disease_data.areaTree[0].children;
    let confirmData = province.map(function(item) {
      return {
        name: item.name,
        value: item.total.confirm
      };
    });

    myChart.hideLoading();

    echarts.registerMap('China', china_map);
    let option = {
      // 4. 给疫情地图添加标题

      title: {
          text: '疫情地图',
          subtext: `${disease_data.lastUpdateTime} 更新`,
          left: 'right'
      },

      tooltip: {
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2,
        formatter: function(params) {
          var value = (params.value + '').split('.');
          value = value[0].replace(
            /(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
            '$1,'
          );
          return params.seriesName + '<br/>' + params.name + ': ' + value;
        }
      },
      visualMap: {
        type: 'piecewise',
        left: 'right',
        // 5. 添加数据分段
        pieces: [
            { min: 10000, label: '10000人及以上' },
            { min: 1000, max: 9999, label: '1000-9999人' },
            { min: 500, max: 999, label: '500-999人' },
            { min: 100, max: 499, label: '100-499人' },
            { min: 10, max: 99, label: '10-99人' },
            { min: 1, max: 9, label: '1-9人' }
        ],
        showLabel: true,
        itemHeight: 20,
        itemWidth: 10,
        itemGap: 5,
        itemSymbol: 'rect',
        inRange: {
          color: [
            '#FFEFD7',
            '#FFD2A0',
            '#FE8664',
            '#E64B47',
            '#C91014',
            '#9C0A0D'
          ]
        },
        text: ['最高', '最低']
      },
      // 6. 填写疫情地图的数据及悬浮框的展示信息
      series: [
        {
          name: '确诊病例',
          type: 'map',
          roam: true,
          map: 'china',
          label: {
            show: true
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data: confirmData
        }
      ];
    };

    myChart.setOption(option);

    if (option && typeof option === 'object') {
      myChart.setOption(option, true);
    }
  });
}

updateMap();

// 7. 定时拉取
setInterval(function() {
  updateMap();
}, 60000);