import * as echarts from '../ec-canvas/echarts.min';
import { Post } from "../../../lib/request/method"


Component({
  lifetimes: {
    async attached() {
      const careId = wx.getStorageSync('careId');
      if (careId) {
        await this.getCareDetail(careId);
      }
    }
  },
  properties: {
  },
  data: {
    charts: {} as any,
    careDetail: {} as any,
    ec: {
      lazyLoad: true
    }
  },
  methods: {
    async getCareDetail(id: number) {
      const res = await Post(
        `/patientCrManage/getPcrProcessById/${id}`,
        {},
        {
          transform({ data }: any) {
            return data;
          },
        }
      );
      if (res) {
        this.setData({
          careDetail: res,
        }, () => {
          this._getData();
        });
      }
    },
    async _getData() {
      if (this.data.careDetail.patientConditioningScores?.length > 0) {
        const option = {
          title: {
            text: "健康评分",
            left: "center",
            top: 0,
            textStyle: {
              fontSize: 18
            }
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: this.data.careDetail.patientConditioningScores.map((item: any) => item.time4),
            axisLabel: {
              interval: 0,
              rotate: 45,
              fontSize: 12
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: "value",
            name: "",
            min: 0,
            max: 100
          },
          series: [
            {
              data: this.data.careDetail.patientConditioningScores.map((item: any) => item.score),
              type: "line",
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: {
                color: "#1976d2",
                width: 3
              },
              itemStyle: {
                color: "#1976d2",
                borderWidth: 2,
                borderColor: '#fff'
              },
              label: {
                show: true,
                position: 'top',
                formatter: function(params: any) {
                  return params.value;
                },
                fontSize: 12,
                color: '#666'
              }
            },
          ],
          grid: {
            left: '5%',
            right: '5%',
            bottom: '15%',
            top: '15%',
            containLabel: true
          },
        };
        // 获取组件实例
        const ecComponent = this.selectComponent('#effectChart');
        if (ecComponent) {
          ecComponent.init((canvas: any, width: number, height: number, dpr: number) => {
            const chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr
            });
            canvas.setChart(chart);
            chart.setOption(option);
            return chart;
          });
        }
      }
    },
    onInit(canvas: any, width: number, height: number, dpr: number) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      canvas.setChart(chart);
      return chart;
    }
  }
})