<template>
    <div class="consumptionCompare">
        <canvas  class="consumption" canvas-id="consumption" id="consumption" @tap="tap" />
<!--        <image v-if="consumptionPath" :src="consumptionPath" class="consumption"></image>-->
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "consumptionCompare",
    data() {
        return {
            width: 0,
            consumptionPath:''
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.handleCarData(value)
            },
            immediate: true
        }
    },
    methods: {
        tap(e){
            uChartsInstance[e.target.id].showToolTip(e, {
                formatter: (item, category, index, opts) => {
                  console.log('item',item)
                  console.log('opts',opts)
                    if (item.name === '客单数'){
                        return item.name + ':'+ item.data + '笔'
                    }else{
                        return item.name + ':'+ item.data + '辆,交易概率: ' + ((opts.series[0].data[index] / opts.series[1].data[index])*100).toFixed(2) + '%'
                    }

                }
            });
            uChartsInstance[e.target.id].touchLegend(e);
        },
        // 处理传入的数据
        handleCarData(value) {
            let res = value
            let config = {
                customerMax:value.series[0].max,
                carLitMax:value.series[1].max
            }
            this.drawCharts('consumption', res,config)
        },
        getNumber(value){
            let number = value / 40
            number = Math.ceil(number)
            return number * 40
        },
        drawCharts(id, data,config) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 32
            uChartsInstance[id] = new uCharts({
                type: "area",
                context: ctx,
                width:  _this.width,
                height: 240,
                categories: data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00B6FF"],
                padding: [15, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                xAxis: {
                    disableGrid: true,
                    axisLineColor:"#F2F2F5",
                    formatter: (val)=>{
                        if (val==='0:00' || val==='4:00'|| val==='8:00'|| val==='12:00'|| val==='16:00'|| val==='20:00'|| val==='23:00'){
                            if (val === '23:00'){
                                return '24:00'
                            }else{
                                return  val
                            }
                        }else{
                            return ''
                        }
                    }
                },
                yAxis:{
                    showTitle:true,
                    splitNumber:4,
                    gridColor:'#F2F2F5',
                    data: [
                        {
                            index:0,
                            title:'单位: 笔',
                            min: 0,
                            max:_this.getNumber(config.customerMax),
                            position: "left",
                            titleOffsetY: -5,
                          axisLineColor:"#F2F2F5"
                        },
                        {
                            index:1,
                            title:'单位: 辆',
                            min: 0,
                            max:_this.getNumber(config.carLitMax),
                            position: 'right',
                            titleOffsetY: -5,
                            titleOffsetX: -15,
                          axisLineColor:"#F2F2F5"
                        },
                    ]
                },
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    area: {
                        type: "curve",
                        opacity: 0.9,
                        addLine: true,
                        width: 2,
                        gradient: true,
                        activeType: "hollow"
                    }
                }
            });
            setTimeout( ()=>{
                // this.canvasToTempImage('consumption')
            },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.consumptionPath = base64
                            }
                        })
                    }
                }
            },this)
        },
    }
}
</script>

<style scoped lang="scss">
.consumptionCompare{
    width: 100%;
    margin-top: 12px;
    .consumption{
        width: 100%;
        height: 220px;
    }
}
</style>
