<template>
    <div >
            <div class="carTypeTime" >
              <qiunDataCharts
                type="column"
                :opts="opts"
                :chartData="res"
                :animation="false"
                :canvas2d="true"
                :inScrollView="true"
                tooltipFormat="carTypeTime"
              />
<!--                <canvas style="width: 100vw;height: 252px;position: fixed;left: 100vw"  class="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>-->
<!--                <image style="width: 100vw;height: 252px;" v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>-->
            </div>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
    name: "carTypeTime",
    components: {Analyse, NoData,qiunDataCharts},
    data() {
        return {
            width:0,
            isShowData:false,
            info:{},
            carTypeTimePath:'',//图片路径
            analyseInfo:{
                analysisins_type: 1104,
                analysisins_format: 2000
            },
            num:0,
          opts:{},
          res:{}
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.info = value
                this.carTypeTimePath=''
                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('opts',opts)
              if (this.num===0){
                this.num++
                return '日均车辆' + ":" + opts.series[0].valueList[index] + '辆,占比' + item.data + '%';
              }else{
                this.num=0
                return '平均停留' + ":" + item.data + '分钟';
              }
            }
          });
          uChartsInstance[e.target.id].touchLegend(e);
        },
        // 处理传入的数据
        handleCarData(value) {
            let res = {
                categories: value.categories,
                series: value.series
            }
            let config = {
                max:this.getSplitNumber(value.series[1].max)
            }
            this.res = res
          this.opts = {
            categories:res.categories,
            series: res.series,
            animation: false,
            canvas2d: true,
            rotate: false,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#1E80FF","#00B6FF"],
            padding: [30,30,0,0],
            dataLabel: false,
            enableScroll: false,
            legend: {
              show: true,
              position: "bottom",
              lineHeight: 25,
              float: 'center'

            },
            xAxis:{
              disableGrid: true,
              axisLineColor:"#F2F2F5"
            },
            yAxis:{
              showTitle:true,
              gridColor:'#F2F2F5',
              data: [
                {
                  title:'单位: %',
                  min: 0,
                  max: 100,
                  titleOffsetY: -5,
                  axisLineColor:"#F2F2F5"
                },
                {
                  title:'单位: 分钟',
                  min: 0,
                  max: config.max,
                  position: 'right',
                  titleOffsetY: -5,
                  titleOffsetX: 5,
                  axisLineColor:"#F2F2F5"
                },
              ]
            },
            extra: {
              column: {
                type: "group",
                width: 12,
                seriesGap:2,
                categoryGap: 24,
                activeBgColor: "#000000",
                activeBgOpacity: 0.08,
              }
            }
          }
            // this.drawCharts('carTypeTime', res,config)
        },
        getSplitNumber(value){
            if (value === 0){
                return 5
            }else{
                let sum = value + value *0.2
                return  Number((sum / 5).toFixed(0)) * 5
            }
        },
        drawCharts(id, data,config) {
            const ctx = uni.createCanvasContext(id, this);
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth-16
            uChartsInstance[id] = new uCharts({
                type: "column",
                context: ctx,
                width: this.width,
                height: 265,
                categories:data.categories,
                series: data.series,
                animation: false,
                canvas2d: true,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF","#00B6FF"],
                padding: [30,30,0,0],
                dataLabel: false,
                enableScroll: false,
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                xAxis:{
                    disableGrid: true,
                  axisLineColor:"#F2F2F5"
                },
                yAxis:{
                    showTitle:true,
                  gridColor:'#F2F2F5',
                    data: [
                        {
                            title:'单位: %',
                            min: 0,
                            max: 100,
                            titleOffsetY: -5,
                            axisLineColor:"#F2F2F5"
                        },
                        {
                            title:'单位: 分钟',
                            min: 0,
                            max: config.max,
                            position: 'right',
                            titleOffsetY: -5,
                            titleOffsetX: 5,
                            axisLineColor:"#F2F2F5"
                        },
                    ]
                },
                extra: {
                    column: {
                        type: "group",
                        width: 12,
                        seriesGap:2,
                        categoryGap: 24,
                        activeBgColor: "#000000",
                        activeBgOpacity: 0.08,
                    }
                }
            });
            setTimeout( ()=>{
                this.canvasToTempImage('carTypeTime')
            },1000)
        },
        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.carTypeTimePath = base64
                            }
                        })
                    }
                }
            },this)
        },
    }
}
</script>

<style scoped lang="scss">
.carTypeTime{
  width: calc(100vw - 16px);
    height: 252px;
    .canvas{
        width: 100%;
        height: 100%;
    }
}
</style>
