// 存储容量
<template>
  <div>
    <div class="flex-align-center flex-between">
      <p class="title">存储量(MB)</p>
      <el-radio-group v-model="radio" size="small" @change="getLineChartOfStorage">
        <el-radio-button :label="1">年</el-radio-button>
        <el-radio-button :label="2">月</el-radio-button>
        <!-- <el-radio-button :label="3">日</el-radio-button> -->
      </el-radio-group>
    </div>
    <div id="container">

    </div>
  </div>
</template>

<script>
import { Line } from '@antv/g2plot';

export default {
  data () {
    return {
      radio:1,
      chartLine () {},
    }
  },
  methods:{
    renderLine () {
      this.chartLine = new Line('container', {
        data:[],
        xField: 'time',
        yField: 'bytes',
        label: {
          formatter: (val, item) => {
            let fre = ''
            fre = Math.trunc(item._origin.bytes/1024) > 1?(item._origin.bytes/1024)+'G': Math.trunc(item._origin.bytes/1024/1024) > 1?(item._origin.bytes/1024)+'T':item._origin.bytes+'MB'
            return fre
          }
        },
        yAxis: {
          // label: {
          //   formatter: (v) => `${v/1000} K`,
          // },
        },
        meta: {
          time: {
            alias: '时间',
          },
          bytes: {
            alias: '容量',
          },
        },
        point: {
          size: 5,
          shape: 'diamond',
          style: {
            fill: 'white',
            stroke: '#5B8FF9',
            lineWidth: 2,
          },
        },
        tooltip: { 
          showMarkers: false,
          formatter: (datum) => {
            let fre = ''
            fre = Math.trunc(datum.bytes/1024) > 1?(datum.bytes/1024)+'G': Math.trunc(datum.bytes/1024/1024) > 1?(datum.bytes/1024)+'T':datum.bytes+'MB'
            return { name: '容量', value:fre };
          },
        },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: '#000',
              fill: 'blue',
            },
          },
        },
        interactions: [{ type: 'marker-active' }],
      });

      this.chartLine.render();
      this.getLineChartOfStorage()
    },
    async getLineChartOfStorage() {
      let param = {
        "classname": "webmanage.dataanalysis.MediaCenter",
        "method": "getLineChartOfStorage",
        "content": {
          "date": (new Date()).toLocaleDateString(),
          "type": this.radio
        }
      }
      const res = await this.$api.requested(param)
      this.chartLine.changeData(res.data)
    }
  },
  mounted () {
    this.renderLine()
  }
}

</script>
<style>
.el-radio-button__orig-radio:checked+.el-radio-button__inner{
  background-color: #EAF1FE !important;
  /* border-color: #CCCCCC !important; */
  color:#3874F6
}
</style>
<style scoped>
.title{
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-indent: 7px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
  border-left: .3rem solid #3874F6;
}

</style>