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

const app=getApp();
function initChart(canvas, width, height, dpr) {
  const geoAdcodeMap = [...app.globalData.geoAdcodeMap]
  const targetItem = {...app.globalData.hotData.targetItem};
  /**
   * @type object data热力值  max最大值
   */
  const hotObj = {
    data: []
  }

  targetItem.children.forEach(item => {
    const area = geoAdcodeMap.find(mapItem => {
      return mapItem.adcode.toString() === item.adcode.toString()
    })
    if (area) {
      const totalCount = item.total.confirm
      const todayCount = item.today.confirm
      hotObj.data.push({
        name: area.name,
        totalConfirm: totalCount,
        todayConfirm: todayCount,
        adcode: area.adcode.toString
      })
    }
  })
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  const lineObj={
    labelArray:[],
    totalData:[],
    todayData:[]
  }
  hotObj.data.forEach(item=>{
    lineObj.labelArray.push(item.name)
    lineObj.totalData.push(item.totalConfirm)
    lineObj.todayData.push(item.todayConfirm)
  })
  const option = {
    color: ['#EE5A24', '#F79F1F'],
    title: {
      text: '柱状图',
      subtext: '累计确诊和新增确诊'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['累计确诊', '新增确诊'],
      
    },
    toolbox: {
      orient: 'vertical',
      left: 'right',
      top: 'center',
      show: true,
      feature: {
        // dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        // restore: { show: true },
        // saveAsImage: { show: true }
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: lineObj.labelArray
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '累计确诊',
        type: 'bar',
        data: lineObj.totalData,
        label: {
          show: true,
        }
      },
      {
        name: '新增确诊',
        type: 'bar',
        data: lineObj.todayData,
        label: {
          show: true,
        }
      },

    ]
  };
  chart.setOption(option);
  return chart;
}
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    title: '折线图',
    lineChart: {
      onInit: initChart
    }
  },
  lifetimes: {
    created() {
      console.log('created')
    },
    // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
    attached: function () {
      console.log('attached')
    },
    moved: function () { },
    detached: function () {
    },
  },

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

  }
})