<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '800px',
    },
    projectList: {
      type: Array,
      required: true,
      default: [
        { projectName: 'Project A', laborCost: 1500, color: '#7cb5ec' },
        { projectName: 'Project B', laborCost: 800, color: '#434348' },
        { projectName: 'Project C', laborCost: 1200, color: '#90ed7d' },
        { projectName: 'Project D', laborCost: 1800, color: '#f7a35c' },
        { projectName: 'Project E', laborCost: 600, color: '#8085e9' },
      ]
    }, // 新增prop
  },
  data() {
    return {
      chart: null,
      colors: [], // 用于存储柱子颜色
      laborCosts: [], // 用于存储人工成本数据
      projectNames: [], // 用于存储项目名称
    };
  },
  watch: {
    projectList: {
      handler(newVal) {
        this.updateData(newVal);
        if (this.chart) {  // 确保图表已经初始化
          this.setOption();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },

  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.updateData(this.projectList); // 初始化时更新数据
      this.setOption(); // 设置图表选项
    },
    updateData(projectList) {
      this.colors = projectList.map((item) => item.color);
      this.laborCosts = projectList.map((item) => item.laborCost);
      this.projectNames = projectList.map((item) => item.projectName.replace(/(.{5})/g, '$1\n')); // 保持换行格式
    },
    setOption() {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          formatter: (params) => { // 自定义 tooltip 格式
            let { dataIndex } = params[0]; // 获取鼠标悬停的索引
            let projectName = this.projectNames[dataIndex]; // 获取对应的项目名称
            let laborCost = this.laborCosts[dataIndex]; // 获取对应的人工成本
            return `${projectName}<br/>人工成本: ${laborCost} 人天`; // 显示项目名称和人工成本
          },
        },
        grid: {
          top: 10,
          left: '2%',
          right: '8%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          max: 'dataMax',
          name: '人天',
          nameLocation: 'middle',
          nameGap: 25,
        },
        yAxis: {
          type: 'category',
          data: this.projectNames,
          inverse: true,
          axisLabel: {
            rotate: 45, // 设置标签旋转角度
            interval: 0, // 强制显示所有标签
          },
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            data: this.laborCosts,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
            },
            itemStyle: {
              color: (params) => this.colors[params.dataIndex], // 应用颜色
            },
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 6000,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
      });
    },
  },

};
</script>
