import dayjs from 'dayjs'
import Dialog from '@vant/weapp/dialog/dialog'

const app = getApp<IAppOption>()
let echarts: any = null

Page({
  data: {
    top: 0,
    bottom: 0,
    ec: {
      lazyLoad: true,
    },

    startData: dayjs('2025').format('YYYY'),
    endDate: dayjs().format('YYYY'),

    doctor: {},
    hospital: {},
    detail: {},

    tab1: 0,

    year1: dayjs().format('YYYY'),
  },
  ecDataTrendComponent1_1: null as any,
  ecDataTrendComponent1_2: null as any,
  async onLoad() {
    const SystemInfo = app.globalSystemInfo
    if (SystemInfo) {
      const { top, bottom } = SystemInfo.capsulePosition
      this.setData({
        top,
        bottom,
      })
    }
    echarts = await require.async('../../../resource/components/echart/echarts.js')
    app.waitLogin().then((_res) => {
      app.mpBehavior({ doctor: true, PageName: 'PG_DOCTORHOME' })
      this.getDoctorInfo()
      this.getDetail()
      this.getList1_1()
    })
  },
  getDoctorInfo() {
    wx.ajax({
      method: 'GET',
      url: '?r=igg4/doctor/account/info',
      data: {},
    }).then((res) => {
      this.setData({
        hospital: res.hospital,
        doctor: res.doctor,
      })
    })
  },
  getDetail() {
    wx.ajax({
      method: 'GET',
      url: '?r=igg4/doctor/doctor-stat/get-last-month',
      data: {},
    }).then((res) => {
      this.setData({
        detail: {
          ...res,
          year: dayjs(res.StatMonth).format('YYYY'),
          yr: dayjs(res.StatMonth).format('YY'),
        },
      })
    })
  },
  handleTab1(e) {
    const { index } = e.currentTarget.dataset
    this.setData({
      tab1: index,
    })
    if (index === 0) {
      this.getList1_1()
    } else if (index === 1) {
      this.getList1_2()
    }
  },
  handleSelectYear1() {
    this.handleTab1({
      currentTarget: {
        dataset: {
          index: this.data.tab1,
        },
      },
    })
  },
  getList1_1() {
    wx.ajax({
      method: 'GET',
      url: '?r=igg4/doctor/doctor-stat/get-month-list',
      data: {
        statYear: this.data.year1,
      },
    }).then(async (res) => {
      this.initChart1_1(res.list)
    })
  },
  getList1_2() {
    wx.ajax({
      method: 'GET',
      url: '?r=igg4/doctor/doctor-stat/get-month-list',
      data: {
        statYear: this.data.year1,
      },
    }).then((res) => {
      this.initChart1_2(res.list)
    })
  },
  initChart1_1(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: {
            bottom: 0,
            itemWidth: 8,
            itemHeight: 8,
            icon: 'circle',
            lineStyle: {
              width: '0',
            },
            textStyle: {
              color: 'rgba(33, 33, 32, 0.30)',
              fontSize: '12',
            },
            data: [],
          },
          grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '30',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false,
              },
              axisLabel: {
                fontSize: 10,
                color: 'rgba(33, 33, 32, 0.30)',
              },
              data: x,
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
              axisLabel: {
                fontSize: 10,
                color: 'rgba(33, 33, 32, 0.30)',
                formatter(value) {
                  return Math.abs(value)
                },
              },
            },
          ],
          series: [
            {
              name: '患者数',
              type: 'bar',
              stack: 'a',
              label: {
                show: true,
                color: 'rgba(33, 33, 32, 1)',
                fontSize: 10,
                overflow: 'truncate',
                width: 30,
                position: 'top',
              },
              color: 'rgba(0, 194, 255, 1)',
              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
      })
    })
  },
  initChart1_2(list: any[]) {
    this.ecDataTrendComponent1_2 = this.selectComponent('#chart1_2')
    this.ecDataTrendComponent1_2.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.InvitePCount)
      })

      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,
            },
            axisLabel: {
              fontSize: 10,
              color: 'rgba(40, 48, 49, 1)',
            },
            data: x,
          },
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            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: '#000',
              fontSize: 10,
              overflow: 'truncate',
              width: 30,
              position: 'top',
            },
            color: 'rgba(103, 186, 202, 1)',
            data: y1,
          },
        ],
        dataZoom: {
          type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          startValue: x.length - 6,
          endValue: x.length - 1,
          filterMode: 'none',
        },
      }

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

  handleQuestion(e) {
    const { id } = e.currentTarget.dataset
    const toastParams = {
      1: {
        content: `累计邀约患者数`,
        title: '累计邀约',
      },
      2: {
        content: `本月新邀约患者数`,
        title: '本月新增',
      },
    }[id]
    Dialog.alert({
      title: toastParams.title || '提示说明',
      messageAlign: 'left',
      message: toastParams.content,
      zIndex: 10000,
      confirmButtonColor: '#62bed0',
    } as any)
  },

  handlePatient(e) {
    const { type, name } = e.currentTarget.dataset

    wx.navigateTo({
      url: `/doctor/pages/d_patientList/index?type=${type}&name=${name}`,
    })
  },
})