import * as echarts from '../../ec-canvas/echarts.min';
import request from '~/api/request';
import {
  heightList,
  weightList
} from './heightWeight';
const app = getApp();

Page({
  onShareAppMessage: function (res) {
    
  },
  data: {
    ec: {
      lazyLoad: true
    },
    ec2: {
      lazyLoad: true
    },
    ec3: {
      lazyLoad: true
    },
    ec4: {
      lazyLoad: true
    },
    activeIndex: 0,
    sfData: {},
    sfListLength: 0,
    articles: [],
    articlesLength: 0,
    heightData: [],
    weightData: [],

    carList: [],
    carLength: 0,
    userInfo: {},
    totalBilirubin: [],
    directBilirubin: [],
    xAxis: []
  },

  heightChart: null,
  weightChart: null,
  directChart: null,
  indirectChart: null,
  standardHeight: [],
  standardWeight: [],
  userId: '',
  // Helper function to strip HTML tags and convert to plain text
  stripHtml(html) {
    if (!html) return '';
    return html.replace(/<[^>]*>/g, '');
  },
  async getPersonalInfo(id) {
    const info = await request('doctor/patient/basic/' + id).then((res) => res);
    info.avatar = info.avatar ? info.avatar : 'https://image-fudan.oss-cn-beijing.aliyuncs.com/mini_images/my/baby.png';
    this.setData({
      userInfo: info
    })
    if (info.sex == 1) {
      this.standardHeight = heightList.boy
      this.standardWeight = weightList.boy
    } else {
      this.standardHeight = heightList.girl
      this.standardWeight = weightList.girl
    }
    this.getChartData()

  },


  async getChartData() {
    const res = await request('doctor/patient/chat/' + this.userId, 'get')
    const heightData = []
    const weightData = []
    const totalBilirubin = []
    const directBilirubin = []
    const xAxis = []
    if (res.list.length > 0) {
      res.list.forEach(item => {
        heightData.push(item.height)
        weightData.push(item.weight)
        totalBilirubin.push(item.total_bilirubin)
        directBilirubin.push(item.direct_bilirubin)
        xAxis.push(item.age)
      })
    }

    this.setData({
      heightData,
      weightData,
      totalBilirubin,
      directBilirubin,
      xAxis
    });
    this.initHeightChart()
    this.initDirectChart()
    this.initIndirectChart()
  },

  toBack() {
    wx.navigateBack({
      delta: 1
    })
  },
  onLoad(options) {
    this.userId = options.userId
    this.getPersonalInfo(options.userId)
  },

  onReady() {


  },
  toLink() {
    wx.navigateTo({
      url: '/pages/followUp/index?userId=' + this.userId
    })
  },

  changeChart(e) {
    const index = e.currentTarget.dataset.index;
    if (index == this.data.activeIndex) {
      return
    }
    this.setData({
      activeIndex: index
    }, () => {
      setTimeout(() => {
        if (index == 0) {
          this.initHeightChart();
        } else {
          this.initWeightChart();
        }
      }, 100);
    });
  },


  onUnload() {
    // 页面卸载时销毁图表实例
    if (this.heightChart) {
      this.heightChart.dispose();
      this.heightChart = null;
    }
    if (this.weightChart) {
      this.weightChart.dispose();
      this.weightChart = null;
    }
    if (this.directChart) {
      this.directChart.dispose();
      this.directChart = null;
    }
    if (this.indirectChart) {
      this.indirectChart.dispose();
      this.indirectChart = null;
    }
  },

  // 初始化身高图表
  initHeightChart() {
    const standardHeight = this.standardHeight;

    let totalList = []
    standardHeight.forEach(item => {
      this.data.xAxis.forEach(item2 => {
        if (item.age == item2) {
          totalList.push(item.value)
        }

      })
    })


    const standardLower = totalList.map(item => item[0]);
    const standardUpper = totalList.map(item => item[1]);
    // const standardRange = standardUpper.map((up, i) => up - standardLower[i]);

    const chartComp = this.selectComponent('#mychart-dom-height');
    if (chartComp) {
      chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: dpr
        });
        canvas.setChart(chart);
        chart.setOption({
          title: {
            text: '',
            left: 'left',
            fontSize: 6
          },
          grid: {
            containLabel: true,
            top: '5%',
            left: '5%',
            right: '7%',
            bottom: '3%'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: function (params) {
              const param = params[0];
              return `${param.axisValue}\n${param.seriesName}: ${param.value} cm`;
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.xAxis
          },
          yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [{
              name: '实际身高',
              type: 'line',
              smooth: true,
              data: this.data.heightData
            },
            {
              name: '标准上界',
              type: 'line',
              symbol: 'none',
              data: standardUpper,
              lineStyle: {
                opacity: 0
              },
              stack: '标准范围',
              areaStyle: {
                opacity: 0
              },
              tooltip: {
                show: true
              }
            },
            {
              name: '标准下界',
              type: 'line',
              symbol: 'none',
              data: standardLower,
              lineStyle: {
                opacity: 0
              },
              stack: '标准范围',
              areaStyle: {
                color: 'rgba(135,206,250,0.3)'
              },
              tooltip: {
                show: true
              }
            }
          ]
        });
        return chart;
      });
    }
  },

  // 初始化体重图表
  initWeightChart() {
    const standardWeight = this.standardWeight;

    let totalList = []
    standardWeight.forEach(item => {
      this.data.xAxis.forEach(item2 => {
        if (item.age == item2) {
          totalList.push(item.value)
        }

      })
    })
    const standardLower = totalList.map(item => item[0]);
    const standardUpper = totalList.map(item => item[1]);
    // const standardRange = totalList.map((up, i) => up - standardLower[i]);

    const chartComp = this.selectComponent('#mychart-dom-weight');
    if (chartComp) {
      chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: dpr
        });
        canvas.setChart(chart);
        chart.setOption({
          title: {
            text: '',
            left: 'left',
            fontSize: 6
          },
          grid: {
            containLabel: true,
            top: '5%',
            left: '5%',
            right: '7%',
            bottom: '3%'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: function (params) {
              const param = params[0];
              return `${param.axisValue}\n${param.seriesName}: ${param.value} kg`;
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.xAxis
          },
          yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [{
              name: '实际体重',
              type: 'line',
              smooth: true,
              data: this.data.weightData
            },
            {
              name: '标准上界',
              type: 'line',
              symbol: 'none',
              data: standardUpper,
              lineStyle: {
                opacity: 0
              },
              stack: '标准范围',
              areaStyle: {
                opacity: 0
              },
              tooltip: {
                show: true
              }
            },
            {
              name: '标准下界',
              type: 'line',
              symbol: 'none',
              data: standardLower,
              lineStyle: {
                opacity: 0
              },
              stack: '标准范围',
              areaStyle: {
                color: 'rgba(135,206,250,0.3)'
              },
              tooltip: {
                show: true
              }
            }
          ]
        });
        return chart;
      });
    }
  },
  // 初始化体直接胆红素趋势
  initDirectChart() {


    const chartComp = this.selectComponent('#mychart-dom-direct');
    if (chartComp) {
      chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: dpr
        });
        canvas.setChart(chart);
        chart.setOption({
          title: {
            text: '',
            left: 'left',
            fontSize: 6
          },
          grid: {
            containLabel: true,
            top: '5%',
            left: '5%',
            right: '7%',
            bottom: '3%'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: function (params) {
              const param = params[0];
              return `${param.axisValue}\n${param.seriesName}: ${param.value} μmol/L`;
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.xAxis
          },
          yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [{
              name: '总胆红素',
              type: 'line',
              smooth: true,
              data: this.data.totalBilirubin
            },

          ]
        });
        this.directChart = chart;
        return chart;
      });
    }
  },
  // 初始化体间接胆红素趋势
  initIndirectChart() {

    const chartComp = this.selectComponent('#mychart-dom-indirect');
    if (chartComp) {
      chartComp.init((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: dpr
        });
        canvas.setChart(chart);
        chart.setOption({
          title: {
            text: '',
            left: 'left',
            fontSize: 6
          },
          grid: {
            containLabel: true,
            top: '5%',
            left: '5%',
            right: '7%',
            bottom: '3%'
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            formatter: function (params) {
              const param = params[0];
              return `${param.axisValue}\n${param.seriesName}: ${param.value} μmol/L`;
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.xAxis
          },
          yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [{
              name: '直接胆红素',
              type: 'line',
              smooth: true,
              data: this.data.directBilirubin
            },

          ]
        });
        this.indirectChart = chart;
        return chart;
      });
    }
  },
});