const echarts = require('../../../components/ec-canvas/echarts.js')

Page({
  data: {},
  ecDataTrendComponent1_1: null as any,
  ecDataTrendComponent2_1: null as any,
  ecDataTrendComponent3_1: null as any,
  async onLoad() {
    const app = getApp<IAppOption>()
    app.waitLogin().then(() => {})
    const list = [
      { StatMonth: '2026-01', MonthInvitePCount: 1 },
      { StatMonth: '2026-02', MonthInvitePCount: 2 },
      { StatMonth: '2026-03', MonthInvitePCount: 3 },
      { StatMonth: '2026-04', MonthInvitePCount: 2 },
      { StatMonth: '2026-05', MonthInvitePCount: 5 },
      { StatMonth: '2026-06', MonthInvitePCount: 7 },
      { StatMonth: '2026-07', MonthInvitePCount: 5 },
      { StatMonth: '2026-08', MonthInvitePCount: 3 },
      { StatMonth: '2026-09', MonthInvitePCount: 8 },
      { StatMonth: '2026-10', MonthInvitePCount: 10 },
    ]
    this.initChartBar(list)
    this.initChartLine(list, '#chart2_1', this.ecDataTrendComponent2_1)
    this.initChartLine(list, '#chart3_1', this.ecDataTrendComponent3_1)
  },
  initChartBar(list: any[]) {
    return new Promise((reslove) => {
      this.ecDataTrendComponent1_1 = this.selectComponent('#chart1_1')
      this.ecDataTrendComponent1_1.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: dpr, // new
        })
        canvas.setChart(chart)
        const x: string[] = []
        const y1: string[] = []
        list.forEach((item) => {
          x.push(item.StatMonth)
          y1.push(item.MonthInvitePCount)
        })

        const option = {
          legend: {
            top: 0,
            right: 0,
            itemWidth: 8,
            itemHeight: 8,
            icon: 'rect',
            lineStyle: {
              width: '0',
            },
            textStyle: {
              color: '#B5B8BB',
              fontSize: '12',
            },
          },
          grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '0',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false,
              },
              axisLabel: {
                fontSize: 10,
                color: '#B5B8BB',
              },
              axisLine: {
                show: false,
              },
              data: x,
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                },
              },
              axisLabel: {
                fontSize: 10,
                color: '#B5B8BB',
                formatter(value) {
                  return Math.abs(value)
                },
              },
            },
          ],
          series: [
            {
              name: '邀约患者数',
              type: 'bar',
              stack: 'a',
              width: 4,
              color: '#FED877',
              barWidth: 12,
              data: y1,
            },
            {
              name: '跳转患者数',
              type: 'bar',
              stack: 'a',
              color: '#4A8DFF',
              barWidth: 12,
              data: y1,
            },
            {
              name: '入组患者数',
              type: 'bar',
              stack: 'a',
              color: '#3ADDC8',
              barWidth: 12,
              data: y1,
            },
          ],
          dataZoom: {
            type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            startValue: x.length - 6,
            endValue: x.length - 1,
            filterMode: 'none',
          },
        }

        chart.setOption(option)
        reslove(chart)
        return chart
      })
    })
  },
  initChartLine(list: any[], name: string, componentName: string) {
    return new Promise((reslove) => {
      this[componentName] = this.selectComponent(name)
      this[componentName].init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: dpr, // new
        })
        canvas.setChart(chart)
        const x: string[] = []
        const y1: string[] = []
        list.forEach((item) => {
          x.push(item.StatMonth)
          y1.push(item.MonthInvitePCount)
        })

        const option = {
          legend: {
            top: 0,
            right: 0,
            itemWidth: 8,
            itemHeight: 8,
            icon: 'rect',
            lineStyle: {
              width: '0',
            },
            textStyle: {
              color: '#B5B8BB',
              fontSize: '12',
            },
            data: [],
          },
          grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '0',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false,
              },
              axisLabel: {
                fontSize: 10,
                color: '#B5B8BB',
              },
              axisLine: {
                show: false,
              },
              data: x,
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                },
              },
              axisLabel: {
                fontSize: 10,
                color: '#B5B8BB',
                formatter(value) {
                  return Math.abs(value)
                },
              },
            },
          ],
          series: [
            {
              name: '邀约患者数',
              type: 'line',
              stack: 'a',
              width: 4,
              color: '#FED877',
              barWidth: 12,
              data: y1,
              smooth: 0.5,
              label: {
                show: true,
                position: 'top',
                fontSize: 12,
                color: '#B5B8BB',
              },
            },
          ],
          dataZoom: {
            type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            startValue: x.length - 6,
            endValue: x.length - 1,
            filterMode: 'none',
          },
        }

        chart.setOption(option)
        reslove(chart)
        return chart
      })
    })
  },
  handleInvite() {
    wx.navigateTo({
      url: '/ground/pages/invite/index',
    })
  },
  handleInfo() {
    wx.navigateTo({
      url: '/ground/pages/stat/index',
    })
  },
})