// xtends//statics/index/index.js
import Scene from '../../../pages/index/scene'
import uCharts from '../../libs/u-charts';
const math = require('../../../utils/math')
const app = getApp()

var that;
var canvaColumn = null;
var windowWidth = 0;

Scene({
  /**
   * 页面的初始数据
   */
  data: {
    cWidth: '',
    cHeight: '',
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this
    windowWidth = wx.getSystemInfoSync().windowWidth
    this.data.cWidth = windowWidth - this.rpx2px(100)
    // math.divide
    this.data.cHeight = this.rpx2px(400)
    this.getServerData()
  },
  rpx2px: function(rpx) {
    return rpx / 750 * windowWidth;
  },
  getServerData: function() {
    wx.request({
      url: 'https://www.ucharts.cn/data.json',
      success: function (res) {
        let Column = { categories: [], series: [] };
        Column.categories = res.data.data.Pie.categories;
        Column.series = res.data.data.Pie.series;
        // 自定义标签颜色和字体大小
        // Column.series[1].textColor = 'red';
        // Column.series[1].textSize = 18;
        that.showColumn("canvasColumn", Column);
      },
      fail: () => {
        console.log("请点击右上角【详情】，启用不校验合法域名");
      },
    })
  },
  showColumn(canvasId, chartData) {
    let ctx = wx.createCanvasContext(canvasId, this);
    canvaColumn = new uCharts({
      type: 'ring',
      context: ctx,
      // fontSize: 11,
      background: '#FFFFFF',
      pixelRatio: 1,
      // animation: true,
      // categories: chartData.categories,
      series: chartData.series,
      color: [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ],
      dataLabel: true,
      width: that.data.cWidth,
      height: that.data.cHeight,
      legend: {
        show: true,
        position: "right",
        float: "center",
        padding: 5,
        margin: 5,
        fontSize: 13,
        fontColor: "#666666",
        lineHeight: 25,
        hiddenColor: "#CECECE",
        itemGap: 10
      },
      extra: {
        ring: {
          ringWidth: 30,
          centerColor: "#FFFFFF",
          activeOpacity: 0.5,
          activeRadius: 10,
          offsetAngle: 0,
          customRadius: 0,
          labelWidth: 15,
          border: true,
          borderWidth: 3,
          borderColor: "#FFFFFF",
          linearType: "none"
        }
      }
    });
  },
  touchColumn(e) {
    canvaColumn.showToolTip(e, {
      formatter: function (item) {
        console.log(item)
        return item.name + ':' + item.data
      }
    })
  }
})