<template>
  <div class="product-process-diagram">
    <h3>产品工序图</h3>
    <el-select v-model="selectedIndustry" placeholder="请选择行业" style="width: 300px; margin-bottom: 20px;">
      <el-option
          v-for="industry in industries"
          :key="industry.value"
          :label="industry.label"
          :value="industry.value"
      />
    </el-select>
<!--    <div ref="processChart" style="width: 100%; height: 400px;"></div>-->
    <div v-if="selectedIndustry == 'steel'">
      <img src="./asset/steel-carbon-emission-process.svg" />
    </div>
    <div v-if="selectedIndustry == 'construction'">
      <img src="./asset/cement-carbon-emission-process.svg" />
    </div>
    <div v-if="selectedIndustry == 'battery'">
      <img src="./asset/battery-carbon-emission-process.svg" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import * as echarts from 'echarts'
import {
  ElSelect,
  ElOption
} from 'element-plus'

const selectedIndustry = ref('')
const processChart = ref(null)

const industries = [
  { label: '钢铁', value: 'steel' },
  { label: '水泥', value: 'construction' },
  { label: '动力电池', value: 'battery' }
]

const industryData = {
  steel: [
    {
      name: '炼钢',
      children: [
        {
          name: '炼铁',
          children: [
            { name: '铁矿石', carbonFootprint: 0.1 },
            { name: '球团', carbonFootprint: 0.2 },
            { name: 'DRI', carbonFootprint: 0.1 },
            { name: 'HBI', carbonFootprint: 0.1 }
          ]
        }
      ]
    }
  ],
  construction: [
    {
      name: '水泥生产',
      children: [
        {
          name: '原料准备',
          children: [
            { name: '石灰石破碎', carbonFootprint: 0.1 },
            { name: '粘土混合', carbonFootprint: 0.1 }
          ]
        },
        {
          name: '熟料烧成',
          children: [
            { name: '窑炉烧成', carbonFootprint: 1.2 },
            { name: '冷却机', carbonFootprint: 0.1 }
          ]
        },
        {
          name: '水泥粉磨',
          children: [
            { name: '球磨机', carbonFootprint: 0.3 },
            { name: '立磨', carbonFootprint: 0.2 }
          ]
        },
        {
          name: '包装与储存',
          children: [
            { name: '袋装', carbonFootprint: 0.1 },
            { name: '散装', carbonFootprint: 0.1 }
          ]
        }
      ]
    }
  ],
  battery: [
    {
      name: '动力电池制造',
      children: [
        {
          name: '正极材料',
          children: [
            {name: '锂盐合成', carbonFootprint: 0.5},
            {name: '前驱体制备', carbonFootprint: 0.3}
          ]
        },
        {
          name: '负极材料',
          children: [
            {name: '石墨化', carbonFootprint: 0.4},
            {name: '碳化', carbonFootprint: 0.2}
          ]
        },
        {
          name: '电解液',
          children: [
            {name: '溶剂配制', carbonFootprint: 0.2},
            {name: '锂盐溶解', carbonFootprint: 0.1}
          ]
        },
        {
          name: '电池组装',
          children: [
            {name: '电芯装配', carbonFootprint: 0.1},
            {name: '电池封装', carbonFootprint: 0.1}
          ]
        },
        {
          name: '电池测试',
          children: [
            {name: '性能测试', carbonFootprint: 0.1},
            {name: '安全测试', carbonFootprint: 0.1}
          ]
        }
      ]
    }
  ]
}

const initProcessChart = () => {
  if (!processChart.value) {
    console.error('processChart is not available');
    return;
  }

  const chart = echarts.init(processChart.value);
  const selectedIndustryData = industryData[selectedIndustry.value] || [];
  const treeData = {
    name: industries.find(item => item.value === selectedIndustry.value).label,
    children: selectedIndustryData.map(product => ({
      name: product.name,
      value: product.carbonFootprint,
      children: product.children ? product.children.map(child => ({
        name: child.name,
        value: child.carbonFootprint,
        children: child.children
      })) : []
    })).filter(item => item.children)
  };

  const isSteel = selectedIndustry.value === 'steel';
  const orientation = isSteel ? 'RL' : 'LR';

  const option = {
    backgroundColor: '#fff',
    title: {
      subtext: '产品工序图',
      left: 'center'
    },
    series: [
      {
        type: 'tree',
        id: 0,
        name: 'tree',
        data: [treeData],
        top: '18%',
        bottom: '14%',
        layout: 'orthogonal', // 保持正交布局
        symbol: 'emptyCircle',
        symbolSize: 7,
        initialTreeDepth: 3,
        animationDurationUpdate: 750,
        label: {
          position: isSteel ? 'right' : 'left', // 根据方向调整标签位置
          verticalAlign: 'middle',
          align: isSteel ? 'left' : 'right', // 根据方向调整文本对齐方式
          fontSize: 16
        },
        leaves: {
          label: {
            position: isSteel ? 'left' : 'right', // 根据方向调整叶子节点的标签位置
            verticalAlign: 'middle',
            align: isSteel ? 'right' : 'left' // 根据方向调整文本对齐方式
          }
        },
        expandAndCollapse: true,
        roam: true,
        itemStyle: {
          color: '#1f77b4',
          borderColor: '#1f77b4'
        },
        orient: orientation // 动态设置方向
      }
    ],
    tooltip: {
      trigger: 'item'
    }
  };
  chart.setOption(option);
};

watch(selectedIndustry, (newVal) => {
  if (newVal) {
    initProcessChart();
  }
});

onMounted(() => {
  if (selectedIndustry.value) {
    initProcessChart();
  }
});
</script>

<style scoped>
.product-process-diagram {
  display: flex;
  flex-direction: column;
  height: 90vh;
}

h3 {
  margin-bottom: 20px;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>