<template>
    <div class="timePeriodAnalysis">
      <QiunDataCharts
          type="area"
          :opts="opts"
          :chartData="res"
          :animation="false"
          :inScrollView="true"
          :canvas2d="true"
          tooltipFormat="timePeriodAnalysis"
      />
<!--        <canvas style="width: 100vw;height: 200px;position: fixed;left: 100%"  class="timePeriod" canvas-id="timePeriod" id="timePeriod" @tap="tap"/>-->
<!--        <image style="width: 100vw;height: 200px" class="timePeriod" v-if="timePeriodPath" :src="timePeriodPath"></image>-->
<!--      <image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>-->
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
    name: "timePeriodAnalysis",
  components: {QiunDataCharts},
    data() {
        return {
            width:0,
            timePeriodPath:'',
          opts:{},
          res:{}
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.handleCarData(value)
            },
            immediate: true
        }
    },
    methods: {
      tap(e){
        uChartsInstance[e.target.id].showToolTip(e, {
          formatter: (item, category, index, opts) => {
              return item.name + ':'+ item.data + '%,' +'数量:' + opts.series[0].number[index] + '笔,金额:' +opts.series[0].money[index] +'元'
          }
        });
        uChartsInstance[e.target.id].touchLegend(e);
      },
        // 处理传入的数据
        handleCarData(value) {
            let res = value
          this.res = res
          this.opts = {
            categories:res.categories,
            series: res.series,
            animation: false,
            rotate: false,
            rotateLock: false,
            background: "#FFFFFF",
            color: ["#2483FF"],
            padding: [15, 10, 5, 5],
            dataLabel: false,
            enableScroll: false,
            xAxis: {
              disableGrid: true,
              format:"timePeriodAnalysisFormat",
            },
            yAxis: {
              disableGrid: false,
              gridType: "solid",
              gridColor:'#F2F2F5'
            },
            legend: {
              show: false,
              position: "bottom",
              lineHeight: 25,
              float: 'center',
            },
            extra: {
              area: {
                type: "curve",
                opacity: 0.2,
                addLine: true,
                width: 2,
                gradient: true,
                activeType: "hollow"
              }
            }
          }
            // this.drawCharts('timePeriod', 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: "area",
                context: ctx,
                width: _this.width,
                height: 200,
                categories:data.categories,
                series: data.series,
                animation: false,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#2483FF"],
                padding: [15, 10, 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: {
                    disableGrid: false,
                    gridType: "solid",
                    gridColor:'#F2F2F5'
                },
                legend: {
                    show: false,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center',
                },
                extra: {
                    area: {
                        type: "curve",
                        opacity: 0.2,
                        addLine: true,
                        width: 2,
                        gradient: true,
                        activeType: "hollow"
                    }
                }
            });
            setTimeout( ()=>{
                this.canvasToTempImage('timePeriod')
            },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.timePeriodPath = base64
                            }
                        })
                    }
                }
            },this)
        },
    }
}
</script>

<style scoped lang="scss">
.timePeriodAnalysis{
    width: calc(100vw - 32px);
    height: 200px;
    .timePeriod{
        width: 100%;
        height: 200px;
    }
}
</style>
