<template>
  <div class="main">
    <canvas  class="revenue" canvas-id="yearRevenue" id="yearRevenue"  @tap="handleTap"/>
  </div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
  // 入区车流量
  name: "yearRevenue",
  data() {
    return {
      trendsPath:'',
      width:''
    }
  },
  props: {
    dataList: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    dataList: {
      handler(value) {
        this.trendsPath = ''
        if (value){
          this.handleCarData(value)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods:{
    handleTap(e){
      console.log('e',e)
      uChartsInstance[e.target.id].showToolTip(e, {
        formatter: (item, category, index, opts) => {
          if (item.data){
            return item.name + ":" + this.$util.noDecimal(item.data) + '辆';
          }else{
            return item.name + ":" + 0 + '辆';
          }
        },
      });
      uChartsInstance[e.target.id].touchLegend(e);
    },
    // 处理传入的数据
    handleCarData(value) {
      let res = value
      console.log('res',res)
      // let res = {
      //   categories: ["9.28","9.29","9.30","10.1","10.2","10.3","10.4","10.5","10.6","10.7"],
      //   series: [
      //     {
      //       name: "2022年",
      //       data: [35,36,31,33,13,34,31,33,13,34]
      //     },
      //     {
      //       name: "2023年",
      //       data: [18,27,21,24,6,28,21,24,6,28]
      //     }
      //   ]
      // };
      let config  = {
        max:this.getSplitNumber(value.max)
      }
      this.drawCharts('yearRevenue', res,config)
    },
    getSplitNumber(value){
      if (value === 0){
        return 5
      }else{
        let sum = Number(value) + Number(value) *0.2
        return  Number((sum / 1000).toFixed(0)) * 1000
      }
    },
    drawCharts(id, data,config) {
      const ctx = uni.createCanvasContext(id, this);
      let _this = this
      let phoneInfo = uni.getStorageSync('phoneInfo')
      this.width = phoneInfo.screenWidth - 28
      uChartsInstance[id] = new uCharts({
        type: "column",
        context: ctx,
        width: _this.width,
        height: 208,
        categories: data.categories,
        series: data.series,
        animation: false,
        rotate: false,
        rotateLock: false,
        canvas2d: true,
        background: "#FFFFFF",
        color: ["#1E80FF", "#00B6FF","#ACB9CD"],
        padding: [15, 40, 5, 0],
        dataLabel: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25,
          float: 'center'
        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          position:'right',
          splitNumber:4,
          data: [
            {
              min: 0,
              max:config.max
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 5,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      });
    },
  }
}
</script>

<style scoped  lang="scss">
.main{
  width: 100%;
  height: 200px;
  .revenue{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
  }
}
</style>
