const app = getApp()
import * as echarts from '../../../commpents/ec-canvas/echarts'
Page({
    data: {
        frameStyle: { useTop: true, name: '付费情况', leftArrow: true, useBar: false },
    },
    // 返回
    back(e) {
        wx.navigateBack({ delta: 1 })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },
    // 监听用户是否登录
    watchLogin: async function () {
        const that = this;
        wx.getStorage({
            key: 'user',
            success: async res => {
                that.setData({
                    ec: {
                        onInit: that.initChart
                    }
                })
                // 模拟请求
                var times = setTimeout(async function () {
                    // 数据
                    that.data.xdata = [
                        { value: 2, name: '1月(钱数)' },
                        { value: 10, name: '2月(钱数)' },
                        { value: 19, name: '3月(钱数)' },
                        { value: 20, name: '4月(钱数)' },
                        { value: 70, name: '5月(钱数)' },
                        { value: 9, name: '6月(钱数)' },
                        { value: 12, name: '7月(钱数)' },
                        { value: 41, name: '8月(钱数)' },
                        { value: 31, name: '9月(钱数)' },
                        { value: 13, name: '10月(钱数)' },
                        { value: 16, name: '11月(钱数)' },
                        { value: 10, name: '12月(钱数)' }
                    ];
                    clearTimeout(times);
                }, 1000)
            },
            fail: async res => {
                wx.redirectTo({ url: '/pages/index/index' })
            }
        })
    },
    // 饼图
    initChart(canvas, width, height, dpr) {
        let that = this;
        // 由于请求数据有延迟所以写一个时间函数，当数据存在的时候再执行绘制
        var times = setInterval(function () {
            var xdata = that.data.xdata;
            if (xdata) {
                clearInterval(times)
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // new
                });
                canvas.setChart(chart);
                var option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: xdata,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                chart.setOption(option, true);
                return chart;
            }
        }, 100)
    },
    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () { },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        const that = this;
        // 监听用户是否登录
        that.watchLogin();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },


    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {

    },
})