<template>
  <div class="repair-plan-root">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.resizeHandler = () => {
      this.chart && this.chart.resize()
    }
    window.addEventListener('resize', this.resizeHandler)
    this.render()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  watch: {
    data: {
      handler() {
        this.$nextTick(() => {
          this.render()
        })
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    handleResize() {
      this.chart && this.chart.resize()
    },
    render() {
      if (!this.chart) return

      this.chart.clear()
      // 数据为空 → 清空图表
      if (!this.data || !this.data.length) {
        this.chart.setOption({
          graphic: [{
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              text: '暂无数据',
              fill: '#6c8aa5',
              fontSize: 20
            }
          }]
        })
        return
      }

      const cards = []
      const cardWidth = 200
      const cardHeight = 100
      const gap = 20

      const chartWidth = this.chart.getWidth()
      const cols = Math.floor(chartWidth / (cardWidth + gap)) || 1

      this.data.forEach((item, index) => {
        const col = index % cols
        const row = Math.floor(index / cols)

        const x = col * (cardWidth + gap)
        const y = row * (cardHeight + gap) + 3

        const finished = item.execCount >= item.planCount

        cards.push({
          type: 'rect',
          left: x,
          top: y,
          shape: { width: cardWidth, height: cardHeight },
          style: {
            fill: 'rgba(255,255,255,0.04)',
            stroke: finished ? '#52c41a' : '#4fd2ff',
            lineWidth: 1
          }
        })

        cards.push({
          type: 'text',
          left: x + 16,
          top: y + 36,
          style: {
            text: item.rangeName,
            fill: '#4fd2ff',
            fontSize: 18,
            fontWeight: 'bold'
          }
        })

        cards.push({
          type: 'text',
          left: x + 90,
          top: y + 22,
          style: {
            text: `计划：${item.planCount}`,
            fill: '#fff',
            fontSize: 16
          }
        })

        cards.push({
          type: 'line',
          left: x + 86,
          top: y + 48,
          shape: { x1: 0, y1: 0, x2: 96, y2: 0 },
          style: { stroke: 'rgba(255,255,255,0.2)' }
        })

        cards.push({
          type: 'text',
          left: x + 90,
          top: y + 60,
          style: {
            text: `完成：${item.execCount}`,
            fill: finished ? '#52c41a' : '#ff4d4f',
            fontSize: 16
          }
        })
      })

      this.chart.setOption({ graphic: cards }, true)
    }
  }
}
</script>

<style scoped>
.repair-plan-root {
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
