<template>
    <div style="min-height: 100px;">
            <div class="car">
                <div class="item" :style="{left: Serverpart_ID?'-16px':'0px',width: '200px'}">
                    <canvas style="width:200px;height:188px;position:fixed;left: 100%" v-if="!carNumPath" class="carNum" canvas-id="carNum" id="carNum"/>
                    <image style="left: 0" v-if="carNumPath" class="carNum" :src="carNumPath"></image>
                </div>
                <div class="item" :style="{right:Serverpart_ID? '-16px':'-33px',width: '200px'}">
                    <canvas style="width:200px;height:188px;position:fixed;left: 100%" v-if="!probabilityPath" class="carNum" canvas-id="probability" id="probability"/>
                    <image style="right: 0" v-if="probabilityPath" class="carNum" :src="probabilityPath"></image>
                </div>
            </div>
    </div>

</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "entryZone",
    data(){
        return {
            dataList :[],
            width:0,
            entryRate: '',// 入区率
            carNumAll : 0,// 一共的入区车流数
            carNumPath:'',//图片路径
            probabilityPath:'',//图片路径
            isShowData:false,
            analyseInfo:{
                analysisins_type: 1102,
                analysisins_format: 2000
            },
            allAddUpCount:0,
            allEntryAddUpRate:0,
          Serverpart_ID:''
        }
    },
    props:{
        carData:{
            type:Array,
            default:()=>[]
        },
        time:{
            type:String,
            default:''
        },
        month:{
            type:String,
            default:''
        }
    },

    watch:{
        carData:{
            handler(value){
                if (value.length>0){
                    this.isShowData = true
                }
                this.carNumPath = ''
                this.probabilityPath = ''
                this.dataList = value
                this.dataList.forEach(item=>{
                  item.AddUpCount = item.Vehicle_AddUpCount?this.$util.noDecimal(item.Vehicle_AddUpCount):0
                  allCount +=item.Vehicle_AddUpCount
                  allRate +=item.EntryAddUp_Rate
                  this.Serverpart_ID = item.Serverpart_ID
                })
                this.handleCarData(value)
                let allCount = 0
                let allRate = 0

                this.allAddUpCount = this.$util.noDecimal(allCount)
                this.allEntryAddUpRate = allRate.toFixed(2)
            },
            immediate:true,
            deep:true
        }
    },
    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?item.Entry_Rate:0
                    let text = item.Serverpart_Region + '区' + value .toFixed(2) + '%'
                    if (text.length<8){
                        //不要删区里面的空格！！！！
                        text = item.Serverpart_Region + '区  ' + value .toFixed(2) + '%'
                    }

                    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.drawCharts2('probability',probabilityRes,config)
        },
        drawCharts(id,data,config){
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: _this.Serverpart_ID?200:160,
                height: _this.Serverpart_ID?208:160,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF","#00C2FF"],
                padding: [5,5,5,5],
                dataLabel: false,
                enableScroll: false,
                title: {
                    name: config.title,
                    fontSize: 14,
                    color: "#341D00"
                },
                subtitle: {
                    name: config.subtitle,
                    fontSize: 10,
                    color: "#786B6C",
                },
                legend: {
                    show: _this.Serverpart_ID?true:false,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center',
                    fontSize:11,
                },
                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')
            },1000)
        },
        drawCharts2(id,data,config){
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: _this.Serverpart_ID?210:160,
                height: _this.Serverpart_ID?208:160,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF","#00C2FF"],
                padding: [5,5,5,5],
                dataLabel: false,
                enableScroll: false,
                title: {
                    name: config.title,
                    fontSize: 14,
                    color: "#341D00"
                },
                subtitle: {
                    name: config.subtitle,
                    fontSize: 10,
                    color: "#786B6C",
                },
                legend: {
                    show: _this.Serverpart_ID?true:false,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center',
                    fontSize:12,
                },
                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')
            },1000)
        },
         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;
    position: relative;
    .item{
        position: absolute;
        top: 0;
        height: 100%;
        .carNum{
          position: absolute;
            width: 100%;
            height: 100%;
        }
    }
}
.info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    .item{
        display: inline-block;
        .title{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #160002;
            margin-bottom: 2px;
        }
    }
    .other{
        flex: 1;
        display: flex;
        justify-content: space-between;
        .item{
            width: 45%;
            text-align: left;
            .title{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 20px;
                display: inline-block;
                width: 100%;
                .text{
                    display: inline-block;
                    width: 40%;
                    color: #786B6C;
                }
                .textRight{
                    display: inline-block;
                    width: 60%;
                    text-align: right;
                    color: #786B6C;
                }
            }
            .box{
                text-align: left;
                .value{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #786B6C;
                    line-height: 20px;
                    display: inline-block;
                    width: 100%;
                    .text{
                        display: inline-block;
                        width: 40%;
                        color: #786B6C;
                    }
                    .textRight{
                        display: inline-block;
                        width: 60%;
                        text-align: right;
                        color: #786B6C;
                    }
                }
            }
        }
    }
}
</style>
