<template>
  <div class="disk-chart" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
const colorPalette = [
  '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
  '#FF9F40', '#8AC24A', '#F06292', '#7986CB', '#E57373',
  '#BA68C8', '#64B5F6', '#4DB6AC', '#81C784', '#FFD54F',
  '#FF8A65', '#A1887F', '#90A4AE', '#9575CD', '#4DD0E1'
]
const props = defineProps({
  diskData: {
    type: Array,
    default: () => [
      { name: '/run/user/0', total: 100, used: 10 },
      { name: '/boot/efi', total: 100, used: 20 },
      { name: '/boot', total: 100, used: 30 },
      { name: '/run/lock', total: 100, used: 5 },
      { name: '/dev/shm', total: 100, used: 15 },
      { name: '/', total: 100, used: 90 },
      { name: '/run', total: 100, used: 25 }
    ]
  }
})
const getDiskColor = (index) => {
  return colorPalette[index % colorPalette.length]
}
const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
  if (!chartRef.value) return
  
  chartInstance = echarts.init(chartRef.value)
  
  const option = {
    title: {
      text: '磁盘空间',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        return `${params[0].name}<br/>
                已使用: ${params[0].value}G<br/>
                总容量: ${params[1].value}G`
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        formatter: '{value}G'
      },
      max: 100,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#eee'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: props.diskData.map(item => item.name),
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '总容量',
        type: 'bar',
        data: props.diskData.map(item => item.total),
        itemStyle: {
          color: '#f5f5f5', // 浅灰色表示总容量
          borderWidth: 1,
          borderColor: '#d9d9d9'
        },
        barGap: '-100%', // 让总容量条在已使用条后面
        silent: true, // 不响应鼠标事件
        label: {
          show: false
        },
        barWidth: '60%'
      },
      {
        name: '已使用',
        type: 'bar',
         data: props.diskData.map((item, index) => ({
          value: item.used,
          itemStyle: { color: getDiskColor(index) }
        })),
        label: {
          show: true,
          position: 'right',
          formatter: '{c}G',
          color: '#1890ff',
          fontWeight: 'bold'
        },
        barWidth: '60%'
      },
      
    ]
  }
  
  chartInstance.setOption(option)
}

// 监听窗口变化自动调整图表大小
const resizeHandler = () => {
  chartInstance?.resize()
}

// 监听props变化更新图表
watch(() => props.diskData, (newVal) => {
  if (chartInstance) {
    chartInstance.setOption({
      yAxis: {
        data: newVal.map(item => item.name)
      },
      series: [
        {
          data: newVal.map(item => item.used)
        },
        {
          data: newVal.map(item => item.total)
        }
      ]
    })
  }
}, { deep: true })

onMounted(() => {
  initChart()
  window.addEventListener('resize', resizeHandler)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
  chartInstance?.dispose()
})
</script>

<style scoped>
.disk-chart {
  width: 100%;
  height: 100%;
  background-color: white;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 10px;
}
</style>