<template>
  <div class="process-flow-container">
    <div class="flow-chart" ref="flowChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'ProcessFlow',
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      // 初始化 echarts 实例
      this.chart = echarts.init(this.$refs.flowChart);
      
      // 流程图配置
      const option = {
        title: {
          text: '钢卷加工流程图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 80,
            roam: false,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 12
            },
            data: [
              { 
                name: '酸轧', 
                x: 100, 
                y: 100,
                itemStyle: { color: '#5c7495' }
              },
              { 
                name: '镀锌卷', 
                x: 250, 
                y: 50,
                itemStyle: { color: '#2cb867' }
              },
              { 
                name: '分剪', 
                x: 400, 
                y: 50,
                itemStyle: { color: '#22bbff' }
              },
              { 
                name: '脱脂', 
                x: 250, 
                y: 150,
                itemStyle: { color: '#800080' }
              },
              { 
                name: '罩退', 
                x: 400, 
                y: 150,
                itemStyle: { color: '#3ba272' }
              },
              { 
                name: '拉矫【冷轧】', 
                x: 550, 
                y: 100,
                itemStyle: { color: '#f56c6c' }
              },
              { 
                name: '双机架', 
                x: 550, 
                y: 200,
                itemStyle: { color: '#ffa500' }
              },
              { 
                name: '镀铬', 
                x: 700, 
                y: 200,
                itemStyle: { color: '#0000ff' }
              }
            ],
            links: [
              { source: '酸轧', target: '镀锌卷' },
              { source: '镀锌卷', target: '分剪' },
              { source: '酸轧', target: '脱脂' },
              { source: '脱脂', target: '罩退' },
              { source: '罩退', target: '拉矫【冷轧】' },
              { source: '罩退', target: '双机架' },
              { source: '双机架', target: '镀铬' }
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };
      
      // 应用配置
      this.chart.setOption(option);
      this.$nextTick(() => {
        this.chart.resize();
      });
      
      // 响应式处理
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.process-flow-container {
  width: 100%;
  height: 400px;
  .flow-chart {
    width: 100%;
    height: 100%;
  }
}
</style>