import dayjs from 'dayjs'

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

Page({
  data: {
    type: '1',
    BeginMonth: '',
    EndMonth: '',

    fields: {
      1: 'day',
      2: 'month',
      3: 'year',
    },

    list: [],
    pagination: {
      page: 1,
      pages: 1,
      count: 1,
    },
  },
  chartComponent1: null as any,
  chartComponent2: null as any,
  chartComponent3: null as any,
  chartComponent4: null as any,
  chartComponent5: null as any,
  chartComponent6: null as any,
  async onLoad() {
    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.chartComponent4 = this.selectComponent('#chart4')
    this.chartComponent5 = this.selectComponent('#chart5')
    this.chartComponent6 = this.selectComponent('#chart6')

    app.waitLogin({ type: [1] }).then(() => {
      this.handleChangeType()
      this.getList()
    })
  },
  handleChangeType(e?: WechatMiniprogram.CustomEvent) {
    let type = ''
    if (e) {
      type = e.detail.index + 1
    }
    else {
      type = this.data.type
    }
    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')
    }
    this.setData({
      page: 0,
      type,
      Num: '5',
      EndMonth,
      BeginMonth,
    })
    this.getChatData()
    this.getHormoneData()
  },
  handleChange() {
    this.getChatData()
  },
  getChatData() {
    const { type, BeginMonth, EndMonth } = this.data
    wx.ajax({
      method: 'GET',
      url: '?r=xd/qol/graph',
      data: {
        DateType: type,
        StartDate: BeginMonth,
        EndDate: EndMonth,
        count: 0,
      },
    }).then((res) => {
      const list0: any[] = []
      const list1: any[] = []
      const list2: any[] = []
      res.list.forEach((item: any) => {
        list0.push({
          Date: item.Date,
          value: item.TotalScore,
        })
        list1.push({
          Date: item.Date,
          value: item.VisionScore,
        })
        list2.push({
          Date: item.Date,
          value: item.AppearanceScore,
        })
      })

      this.initChart(list0, 'chartComponent1')
      this.initChart(list1, 'chartComponent2')
      this.initChart(list2, 'chartComponent3')
    })
  },
  getHormoneData() {
    const { type, BeginMonth, EndMonth } = this.data
    wx.ajax({
      method: 'GET',
      url: '?r=xd/hormone-dosage/graph',
      data: {
        DateType: type,
        StartDate: BeginMonth,
        EndDate: EndMonth,
        count: 0,
      },
    }).then((res) => {
      const list4: any[] = []
      const list5: any[] = []
      const list6: any[] = []
      res.forEach((item: any) => {
        list4.push({
          Date: item.recordDate,
          value: item.medicationMethod == 1 ? item.dosage : '',
        })
        list5.push({
          Date: item.recordDate,
          value: item.medicationMethod == 2 ? item.dosage : '',
        })
        list6.push({
          Date: item.recordDate,
          value: item.medicationMethod == 3 ? item.dosage : '',
        })
      })

      this.initChartHormone(list4, 'chartComponent4', '#1ec580')
      this.initChartHormone(list5, 'chartComponent5', '#B982FF')
      this.initChartHormone(list6, 'chartComponent6', '#FFA300')
    })
  },
  initChart(defaultList = [] as any[], key) {
    return new Promise((reslove) => {
      this[key].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: defaultList.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: defaultList.length ? defaultList.map(item => item.value) : [25],
              barWidth: '16',
              label: {
                show: true,
                position: 'top',
                color: '#B982FF',
                fontSize: 14,
              },
              type: 'line',
              symbolSize: 4,
              showSymbol: defaultList.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
      })
    })
  },
  initChartHormone(defaultList = [] as any[], key, color) {
    return new Promise((reslove) => {
      this[key].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: defaultList.map(item => dayjs(item.Date).format('MM-DD')),
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 20,
              min: 0,
              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: defaultList.length ? defaultList.map(item => item.value) : [25],
              barWidth: '16',
              label: {
                show: true,
                position: 'top',
                color,
                fontSize: 14,
              },
              type: 'line',
              symbolSize: 4,
              showSymbol: defaultList.length >= 1,
              connectNulls: true,
              z: 10,
              itemStyle: {
                color,
              },
            },
          ],
          dataZoom: {
            type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            startValue: 0,
            endValue: 4,
            filterMode: 'none',
          },
        }

        chart.setOption(option)
        reslove(chart)
        return chart
      })
    })
  },
  getList(newPage = 1) {
    wx.ajax({
      method: 'GET',
      url: '?r=xd/qol/list',
      data: {
        page: newPage,
      },
    }).then((res) => {
      let list = res.page == 1 ? res.list : [...this.data.list, ...res.list]
      this.setData({
        list,
        pagination: {
          page: res.page,
          pages: res.pages,
          count: res.count,
        },
      })
    })
  },
  onReachBottom() {
    const { page, pages } = this.data.pagination
    if (pages > page) {
      this.getList(page + 1)
    }
  },
  handleDelete(e) {
    const { id, index } = e.currentTarget.dataset
    const { list } = this.data
    wx.showModal({
      title: '确认删除吗？',
      confirmColor: '#8c75d0',
      success: (res) => {
        if (res.confirm) {
          wx.ajax({
            method: 'POST',
            url: '?r=xd/qol/delete',
            data: {
              Id: id,
            },
          }).then(() => {
            this.setData({
              list: list.filter((_item, i) => i !== index),
            })
          })
        }
      },
    })
  },
  handleDetail(e) {
    const { id } = e.currentTarget.dataset
    wx.navigateTo({
      url: `/patient/pages/qolAdd/index?id=${id}`,
    })
  },
  handleQol() {
    wx.navigateTo({
      url: '/patient/pages/qol/index',
    })
  },
  handleHormoneDetail(e) {
    const { index } = e.currentTarget.dataset
    const { list } = this.data
    const form: any = list[index]
    wx.navigateTo({
      url: `/patient/pages/hormonesResult/index?medicationMethod=${form.medicationMethod}&oralMonth=${form.oralMonthName}&injectionWeek=${form.injectionWeek}&injectionTimes=${form.injectionTimes}&dosage=${form.dosage}&report=1`,
    })
  },
  handleHome() {
    wx.reLaunch({
      url: '/patient/pages/index/index',
    })
  },
  handleBack() {
    wx.navigateBack({
      fail() {
        wx.reLaunch({
          url: '/patient/pages/index/index',
        })
      },
    })
  },
})

export {}