// components/visualComponent/geoMap/geoMap.js
import * as echarts from '../../../ec-canvas/ec-canvas/echarts';

const app = getApp();
function getGeoJson() {
  return new Promise((resolve, reject) => {
    if(app.globalData.geoJson){
      resolve(app.globalData.geoJson)
    }
    else{
      reject({})
    }
  })
}

function getOutBreakData() {
  return new Promise((resolve, reject) => {
    if(app.globalData.hotData){
      resolve(app.globalData.hotData)
    }
    else{
      reject({})
    }
  })
}
async function initChart(canvas, width, height, dpr) {
  const geoJson = await getGeoJson()
  const outBreakData = await getOutBreakData()
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  const geoAdcodeMap = [...app.globalData.geoAdcodeMap]
  echarts.registerMap('guiZhou', geoJson);
  const targetItem = {...app.globalData.hotData.targetItem};
  /**
   * @type object data热力值  max最大值
   */
  const hotObj = {
    max: 0,
    data: []
  }

  targetItem.children.forEach(item => {
    const area = geoAdcodeMap.find(mapItem => {
      return mapItem.adcode.toString() === item.adcode.toString()
    })
    if (area) {
      const count = item.total.confirm
      hotObj.data.push({
        name: area.name,
        value: count,
        adcode: area.adcode.toString
      })
      if (count > hotObj.max) {
        hotObj.max = count
      }
    }
  })

  const option = {
    title: {
      text: '热力图',
      subtext: '累计确诊'
    },
    tooltip: {
      trigger: 'item',
      formatter: ((item) => {
        const name = item.name;
        const num = (hotData.find((i) => i.name == item.name) || { value: 0 }).value;
        const renderText = `<div style="text-align: left">所属地区：${name}<br>确诊病例：${num}</div>`;
        return renderText
      })
    },
    visualMap: {
      min: 0,
      max: hotObj.max,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本，默认为数值文本
      calculable: true,
      color: ['#dd1818', '#ffffff']
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        // dataView: { readOnly: false },
        // restore: {},
        // saveAsImage: {}
      }
    },
    series: [{
      type: 'map',
      mapType: 'guiZhou',
      label: {
        show: true,
        formatter: (item) => {
          const label = item.name.toString().includes('黔南') ? item.name.toString().substring(0, 2) : item.name.toString().substring(0, 3)
          return label + '\n' + item.value
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      animation: false,

      data: hotObj.data,

    }],

  };

  chart.setOption(option);

  return chart;
}
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    geoJson: null,
    mapChart: {
      onInit: initChart
    }
  },

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
    attached: function () {
      // this.getGeoJson()
    },
    moved: function () { },
    detached: function () {
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})