<template>
    <div class="car">
        <div class="item">
            <canvas v-if="!carNumPath" class="carNum" canvas-id="carNum" id="carNum"/>
            <image v-if="carNumPath" class="carNum" :src="carNumPath"></image>
        </div>
        <div class="item">
            <canvas v-if="!probabilityPath" class="carNum" canvas-id="probability" id="probability"/>
            <image v-if="probabilityPath" class="carNum" :src="probabilityPath"></image>
        </div>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "entryZone",
    data(){
        return {
            entryRate: '',// 入区率
            carNumAll : 0,// 一共的入区车流数
            carNumPath:'',//图片路径
            probabilityPath:''//图片路径
        }
    },
    props:{
        carData:{
            type:Array,
            default:()=>[]
        }
    },
    watch:{
        carData:{
            handler(value){
                this.handleCarData(value)
            }
        }
    },
    methods:{
        // 处理传入的数据
        handleCarData(value){
            let data = []
            let carSum = 0 //一共多少辆车
            let Vehicle_CountAll=0  //入区车流量
            let SectionFlow_CountAll=0 //车流量
            value.forEach(item=>{
                data.push({name:item.Serverpart_Region+'区   '+item.Vehicle_Count  ,value:item.Entry_Rate })
                carSum+=item.Vehicle_Count
                Vehicle_CountAll+=item.Vehicle_Count
                SectionFlow_CountAll+=item.SectionFlow_Count
            })
            this.carNumAll = carSum
            let res = {
                series: [
                    {
                        data: data
                    }
                ]
            }
            let probabilityData = []
            value.forEach(item=>{
                    let value = item.Entry_Rate
                    let text = item.Serverpart_Region + '区' + value .toFixed(2) + '%'
                    if (text.length<8){
                        //不要删区里面的空格！！！！
                        text = item.Serverpart_Region + '区  ' + value .toFixed(2) + '%'
                    }
                    console.log('text.length',text.length)

                    probabilityData.push({
                        name: text,
                        value: Number(value.toFixed(2))
                    })
                })
            let probabilityRes = {
                    series:[
                        {
                            data: probabilityData
                        }
                    ]
                }
            // 只有当两个都不是0的时候才能计算入区率
            if (Vehicle_CountAll!==0 && SectionFlow_CountAll!==0){
                this.entryRate = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)+'%'
            }
            let configCarNum={
                title:this.carNumAll,
                subtitle:"昨日入区车流"
            }
            let config={
                title:this.entryRate,
                subtitle:"昨日入区率"
            }

            this.drawCharts('carNum' , res,configCarNum )
            this.drawCharts('probability',probabilityRes,config)
        },
        drawCharts(id,data,config){
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: 178,
                height: 208,
                series: data.series,
                animation: true,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#CAD0DA","#1E80FF"],
                padding: [5,5,5,5],
                dataLabel: false,
                enableScroll: false,
                title: {
                    name: config.title,
                    fontSize: 16,
                    color: "#341D00"
                },
                subtitle: {
                    name: config.subtitle,
                    fontSize: 12,
                    color: "#786B6C",
                },
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'
                },
                extra: {
                    ring: {
                        ringWidth: 14,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: -90,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF"
                    }
                }
            });
            setTimeout( ()=>{
                this.canvasToTempImage1('carNum')
                this.canvasToTempImage2('probability')
            },2000)
        },
         canvasToTempImage1(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.carNumPath = base64
                            }
                        })
                    }
                }
            },this)
        },
        canvasToTempImage2(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.probabilityPath = base64
                            }
                        })
                    }
                }
            },this)
        }
    }
}
</script>

<style scoped lang="scss">
.car{
    width: 100%;
    height: 188px;
    display: flex;
    .item{
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        .carNum{
            width: 100%;
            height: 100%;
        }
    }
}
</style>