<template>
    <div class="moneyCompare">
        <canvas v-if="!comparePath" class="compare" canvas-id="compare" id="compare"/>
        <image v-if="comparePath" class="compare" :src="comparePath"></image>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "moneyCompare",
    data() {
        return {
          width:0,
          comparePath:''
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                console.log('carDatawatch', value)
                this.comparePath = ''
                console.log('comparePath',this.comparePath)
                this.handleCarData(value)
            },
            deep:true
        }
    },
    methods: {
        // 处理传入的数据
        handleCarData(value) {
            let res = value
            let config = {
                price:''
            }
            if (value.type===0){
                config.price = '单位: 万元'
            }else if(value.type===1){
                config.price = '单位: 笔'
            }else if(value.type===2){
                config.price = '单位: 元'
            }
            this.drawCharts('compare', res,config)
        },
        getNumber(value){
            let number = value / 20
            number = Math.ceil(number)
            console.log(number)
            return number * 20
        },
        getNumberHundred(value){
            let number = value / 2000
            number = Math.ceil(number)
            console.log(number)
            return number * 2000
        },
        drawCharts(id, data,config) {
            console.log('data')
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width = phoneInfo.screenWidth
            uChartsInstance[id] = new uCharts({
                type: "column",
                context: ctx,
                width: _this.width,
                height: 208,
                categories: data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00B6FF","#ACB9CD"],
                padding: [15, 40, 5, 0],
                dataLabel: false,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    showTitle:true,
                    splitNumber:4,
                    data: [
                        {
                            min: 0,
                            max: data.type===1?_this.getNumberHundred(data.max):_this.getNumber(data.max),
                            title: config.price,
                            titleOffsetX:8,
                            titleOffsetY:-5,
                            fontSize:12,
                        }
                    ]
                },
                extra: {
                    column: {
                        type: "group",
                        width: 5,
                        seriesGap:4,
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08,
                        barBorderRadius:[3,3,0,0]
                    }
                }
            });
          setTimeout( ()=>{
            this.canvasToTempImage('compare')
          },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.comparePath = base64
                }
              })
            }
          }
        },this)
      },
    }
}
</script>

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