const app = getApp<IAppOption>()
const echarts = require('../ec-canvas/echarts.js')

// pages/story/a.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true,
    },
  },

  attached() {
    this.waitEchart(async () => {
      const chart1: any = await this.initChart1()
      const chart2: any = await this.initChart2()
      const chart3: any = await this.initChart3()
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    ecDataTrendComponent1: null as any,
    ecDataTrendComponent2: null as any,
    ecDataTrendComponent3: null as any,
    waitEchart(callback) {
      const time = setInterval(() => {
        if (this.selectComponent('#chart1')) {
          console.log(this.selectComponent('#chart1'))
          clearInterval(time)
          callback()
        }
      }, 30)
    },
    initChart1() {
      return new Promise((reslove) => {
        this.ecDataTrendComponent1 = this.selectComponent('#chart1')
        this.ecDataTrendComponent1.init((canvas, width, height, dpr) => {
          const chart = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio: dpr, // new
          })
          canvas.setChart(chart)
          const x: string[] = ['2024-09', '2024-10']
          const y1: string[] = ['10', '30']
          const y2: string[] = ['10', '30']
          const y3: string[] = ['10', '30']
          const y4: string[] = ['30', '90']

          const option = {
            legend: {
              bottom: 0,
              itemWidth: 8,
              itemHeight: 8,
              icon: 'circle',
              lineStyle: {
                width: '0',
              },
              textStyle: {
                color: 'rgba(103, 113, 114, 1)',
                fontSize: '12',
              },
              data: ['一级医生', '核心医生', '质控医生'],
            },
            grid: {
              top: '10%',
              left: '3%',
              right: '4%',
              bottom: '30',
              containLabel: true,
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: 'rgba(40, 48, 49, 1)',
                },
                data: x,
              },
            ],
            yAxis: [
              {
                type: 'value',
                minInterval: 1,
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: 'rgba(40, 48, 49, 1)',
                  formatter(value) {
                    return Math.abs(value)
                  },
                },
              },
            ],
            series: [
              {
                name: '质控医生',
                type: 'bar',
                stack: 'a',
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 10,
                  overflow: 'truncate',
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value)
                  },
                },
                color: 'rgba(0, 180, 197, 1)',
                data: y3,
              },
              {
                name: '核心医生',
                type: 'bar',
                stack: 'a',
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 10,
                  overflow: 'truncate',
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value)
                  },
                },
                color: 'rgba(84, 226, 180, 1)',
                data: y2,
              },
              {
                name: '一级医生',
                type: 'bar',
                stack: 'a',
                label: {
                  show: true,
                  color: 'rgba(0, 180, 197, 1)',
                  fontSize: 10,
                  overflow: 'truncate',
                  width: 30,
                },
                color: 'rgba(225, 248, 242, 1)',
                data: y1,
              },
              {
                name: '总数', // 总数显示，生成一个总数的柱状图，将颜色设为透明，
                type: 'line', // label将位置设备内部底部，造成一个总数显示在
                stack: '', // 柱状图上方的假象
                color: 'rgba(0, 0, 0, 0)',
                data: y4,
                symbolSize: 0,
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    color: 'rgba(133, 133, 133, 1)',
                    fontSize: 10,
                    formatter: '{c}',
                  },
                },
              },
            ],
            dataZoom: {
              type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
              startValue: x.length - 6,
              endValue: x.length - 1,
              filterMode: 'none',
            },
          }

          chart.setOption(option)
          reslove(chart)
          return chart
        })
      })
    },
    initChart2() {
      return new Promise((reslove) => {
        this.ecDataTrendComponent2 = this.selectComponent('#chart2')
        this.ecDataTrendComponent2.init((canvas, width, height, dpr) => {
          const chart = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio: dpr, // new
          })
          canvas.setChart(chart)
          const x: string[] = ['2024-09', '2024-10']
          const y1: string[] = ['10', '30']
          const y2: string[] = ['10', '30']
          const y3: string[] = ['20', '60']

          const option = {
            legend: {
              bottom: 0,
              itemWidth: 8,
              itemHeight: 8,
              icon: 'circle',
              lineStyle: {
                width: '0',
              },
              textStyle: {
                color: 'rgba(103, 113, 114, 1)',
                fontSize: '12',
              },
              data: ['一级医生提交', '核心医生提交'],
            },
            grid: {
              top: '10%',
              left: '3%',
              right: '4%',
              bottom: '30',
              containLabel: true,
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: 'rgba(40, 48, 49, 1)',
                },
                data: x,
              },
            ],
            yAxis: [
              {
                type: 'value',
                minInterval: 1,
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: 'rgba(40, 48, 49, 1)',
                  formatter(value) {
                    return Math.abs(value)
                  },
                },
              },
            ],
            series: [
              {
                name: '核心医生提交',
                type: 'bar',
                stack: 'a',
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 10,
                  overflow: 'truncate',
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value)
                  },
                },
                color: 'rgba(84, 226, 180, 1)',
                data: y2,
              },
              {
                name: '一级医生提交',
                type: 'bar',
                stack: 'a',
                label: {
                  show: true,
                  color: 'rgba(0, 180, 197, 1)',
                  fontSize: 10,
                  overflow: 'truncate',
                  width: 30,
                },
                color: 'rgba(225, 248, 242, 1)',
                data: y1,
              },
              {
                name: '总数', // 总数显示，生成一个总数的柱状图，将颜色设为透明，
                type: 'line', // label将位置设备内部底部，造成一个总数显示在
                stack: '', // 柱状图上方的假象
                color: 'rgba(0, 0, 0, 0)',
                data: y3,
                symbolSize: 0,
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    color: 'rgba(133, 133, 133, 1)',
                    fontSize: 10,
                    formatter: '{c}',
                  },
                },
              },
            ],
            dataZoom: {
              type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
              startValue: x.length - 6,
              endValue: x.length - 1,
              filterMode: 'none',
            },
          }

          chart.setOption(option)
          reslove(chart)
          return chart
        })
      })
    },
    initChart3() {
      return new Promise((reslove) => {
        this.ecDataTrendComponent3 = this.selectComponent('#chart3')
        this.ecDataTrendComponent3.init((canvas, width, height, dpr) => {
          const chart = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio: dpr, // new
          })
          canvas.setChart(chart)
          const x: string[] = ['2024-09', '2024-10']
          const y1: string[] = ['10', '30']
          const y2: string[] = ['10', '30']
          const y3: string[] = ['20', '60']

          const option = {
            legend: {
              bottom: 0,
              itemWidth: 8,
              itemHeight: 8,
              icon: 'circle',
              lineStyle: {
                width: '0',
              },
              textStyle: {
                color: 'rgba(103, 113, 114, 1)',
                fontSize: '12',
              },
              data: ['一级医生提交', '核心医生提交'],
            },
            grid: {
              top: '10%',
              left: '3%',
              right: '4%',
              bottom: '30',
              containLabel: true,
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: 'rgba(40, 48, 49, 1)',
                },
                data: x,
              },
            ],
            yAxis: [
              {
                type: 'value',
                minInterval: 1,
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  fontSize: 10,
                  color: 'rgba(40, 48, 49, 1)',
                  formatter(value) {
                    return Math.abs(value)
                  },
                },
              },
            ],
            series: [
              {
                name: '核心医生提交',
                type: 'bar',
                stack: 'a',
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 10,
                  overflow: 'truncate',
                  width: 30,
                  formatter(params) {
                    return Math.abs(params.value)
                  },
                },
                color: 'rgba(84, 226, 180, 1)',
                data: y2,
              },
              {
                name: '一级医生提交',
                type: 'bar',
                stack: 'a',
                label: {
                  show: true,
                  color: 'rgba(0, 180, 197, 1)',
                  fontSize: 10,
                  overflow: 'truncate',
                  width: 30,
                },
                color: 'rgba(225, 248, 242, 1)',
                data: y1,
              },
              {
                name: '总数', // 总数显示，生成一个总数的柱状图，将颜色设为透明，
                type: 'line', // label将位置设备内部底部，造成一个总数显示在
                stack: '', // 柱状图上方的假象
                color: 'rgba(0, 0, 0, 0)',
                data: y3,
                symbolSize: 0,
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    color: 'rgba(133, 133, 133, 1)',
                    fontSize: 10,
                    formatter: '{c}',
                  },
                },
              },
            ],
            dataZoom: {
              type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
              startValue: x.length - 6,
              endValue: x.length - 1,
              filterMode: 'none',
            },
          }

          chart.setOption(option)
          reslove(chart)
          return chart
        })
      })
    },
    handleRankDetail() {
      wx.navigateTo({
        url: '/module1/pages/doctorRankList/index',
      })
    },
  },
})