<template>
  <view class="main">
    <view class="title"> 当月备品备件统计 </view>
    <canvas
      canvas-id="myid"
      id="myid"
      class="charts"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
    />
  </view>
</template>

<script>
import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts-2.js'
var uChartsInstance = {}
import { get } from '@/utils/api.js'
export default {
  data () {
    return {
      cWidth: 750,
      cHeight: 500
    }
  },
  mounted () {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750)
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500)
    this.getServerData()
  },
  methods: {
    getServerData () {
      //模拟从服务器获取数据时的延时
      /* setTimeout(() => {
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						series: [{
								name: "入库数量",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "出库数量",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.drawCharts('myid', res);
				}, 500); */
      let par = {
        dateType: 2
      }
      par = this.URLSearchParams(par)
      get(
        this.apiUrl + '/home/page/sparepart/sparePartInventoryCount?' + par
      ).then(res => {
        if (res.success) {
          let chartData = {
            categories: [],
            series: [
              {
                name: '入库数量',
                data: []
              },
              {
                name: '出库数量',
                data: []
              }
            ]
          }
          for (let item of res.data) {
            chartData.categories.push(item.dateTime)
            chartData.series[0].data.push(item.inInventorySum)
            chartData.series[1].data.push(item.outInventorySum)
          }

          this.drawCharts('myid', chartData)
        }
      })
    },
    drawCharts (id, data) {
      const ctx = uni.createCanvasContext(id, this)
      uChartsInstance[id] = new uCharts({
        type: 'column',
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: '#FFFFFF',
        color: [
          '#1890FF',
          '#91CB74',
          '#FAC858',
          '#EE6666',
          '#73C0DE',
          '#3CA272',
          '#FC8452',
          '#9A60B4',
          '#ea7ccc'
        ],
        padding: [15, 15, 0, 5],
        touchMoveLimit: 24,
        enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true,
          scrollShow: true,
          itemCount: 4
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: 'group',
            width: 30,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08
          }
        }
      })
    },
    touchstart (e) {
      uChartsInstance[e.target.id].scrollStart(e)
    },
    touchmove (e) {
      uChartsInstance[e.target.id].scroll(e)
    },
    touchend (e) {
      uChartsInstance[e.target.id].scrollEnd(e)
      uChartsInstance[e.target.id].touchLegend(e)
      uChartsInstance[e.target.id].showToolTip(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;

  .title {
    color: #333333;
    font-size: 28rpx;
    padding: 30rpx 20rpx;
  }
}

.charts {
  width: 750rpx;
  height: 500rpx;
  margin-top: 10rpx;
}
</style>
