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

    </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: "timeAnalysis",
    components: {Analyse, NoData,QiunDataCharts},
    data() {
        return {
            width:0,
            isShowData: false,
            analyseInfo:{
                analysisins_type: 1105,
                analysisins_format: 2000
            },
          preferPath:'',
          opts:{},
          res:{}
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                console.log('value',value)
                this.handleCarData(value)
            },
            immediate:true,
            deep:true
        }
    },
    methods: {
        getSplitNumber(value){
            if (value === 0){
                return 5
            }else{
                let sum = value + value *0.2
                if (sum>0 && sum<5){
                    return 5
                }else{
                    return  Number((sum / 5).toFixed(0)) * 5
                }
            }
        },
        //点击事件
        handleTap(e){
            uChartsInstance[e.target.id].touchLegend(e);
            uChartsInstance[e.target.id].showToolTip(e,{
              formatter: (item, category, index, opts) =>{
                return item.name + ":" + item.data + '分钟'
              }
            });
        },
        // 处理传入的数据
        handleCarData(value) {
            console.log('handleCarData',value)
            let res = {
                categories:value.categories,
                series:value.series
            }
            let max = this.getSplitNumber(value.max)
            this.res = res
            this.opts = {
            categories: res.categories,
            series: res.series,
            animation: false,
            rotate: false,
            canvas2d: true,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#1E80FF", "#00B6FF","#0FC862"],
            padding: [15, 30, 5, 5],
            dataLabel: false,
            enableScroll: false,
            xAxis: {
              disableGrid: true,
              formatter:(val)=>{
                if (val===0 || val===4 || val===8 || val===12 || val===16 || val===20 || val===23){
                  if (val===23){
                    return '24:00'
                  }else{
                    return `${val}:00`
                  }
                }else{
                  return ''
                }
              }
            },
            yAxis: {
              gridType: "dash",
              dashLength: 2,
              showTitle:true,
              data:[{
                title:'单位: 分钟',
                titleOffsetY: -5,
                min:0,
                max:max,
              }]
            },
            legend: {
              show: true,
              position: "bottom",
              lineHeight: 25,
              float: 'center'

            },
            extra: {
              line: {
                type: "curve",
                width: 2,
                activeType: "hollow"
              }
            }
          }

            // this.drawCharts('timeAnalysis', res,max)
        },
        drawCharts(id, data,max) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 16
            uChartsInstance[id] = new uCharts({
                type: "line",
                context: ctx,
                width: _this.width,
                height: 240,
                categories: data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                canvas2d: true,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00B6FF","#0FC862"],
                padding: [15, 30, 5, 5],
                dataLabel: false,
                enableScroll: false,
                xAxis: {
                    disableGrid: true,
                    formatter:(val)=>{
                        if (val===0 || val===4 || val===8 || val===12 || val===16 || val===20 || val===23){
                            if (val===23){
                                return '24:00'
                            }else{
                                return `${val}:00`
                            }
                        }else{
                            return ''
                        }
                    }
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2,
                    showTitle:true,
                    data:[{
                        title:'单位: 分钟',
                        titleOffsetY: -5,
                        min:0,
                        max:max,
                    }]
                },
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    line: {
                        type: "curve",
                        width: 2,
                        activeType: "hollow"
                    }
                }
            });
          setTimeout( ()=>{
            this.canvasToTempImage('timeAnalysis')
          },500)
        },
      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">
.timeAnalysis{
  width: calc(100vw - 16px);
  height: 220px;
  margin-top: 12px;
}
</style>
