<template>
    <div class="revenueTrends">
        <canvas  class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "revenueTrends",
    data() {
        return {
          trendsPath:'',
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.trendsPath = ''
                this.handleCarData(value)
            },
            immediate: true
        }
    },
    methods: {
        handleTap(e){
            uChartsInstance[e.target.id].showToolTip(e,{
                formatter: (item, category, index, opts) => {
                    const date = new Date()
                    let month =  date.getMonth() + 1
                    if (item.name === '今年'){
                        if (index + 1 <= month){
                            return item.name + ":" + item.data + ',' + `同比增长${((opts.series[0].data[index] - opts.series[1].data[index]) /opts.series[1].data[index] * 100).toFixed(2)}%`;
                        }else{
                            return item.name + ":" + item.data
                        }
                    }else{
                        return item.name + ":" + item.data;
                    }
                }
            });
            uChartsInstance[e.target.id].touchLegend(e);
        },
        // 处理传入的数据
        handleCarData(value) {
            let res = value
            this.drawCharts('trends', res)
        },
        getNumber(value){
            let number = value / 40
            number = Math.ceil(number)
            return number * 40
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width = phoneInfo.screenWidth - 16
            uChartsInstance[id] = new uCharts({
                type: "area",
                context: ctx,
                width: _this.width ,
                height: 213,
                categories: data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF","#00B6FF"],
                padding: [15, 15, 5, 5],
                dataLabel: false,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                xAxis: {
                    disableGrid: true,
                    axisLineColor:'#F2F2F5'
                },
                yAxis: {
                    splitNumber:4,
                    showTitle:false,
                    gridColor:'#F2F2F5',
                    data:[
                        {
                            min:0,
                            max:_this.getNumber(data.max),
                            titleOffsetY:-5,
                            titleOffsetX:-5,
                            fontSize:12,
                            axisLineColor:'#F2F2F5'
                        }
                    ]
                },
                extra: {
                    area: {
                        type: "curve",
                        opacity: 0.8,
                        addLine: true,
                        width: 2,
                        gradient: true,
                        activeType: "hollow"
                    }
                }
            });
          setTimeout( ()=>{
            // this.canvasToTempImage('trends')
          },2000)
        },
      canvasToTempImage(id){
        uni.canvasToTempFilePath({
          canvasId:id,
          complete:(res)=>{
            if (res.tempFilePath){
              uni.getFileSystemManager().readFile({
                filePath: res.tempFilePath,
                encoding: 'base64',
                success: res => {
                  let base64 = 'data:image/png;base64,' + res.data;
                  this.trendsPath = base64
                }
              })
            }
          }
        },this)
      },
    }
}
</script>

<style scoped lang="scss">
.revenueTrends{
    width: 100%;
    .trends{
        width: calc(100vw - 32px);
        height: 208px;
    }
}
</style>
