<template>
  <div class="chart flex-middle-center" style="width:304px">
    <CircleNumberChart title="文件个数" :value="fileTotal" unit="个" />
    <CircleNumberChart class="ml-12" title="文件大小" v-bind="fileSize" />
  </div>
</template>

<script>
import { findStatisticDataApi } from '@/api/statistic'
import CircleNumberChart from '@/views/statistic/components/CircleNumberChart.vue'

export default {
  components: { CircleNumberChart },

  data: () => ({ fileTotal: 0, fileSize: { value: 0, unit: '' } }),

  watch: {
    '$parent.activeType': {
      immediate: true,
      handler: 'fetch'
    }
  },

  methods: {
    async fetch (type) {
      const { total, size } = await findStatisticDataApi('res-file-data', { type })
      this.fileTotal = total
      this.fileSize = Number(size).formatFileSize(2, 'object')
    }
  }
}
</script>
