// pages/skinRecord/components/analysis/analysis.js
import * as echarts from '../../../../components/local/ec-canvas/echarts'
import { getPrePage } from '../../../../utils/util'

Component({
  /**
   * 组件的属性列表
   */
  options: {
    addGlobalClass: true,
  },
  properties: {
    analysis: {
      type: Object,
      value: null,
      observer(newVal, oldVal) {
        if (newVal && this.data.current == 0) {
          console.log(this.data.current)
          this.init()
        }
      },
    },
    current: {
      type: String,
      value: '',
      observer(newVal) {
        if (this.data.analysis && newVal == 0) {
          this.init()
        }
      },
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    percent: 0,
    ec: {
      lazyLoad: true,
    },
  },

  lifetimes: {
    attached: function () {
      this.setData({
        percent: 80,
      })
      // this.init()
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      let radarVal = []
      let seriesVal = []
      this.data.analysis.data.forEach((item) => {
        radarVal.push({ name: item.name, max: 100 })
        seriesVal.push(item.score)
      })
      console.log(radarVal)
      console.log(seriesVal)
      this.ecComponent = this.selectComponent('#mychart-dom-bar')
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr, // new
        })
        var option = {
          backgroundColor: '#FFF8FB',
          color: ['#FA7D22', 'red'],
          xAxis: {
            show: false,
          },
          yAxis: {
            show: false,
          },
          radar: {
            shape: 'circle',
            splitNumber: 4,
            indicator: radarVal,
            axisName: {
              // formatter: '【{value}】',
              color: '#333333',
              fontSize: 10,
            },
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(218, 252, 191, 0.35)',
                  'rgba(255, 233, 185, 0.34)',
                  'rgba(255, 226, 208, 0.36)',
                  'rgba(255, 237, 237, 0.43)',
                ],
                // shadowColor: 'rgba(0, 0, 0, 0.2)',
                // shadowBlur: 10
              },
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
            splitLine: {
              lineStyle: {
                color: 'transparent',
              },
            },
          },
          series: [
            {
              name: '预算 vs 开销',
              type: 'radar',
              data: [
                {
                  value: seriesVal,
                  areaStyle: {
                    color: '#FA7D22',
                  },
                  lineStyle: {
                    type: 'dotted',
                  },
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value
                    },
                  },
                },
                // {
                //   value: [300, 430, 150, 300, 420, 250],
                //   name: '开销'
                // },
              ],
            },
          ],
        }

        chart.setOption(option)

        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart
      })
    },
    goToDetail() {
      getPrePage().setData(
        {
          current: 2,
        },
        () => {
          wx.pageScrollTo({
            scrollTop: 0,
            duration: 300,
          })
        }
      )
    },
  },
})