<template>
    <div class="main">
        <canvas class="canvas" canvas-id="monthTotal" id="monthTotal" @tap="handleTap"/>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "monthTotal",
    data(){
        return {

        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.handleCarData(value)
            },
            immediate:true,
            deep:true
        }
    },
    methods:{
        handleTap(e){
            uChartsInstance[e.target.id].showToolTip(e,{
                formatter: (item, category, index, opts) => {
                    console.log('item',item)
                    console.log('index',index)
                    console.log('opts',opts)
                    let text = ''
                    console.log('item.name.slice(5,10)',item.name.slice(5,10))
                    let type = item.name.slice(5,10)
                    let time = opts.series[0].info[index].year
                    if (type === '车流量'){
                        if (`${time}年车流量` === item.name){
                            let showTime = opts.series[0].info[index].year.toString().slice(2,5)
                            text = `${showTime}年入区 ${opts.series[0].info[index].allCarCount?this.$util.fmoney(opts.series[0].info[index].allCarCount):''} 辆`
                        }else{
                            let showTime = opts.series[1].info[index].year.toString().slice(2,5)
                            text = `${showTime}年入区 ${opts.series[1].info[index].allCarCount?this.$util.fmoney(opts.series[1].info[index].allCarCount):''} 辆`
                        }
                        return text
                    }else{
                        if (`${time}年交易额` === item.name){
                            let showTime = opts.series[2].year.toString().slice(2,5)
                            console.log('showTime',showTime)
                            text = `${showTime}年金额 ${opts.series[2].info[index].money?this.$util.fmoney(opts.series[2].info[index].money):''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
                        }else{
                            let showTime = opts.series[3].year.toString().slice(2,5)
                            text = `${showTime}年金额 ${opts.series[3].info[index].money?this.$util.fmoney(opts.series[3].info[index].money):''} 元, 单车消费 ${opts.series[1].info[index].allCarCount?((opts.series[1].info[index].money) / opts.series[1].info[index].allCarCount).toFixed(2):''} 元`
                        }
                        return text
                    }
                    // if (item.name.slice(5,10) === '车流量'){
                    //
                    // }

                    // if (item.name === '车流量'){
                    //     if (opts.series[0].info[index].allCarCount && opts.series[0].info[index].rate){
                    //         text = `入区 ${opts.series[0].info[index].allCarCount?opts.series[0].info[index].allCarCount:''} 辆, 入区率 ${opts.series[0].info[index].rate?opts.series[0].info[index].rate:''} %`
                    //     }else if (!opts.series[0].info[index].allCarCount){
                    //         text = `入区0辆`
                    //     }
                    //     return text
                    // }else{
                    //     if (opts.series[0].info[index].allCarCount){
                    //         return `金额 ${opts.series[0].info[index].money?opts.series[0].info[index].money:''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
                    //     }else{
                    //         return `金额 ${opts.series[0].info[index].money?opts.series[0].info[index].money:''} 元`
                    //
                    //     }
                    // }

                }
            });
        },
        // 处理传入的数据
        handleCarData(value) {
            let res = {
                categories: value.categories,
                series: value.series
            }
            let config={
                carMax:value.series[0].max > value.series[1].max ? this.getSplitNumber(value.series[0].max):this.getSplitNumber(value.series[1].max),
                moneyMax:value.series[2].max > value.series[3].max ? this.getSplitNumber(value.series[2].max):this.getSplitNumber(value.series[3].max)
            }
            this.drawCharts('monthTotal', res, config)
        },
        getSplitNumber(value){
            if (value === 0){
                return 5
            }else{
                let sum = value + value *0.2
                if (sum>0 && sum<5){
                    return 5
                }else{
                    return  Number((sum / 5).toFixed(0)) * 5
                }
            }
        },
        drawCharts(id, data,config) {
            const ctx = uni.createCanvasContext(id, this);
            let phoneInfo = uni.getStorageSync('phoneInfo')
            let width = phoneInfo.screenWidth-32
            uChartsInstance[id] = new uCharts({
                type: "mix",
                context: ctx,
                width: width,
                height: 300,
                categories: data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                canvas2d: true,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00B6FF","#38C275","#6B6FFF","#6B85AE"],
                padding: [35, 10, 5, 5],
                dataLabel: false,
                enableScroll: false,
                xAxis: {
                    disabled: false,
                    disableGrid: true,
                    axisLine: false,
                    fontColor: '#777777',
                    fontSize:data.categories.length<10 ? 13 : 11
                },
                yAxis:{
                    showTitle:true,
                    data:[{
                        position: "left",
                        title: '车流量 / 万辆 ',
                        disabled: false,
                        axisLine: false,
                        titleOffsetY: -5,
                        titleOffsetX: 25,
                        min: 0,
                        max:config.carMax
                    },
                    {
                        position: "right",
                        title: '交易金额 / 万元',
                        disabled: false,
                        axisLine: false,
                        titleOffsetY: -5,
                        titleOffsetX: -15,
                        min: 0,
                        max:config.moneyMax
                    }]
                },
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float:'center',
                    itemGap: 30
                },
                extra: {
                    mix:{
                        column:{
                            type: "group",
                            width: 12,
                            activeBgColor: "#000000",
                            activeBgOpacity: 0.08
                        },
                        line:{
                            type: "curve",
                            width: 2,
                            activeType: "hollow"
                        }
                    }
                }
            });
        },
    }
}
</script>

<style scoped lang="scss">
.main{
    width: 100%;
    height: 300px;
    .canvas{
        width: 100%;
        height: 100%;
    }
}
</style>
