<template>
  <div class="resource-overview">
    <div class="chart-block">
      <div class="chart-title">资源类型分布</div>
      <div class="chart" ref="typeChart" />
    </div>
    <div class="chart-block">
      <div class="chart-title">资源状态统计</div>
      <div class="chart" ref="statusChart" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')

export default {
  name: 'ResourceOverview',
  props: {
    typeData: {
      type: Array,
      default: () => [] // [{name,value}]
    },
    statusData: {
      type: Array,
      default: () => [] // [{name,value}]
    }
  },
  data() {
    return { typeChart: null, statusChart: null }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.typeChart && this.typeChart.dispose()
    this.statusChart && this.statusChart.dispose()
  },
  watch: {
    typeData: {
      deep: true,
      handler() { this.setTypeOption() }
    },
    statusData: {
      deep: true,
      handler() { this.setStatusOption() }
    }
  },
  methods: {
    handleResize() {
      this.typeChart && this.typeChart.resize()
      this.statusChart && this.statusChart.resize()
    },
    initCharts() {
      this.typeChart = echarts.init(this.$refs.typeChart, 'macarons')
      this.statusChart = echarts.init(this.$refs.statusChart, 'macarons')
      this.setTypeOption()
      this.setStatusOption()
    },
    setTypeOption() {
      const data = this.typeData
      this.typeChart && this.typeChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [
          {
            name: '类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '45%'],
            data,
            label: { formatter: '{b}: {c} ({d}%)' }
          }
        ]
      })
    },
    setStatusOption() {
      const categories = this.statusData.map(i => i.name)
      const values = this.statusData.map(i => i.value)
      this.statusChart && this.statusChart.setOption({
        tooltip: { trigger: 'axis' },
        grid: { left: '3%', right: '4%', bottom: '8%', containLabel: true },
        xAxis: { type: 'category', data: categories },
        yAxis: { type: 'value' },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '50%',
            data: values,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#d97706' },
                { offset: 1, color: '#dbeafe' }
              ])
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.resource-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;

  .chart-block {
    background: #fff0; // inherit card
    .chart-title {
      font-size: 14px;
      font-weight: bold;
      color: #606266;
      margin-bottom: 8px;
      padding-left: 10px;
      border-left: 3px solid #4f46e5;
    }
    .chart {
      width: 100%;
      height: 220px;
    }
  }
}
</style>