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

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      lazyLoad: true
    },
    ec2: {
      lazyLoad: true
    },
    ec3: {
      lazyLoad: true
    },
    ec4: {
      lazyLoad: true
    },
    activeIndex: 0,
    sfData: {},
    sfListLength: 0,
    articles: [],
    articlesLength: 0,
    heightData: [],
    weightData: [],
    heightChart: null,
    weightChart: null,
    carList: [],
    carLength: 0,
    userInfo: {},
    totalBilirubin: [],
    directBilirubin: []
  },
  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);
    console.log(info)
    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 = []
    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.directBilirubin)
      })
    }

    this.setData({
      heightData,
      weightData,
      totalBilirubin,
      directBilirubin
    });
    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;
    }
  },

  // 初始化身高图表
  initHeightChart() {
    const standardHeight = this.standardHeight;
    const standardLower = standardHeight.map(item => item[0]);
    const standardUpper = standardHeight.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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
          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: standardLower,
              lineStyle: { opacity: 0 },
              stack: '标准范围',
              areaStyle: { opacity: 0 },
              tooltip: { show: false }
            },
            {
              name: '标准范围',
              type: 'line',
              symbol: 'none',
              data: standardRange,
              lineStyle: { opacity: 0 },
              stack: '标准范围',
              areaStyle: { color: 'rgba(135,206,250,0.3)' },
              tooltip: { show: false }
            }
          ]
        });
        return chart;
      });
    }
  },

  // 初始化体重图表
  initWeightChart() {
    const standardWeight = this.standardWeight;
    const standardLower = standardWeight.map(item => item[0]);
    const standardUpper = standardWeight.map(item => item[1]);
    const standardRange = standardUpper.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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
          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: standardLower,
              lineStyle: { opacity: 0 },
              stack: '标准范围',
              areaStyle: { opacity: 0 },
              tooltip: { show: false }
            },
            {
              name: '标准范围',
              type: 'line',
              symbol: 'none',
              data: standardRange,
              lineStyle: { opacity: 0 },
              stack: '标准范围',
              areaStyle: { color: 'rgba(135,206,250,0.3)' },
              tooltip: { show: false }
            }
          ]
        });
        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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
          yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
          series: [
            {
              name: '总胆红素',
              type: 'line',
              smooth: true,
              data: this.data.totalBilirubin
            },

          ]
        });
        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: '1%', right: '5%', 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: ['出生', '1月', '2月', '3月', '4月', '5月', '6月'] },
          yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
          series: [
            {
              name: '直接胆红素',
              type: 'line',
              smooth: true,
              data: this.data.directBilirubin
            },

          ]
        });
        return chart;
      });
    }
  },
});