<template>
    <div class="consumPrefer">
        <canvas v-if="!preferPath" class="prefer" canvas-id="prefer" id="prefer"/>
        <image v-if="preferPath" class="prefer" :src="preferPath"></image>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "consumPrefer",
    data() {
        return {
            width:0,//手机宽度
            preferPath:''//路径
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.handleCarData(value)
            },
            immediate: true
        }
    },
    methods: {
        // 处理传入的数据
        handleCarData(value) {
            console.log('value11111',value)
            let res = value
            this.drawCharts('prefer', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 32
            uChartsInstance[id] = new uCharts({
                type: "radar",
                context: ctx,
                width: _this.width,
                height: 294,
                categories: data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00C2FF"],
                padding: [5, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    radar: {
                        gridType: "radar",
                        gridColor: "#CCCCCC",
                        gridCount: 3,
                        opacity: 0.2,
                        max: data.max,
                        labelShow: true,
                        border: true
                    }
                }
            });
            setTimeout( ()=>{
                this.canvasToTempImage('prefer')
            },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.preferPath = base64
                            }
                        })
                    }
                }
            },this)
        },
    }
}
</script>

<style scoped lang="scss">
.consumPrefer{
    width: 100%;
    height: 274px;
    .prefer{
        width: 100%;
        height: 100%;
    }
}
</style>
