import dayjs from 'dayjs'
const _app = getApp<IAppOption>()
let echarts: any = null

Page({
  data: {
    type: '1',
    BeginMonth: '',
    EndMonth: '',
  },
  chartComponent1: null as any,
  chartComponent2: null as any,
  chartComponent3: null as any,
  async onLoad() {
    this.handleChangeType()
    echarts = await require.async('../../../gift/compontnts/echart/echarts.js')
    this.chartComponent1 = this.selectComponent('#chart1')
    this.chartComponent2 = this.selectComponent('#chart2')
    this.chartComponent3 = this.selectComponent('#chart3')
    this.initChart()
  },

  handleChangeType(e?: WechatMiniprogram.CustomEvent) {
    let type = ''
    let callback = true
    if (e) {
      type = e.currentTarget.dataset.type
    } else {
      type = this.data.type
      callback = false
    }
    let EndMonth = ''
    let BeginMonth = ''
    if (type == '1') {
      EndMonth = dayjs().format('YYYY-MM-DD')
      BeginMonth = dayjs().subtract(6, 'd').format('YYYY-MM-DD')
    } else if (type == '2') {
      EndMonth = dayjs().format('YYYY-MM')
      BeginMonth = dayjs().subtract(1, 'M').format('YYYY-MM')
    } else if (type == '3') {
      EndMonth = dayjs().format('YYYY')
      BeginMonth = dayjs().subtract(1, 'y').format('YYYY')
    } else if (type == '4' && e) {
    }
    this.setData({
      page: 0,
      Type: type,
      Num: '5',
      EndMonth,
      BeginMonth,
    })
    if (callback) {
      this.handleTabCallBack()
    }
  },
  initChart(defaultList = []) {
    const list: any = [
      {
        Date: '2025-09-04',
        TotalScore: '5',
      },
      {
        Date: '2025-09-05',
        TotalScore: '5',
      },
      {
        Date: '2025-09-06',
        TotalScore: '5',
      },
    ]
    return new Promise((reslove) => {
      this.chartComponent1.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: dpr, // new
        })
        canvas.setChart(chart)

        const option: any = {
          tooltip: {
            show: false,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            confine: true,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            textStyle: {
              color: '#fff',
              fontSize: 10,
            },
            order: 'seriesDesc',
          },
          grid: {
            top: '30',
            left: '0',
            right: '0',
            bottom: '10',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false,
                inside: true,
                length: 1,
                alignWithLabel: true,
                lineStyle: {
                  type: 'dotted',
                  color: '#D8D8D8',
                  width: 4,
                  cap: 'round',
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#8C8C8C',
                  type: 'dashed',
                },
              },
              splitLine: {
                show: true,
                showMinLine: false,
                lineStyle: {
                  type: 'dotted',
                  color: 'rgba(137, 141, 151, 0.23)',
                },
              },
              data: list.map((item) => dayjs(item.Date).format('MM-DD')),
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 20,
              max: 100,
              axisLine: {
                show: false,
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(161, 164, 172, 1)',
                },
              },
              splitLine: {
                show: true,
                showMinLine: false,
                lineStyle: {
                  type: 'dotted',
                  color: 'rgba(137, 141, 151, 0.23)',
                },
              },
            },
          ],
          series: [
            {
              name: '总分',
              data: list.length ? list.map((item) => item.TotalScore) : [25],
              barWidth: '16',
              label: {
                show: true,
                position: 'top',
                color: '#B982FF',
              },
              type: 'line',
              symbolSize: 4,
              showSymbol: list.length >= 1,
              connectNulls: true,
              z: 10,
              itemStyle: {
                color: '#B982FF',
              },
              markLine: {
                symbol: ['none', 'none'],
                data: [
                  {
                    name: '达标区',
                    yAxis: 80,
                    label: {
                      formatter: '{b}',
                      position: 'insideMiddle',
                      color: '#24D8C8',
                      fontSize: '10',
                    },
                    lineStyle: {
                      cap: '',
                      color: '#34D7C7',
                      type: 'dashed',
                    },
                  },
                ],
              },
              markArea: {
                itemStyle: {
                  color: 'rgba(37,217,200,0.19)',
                },
                data: [
                  [
                    {
                      yAxis: 80,
                    },
                    {
                      yAxis: 100,
                    },
                  ],
                ],
              },
            },
          ],
          dataZoom: {
            type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            startValue: 0,
            endValue: 4,
            filterMode: 'none',
          },
        }

        chart.setOption(option)
        reslove(chart)
        return chart
      })
    })
  },
})

export {}