import dayjs from 'dayjs'

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

Page({
  data: {
    showTel: false,

    doctor: {},
    hospital: {},
    qolDetail: {},
    hormoneDetail: {},

    id: '',
    remark: '',
    detail: {} as any,
    ec: {
      lazyLoad: true,
    },
    fields: {
      2: 'month',
      3: 'year',
    },

    StartDate: '',
    EndDate: '',
    typeRange: [
      {
        id: '2',
        value: '按月',
      },
      {
        id: '3',
        value: '按年',
      },
    ],
    type: '2',
    typeName: '按月',

    // 激素图表的独立日期范围选择器
    hormoneStartDate: '',
    hormoneEndDate: '',
    hormoneType: '2',
    hormoneTypeName: '按月',

    userInfo: {},

    popupRemarkShow: false,
    remarkFocus: false,

    popupEditShow: false,

    antibodyTypeRangeList: [
      {
        id: '1',
        value: 'AchR',
      },
      {
        id: '2',
        value: 'MuSK',
      },
      {
        id: '3',
        value: 'LRP4',
      },
      {
        id: '4',
        value: 'RyR',
      },
    ],
    thyroidAbnormalRangeList: [
      {
        id: '1',
        value: '是',
      },
      {
        id: '2',
        value: '否',
      },
    ],
    previousConvulsionRangeList: [
      {
        id: '1',
        value: '是',
      },
      {
        id: '2',
        value: '否',
      },
    ],
    traditionalImmunosuppressantRangeList: [
      {
        id: '1',
        value: '他克莫司',
      },
      {
        id: '2',
        value: '硫唑嘌呤',
      },
      {
        id: '3',
        value: '吗替麦考酚酯',
      },
      {
        id: '4',
        value: '其它',
      },
    ],
    medicalInsuranceTypeRangeList: [
      {
        id: '1',
        value: '城市职工',
      },
      {
        id: '2',
        value: '城市居民',
      },
      {
        id: '3',
        value: '新农合',
      },
    ],

    nav: '0',

    adlList: [] as any,
    tableData: [
      {
        title: '说话',
        key: 'TalkingScore',
      },
      {
        title: '咀嚼',
        key: 'ChewScore',
      },
      {
        title: '吞咽',
        key: 'SwallowScore',
      },
      {
        title: '呼吸',
        key: 'BreathScore',
      },
      {
        title: '刷牙梳头能力受损',
        key: 'BrushTeethAndCombHairScore',
      },
      {
        title: '从椅子上起身能力受损',
        key: 'GetUpFromChairScore',
      },
      {
        title: '复视/重影',
        key: 'DoubleVisionScore',
      },
      {
        title: '眼睑下垂',
        key: 'DroopyEyelidsScore',
      },
    ],

    list4Show: true,
    list5Show: true,
    list6Show: true,

    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(option) {
    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')
    this.setData({
      id: option.id,
    })
    if (option.anchor) {
      setTimeout(() => {
        this.handleAnchor(option.anchor)
      }, 1000)
    }

    app.waitLogin({ type: [2] }).then(async (_res) => {
      app.mpBehavior({ doctor: true, PageName: 'PG_DoctorPatientDetail' })
      this.getDoctorDetail()
      this.handleTypeChange()
      this.handleHormoneTypeChange()
      this.getQolDetail()
      this.getHormoneDetail()
      await this.getDetail()
      app.getUserInfo(2).then((userInfo) => {
        this.setData({
          userInfo,
        })
      })
    })
  },
  handleAnchor(anchor) {
    if (anchor == 'qol') {
      wx.pageScrollTo({ selector: '#qol' })
    }
    if (anchor == 'hormone') {
      wx.pageScrollTo({ selector: '#hormone' })
    }
  },
  getQolDetail() {
    wx.ajax({
      method: 'GET',
      url: '?r=xd/doctor/qol/get-last-record',
      data: {
        patientId: this.data.id,
      },
    }).then((res) => {
      this.setData({
        qolDetail: {
          ...res,
          CreateTime: dayjs(res.CreateTime).format('YYYY-MM-DD'),
        },
      })
    })
  },
  getHormoneDetail() {
    wx.ajax({
      method: 'GET',
      url: '?r=xd/doctor/hormone-dosage/get-last-record',
      data: {
        patientId: this.data.id,
      },
    }).then((res) => {
      this.setData({
        hormoneDetail: {
          ...res,
          createTime: dayjs(res.createTime).format('YYYY-MM-DD'),
        },
      })
    })
  },
  getDoctorDetail() {
    wx.ajax({
      method: 'GET',
      url: '?r=zd/doctor/account/info',
      data: {},
    }).then((res) => {
      this.setData({
        doctor: res.doctor,
        hospital: res.hospital,
      })
    })
  },
  getDetail() {
    return wx
      .ajax({
        method: 'GET',
        url: '?r=zd/doctor/patient/info',
        data: { patientId: this.data.id },
      })
      .then((res) => {
        if (res.LastAdlTime) {
          res.LastAdlTimeName = dayjs(res.LastAdlTime).from(dayjs().format('YYYY-MM-DD')).replace(' ', '')
        }
        if (res.LastUseDrugsTime) {
          res.LastUseDrugsTimeName
            = dayjs().format('YYYY-MM-DD') === res.LastUseDrugsTime
              ? ''
              : dayjs(res.LastUseDrugsTime).from(dayjs().format('YYYY-MM-DD')).replace(' ', '')
        }
        this.setData({
          detail: {
            ...res,
            hideName: res.Name.replace(/^(.)(.*)$/, (_, first, rest) => first + '*'.repeat(rest.length)),
            BecomePatientTime: res.BecomePatientTime ? dayjs(res.BecomePatientTime).format('YYYY-MM-DD') : '',
          },
        })
      })
  },
  handleChange() {
    this.getGraph()
  },
  handleHormoneChange() {
    this.getHormoneData()
  },
  handleTypeChange(e = '') {
    let index = 0
    if (e) {
      index = (e as any).detail.value
    }
    const { typeRange } = this.data
    const type = typeRange[index].id
    const typeName = typeRange[index].value
    let EndDate = ''
    let StartDate = ''
    if (type === '2') {
      EndDate = dayjs().format('YYYY-MM')
      StartDate = dayjs().subtract(1, 'M').format('YYYY-MM')
    }
    else if (type === '3') {
      EndDate = dayjs().format('YYYY')
      StartDate = dayjs().subtract(1, 'y').format('YYYY')
    }
    this.setData({
      type,
      typeName,
      EndDate,
      StartDate,
    })
    this.getGraph()
  },
  handleHormoneTypeChange(e = '') {
    let index = 0
    if (e) {
      index = (e as any).detail.value
    }
    const { typeRange } = this.data
    const hormoneType = typeRange[index].id
    const hormoneTypeName = typeRange[index].value
    let hormoneEndDate = ''
    let hormoneStartDate = ''
    if (hormoneType === '2') {
      hormoneEndDate = dayjs().format('YYYY-MM')
      hormoneStartDate = dayjs().subtract(1, 'M').format('YYYY-MM')
    }
    else if (hormoneType === '3') {
      hormoneEndDate = dayjs().format('YYYY')
      hormoneStartDate = dayjs().subtract(1, 'y').format('YYYY')
    }
    this.setData({
      hormoneType,
      hormoneTypeName,
      hormoneEndDate,
      hormoneStartDate,
    })
    this.getHormoneData()
  },
  getGraph() {
    const { type, StartDate, EndDate } = this.data
    wx.ajax({
      method: 'GET',
      url: '?r=xd/doctor/qol/graph',
      data: {
        DateType: type,
        StartDate,
        EndDate,
        count: 0,
        PatientId: this.data.id,
      },
    }).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 { hormoneType, hormoneStartDate, hormoneEndDate } = this.data
    wx.ajax({
      method: 'GET',
      url: '?r=xd/doctor/hormone-dosage/graph',
      data: {
        DateType: hormoneType,
        StartDate: hormoneStartDate,
        EndDate: hormoneEndDate,
        PatientId: this.data.id,
        count: 0,
      },
    }).then((res) => {
      const list4: any[] = []
      const list5: any[] = []
      const list6: any[] = []
      let list4Show = false
      let list5Show = false
      let list6Show = false
      res.forEach((item: any) => {
        if (item.dosage) {
          if (item.medicationMethod == 1) {
            list4Show = true
          }
          if (item.medicationMethod == 2) {
            list5Show = true
          }
          if (item.medicationMethod == 3) {
            list6Show = true
          }
        }
        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.setData({
        list4Show,
        list5Show,
        list6Show,
      })

      this.chartComponent4 = this.selectComponent('#chart4')
      this.chartComponent5 = this.selectComponent('#chart5')
      this.chartComponent6 = this.selectComponent('#chart6')

      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: 14,
            },
            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',
              },
              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
      })
    })
  },
  handleRemark() {
    this.setData({
      popupRemarkShow: true,
      remark: this.data.detail.DoctorRemark,
    })
    setTimeout(() => {
      this.setData({
        remarkFocus: true,
      })
    }, 300)
  },
  handleRemarkClose() {
    this.setData({
      popupRemarkShow: false,
      remarkFocus: false,
      remark: '',
    })
  },
  handleRemarkSubmit() {
    if (!this.data.remark) {
      wx.showToast({
        icon: 'none',
        title: '请输入备注',
      })
    }
    wx.ajax({
      method: 'POST',
      url: '?r=zd/doctor/patient/remark',
      data: {
        PatientId: this.data.id,
        DoctorRemark: this.data.remark,
      },
    }).then((_res) => {
      this.handleRemarkClose()
      this.getDetail()
    })
  },

  handleEditUser() {
    this.setData({
      popupEditShow: true,
    })
  },
  handleUserCancel() {
    this.setData({
      popupEditShow: false,
    })
  },
  handleUserSubmit() {
    this.handleUserCancel()
    this.handlePatientUpdate()
  },
  handleRadio(e) {
    const { id, key } = e.currentTarget.dataset
    this.setData({
      [`detail.${key}`]: id,
    })
  },
  handlePatientUpdate() {
    const { detail } = this.data
    wx.ajax({
      method: 'POST',
      url: '?r=zd/doctor/patient/update',
      data: {
        PatientId: detail.PatientId, // 患者Id
        AntibodyType: detail.AntibodyType, // 抗体类型 1：AChR 2：Musk 3：LRP4 4：RYR
        ThyroidAbnormal: detail.ThyroidAbnormal, // 胸腺异常 1：是 2：否
        PreviousConvulsion: detail.PreviousConvulsion, // 既往发生危象 1：是 2：否
        TraditionalImmunosuppressant: detail.TraditionalImmunosuppressant, // 传统免疫抑制剂 1：特克莫苏 2：硫唑嘌呤 3：马替麦考酚酯 4：其他
        MedicalInsuranceType: detail.MedicalInsuranceType, // 医保类型 1：城市职工 2：城市居民 3：新农合
      },
    }).then(() => {
      wx.showToast({
        icon: 'none',
        title: '更新成功',
      })
      this.getDetail()
    })
  },
  handleBack() {
    wx.navigateBack()
  },
  handleSend() {
    app.mpBehavior({ doctor: true, PageName: 'BTN_DoctorPatientDetailSendMessage' })
    wx.navigateTo({
      url: `/pages/d_interactiveDoctor/index?patientId=${this.data.detail.PatientId}`,
    })
  },

  getAdlList(newPage = 1) {
    const { detail, EndDate, StartDate, type } = this.data
    wx.ajax({
      method: 'GET',
      url: '?r=zd/doctor/patient/adl-list',
      data: {
        DateType: type,
        PatientId: detail.PatientId,
        StartDate,
        EndDate,
        page: newPage,
      },
    }).then((res) => {
      res.list.map((item) => {
        let grade = 1
        if (item.TotalScore < 5) {
          grade = 1
        }
        else if (item.TotalScore >= 5 && item.TotalScore < 15) {
          grade = 2
        }
        else {
          grade = 3
        }
        item.grade = grade
        item.fold = false
        return item
      })

      const adlList = res.page === 1 ? res.list : [...this.data.adlList, ...res.list]
      this.setData({
        adlList,
        pagination: {
          page: res.page,
          pages: res.pages,
          count: res.count,
        },
      })
    })
  },
  handleFold(e) {
    const { index } = e.currentTarget.dataset
    this.setData({
      [`adlList[${index}].fold`]: !this.data.adlList[index].fold,
    })
  },
  handleAdlDetail() {},
  handleToastOk() {
    this.setData({
      toastShow: false,
    })
  },
  handleToastCancel() {
    wx.navigateBack()
  },
  handleToggleTel() {
    this.setData({
      showTel: !this.data.showTel,
    })
  },
  handleEDC() {
    app.mpBehavior({ doctor: true, PageName: 'BTN_DoctorPatientDetailEDC' })
    wx.ajax({
      method: 'POST',
      url: '?r=zd/doctor/patient/set-edc',
      data: { patientId: this.data.detail.PatientId },
    }).then(() => {
      this.setData({
        'detail.IsEDC': this.data.detail.IsEDC == 1 ? 2 : 1,
      })
      wx.showToast({
        icon: 'none',
        title: this.data.detail.IsEDC == 1 ? '已设置为EDC患者' : '已取消EDC患者',
      })
    })
  },
  handleHormones() {
    wx.navigateTo({
      url: `/pages/d_patientHormones/index?id=${this.data.detail.PatientId}&name=${this.data.detail.Name}`,
    })
  },
  hadnleQolDetail() {
    wx.navigateTo({
      url: `/pages/d_qolDetail/index?id=${this.data.detail.PatientId}`,
    })
  },
})