import * as echarts from '../../ec-canvas/echarts';
function initPieChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: 400,
        height: 250,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    var option = {
        backgroundColor: "#3C4043",
        series: [{
            label: {
                normal: {
                    fontSize: 14
                }
            },
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['0%', '70%'],
            data: [{
                value: 55,
                name: '数码产品',
                id: 1
            }, {
                value: 20,
                name: '零食'
            }, {
                value: 10,
                name: '娱乐'
            }, {
                value: 20,
                name: '房贷'
            }, {
                value: 38,
                name: '房租'
            }]
        }]
    };
    chart.setOption(option);
    chart.on('click', 'series.pie', function(param) {
        console.log(param.data)
    });
    return chart;
}

function initLineChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: 400,
        height: 300,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);

    var option = {
        title: {
            text: '的撒打',
            left: 'center'
        },
        legend: {
            data: ['支出', '收入', '转账','还款'],
            top: 20,
            left: 'center',
            backgroundColor: 'white',
            z: 100
        },
        grid: {
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            // show: false
        },
        yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
            // show: false
        },
        series: [{
            name: '支出',
            type: 'line',
            smooth: true,
            data: [18, 36, 65, 30, 78, 40, 33]
        }, {
            name: '收入',
            type: 'line',
            smooth: true,
            data: [12, 50, 51, 35, 70, 30, 20]
        }, {
            name: '转账',
            type: 'line',
            smooth: true,
            data: [10, 30, 31, 50, 40, 20, 10]
        }, {
            name: '还款',
            type: 'line',
            smooth: true,
            data: [50, 80, 11, 25, 30, 110, 20]
        }]
    };
    chart.setOption(option);
    return chart;
}
Page({
    data: {
        // 指定选择区间起始值
        start: '2000-01-01 00:00:00',
        end: '2030-09-09 12:12:12',
        showDateVisible:false,
        showDate:'2022-01',
        accountList: [
            {"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
        ],
        ecPie: {
            onInit: initPieChart
        },
        ecLine: {
            onInit: initLineChart
        }
    },
    onLoad: function (options) {

    },
    onShow: function () {
        if (wx.canIUse('hideHomeButton')) {
            wx.hideHomeButton()
        }
    },
    showPicker(e) {
        const { mode } = e.currentTarget.dataset;
        this.setData({
            mode,
            [`${mode}Visible`]: true,
        });
    },
    hidePicker() {
        const { mode } = this.data;
        this.setData({
            [`${mode}Visible`]: false,
        });
    },
    onConfirm(e) {
        const { value } = e.detail;
        const { mode } = this.data;
        console.log('confim', value);
        this.setData({
            [mode]: value
            // [`${mode}Text`]: value,
        });
        this.hidePicker();
    }

});