<template>
  <div class="panel export-orders">
    <div class="panel-title">出口订单情况</div>
    <div class="export-content">
      <!-- 左侧统计信息 -->
      <div class="export-stats">
        <div class="stat-item export-stat-item">
          <div class="stat-label">出口批次</div>
          <div class="stat-value">
            <span class="value">80</span>
            <span class="unit">批</span>
          </div>
        </div>
        <div class="stat-item export-stat-item">
          <div class="stat-label">累计出口</div>
          <div class="stat-value">
            <span class="value">588</span>
            <span class="unit">万斤</span>
          </div>
        </div>
      </div>

      <!-- 中间环形图 -->
      <div class="export-chart">
        <div ref="pieChart" class="chart"></div>
      </div>

      <!-- 右侧柱状图 -->
      <div class="export-countries">
        <div ref="legendChart" class="legend-chart"></div>
        <div ref="barChart" class="bar-chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExportOrders",
  data() {
    return {
      pieChartInstance: null,
      barChartInstance: null,
      legendChartInstance: null,
      pieData: [
        { value: 21, name: "泰国", itemStyle: { color: "#00f2ff" } },
        { value: 16, name: "越南", itemStyle: { color: "#4caf50" } },
        { value: 8, name: "新加坡", itemStyle: { color: "#ff9800" } },
        { value: 4, name: "印尼", itemStyle: { color: "#9c27b0" } },
      ],
    };
  },
  mounted() {
    this.initPieChart();
    this.initBarChart();
    this.initLegendChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    if (this.pieChartInstance) this.pieChartInstance.dispose();
    if (this.barChartInstance) this.barChartInstance.dispose();
    if (this.legendChartInstance) this.legendChartInstance.dispose();
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    initPieChart() {
      this.pieChartInstance = this.$echarts.init(this.$refs.pieChart);

      const option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}万斤 ({d}%)",
          backgroundColor: "rgba(255, 255, 255, 0.95)",
          borderColor: "#00f2ff",
          borderWidth: 1,
          textStyle: {
            color: "#333",
          },
        },
        legend: {
          show: true,
          top: "5%",
          left: "center",
          type: "scroll",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
        },
        series: [
          {
            name: "出口国家",
            type: "pie",
            radius: ["35%", "60%"],
            center: ["50%", "55%"],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 5,
              borderColor: "rgba(3, 13, 33, 0.5)",
              borderWidth: 1,
            },
            label: {
              show: true,
              color: "#fff",
              fontSize: 11,
              formatter: "{c}万斤",
            },
            labelLine: {
              show: true,
              length: 8,
              length2: 5,
              lineStyle: {
                color: "#00f2ff",
                width: 1,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
                color: "#fff",
              },
            },
            data: this.pieData.sort(() => Math.random() - 0.5),
          },
        ],
      };

      this.pieChartInstance.setOption(option);
    },

    initBarChart() {
      this.barChartInstance = this.$echarts.init(this.$refs.barChart);

      const option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(255, 255, 255, 0.95)",
          borderColor: "#00f2ff",
          borderWidth: 1,
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "8%",
          right: "8%",
          bottom: "15%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["泰国", "越南", "俄罗斯", "新加坡", "印尼"],
          axisLine: {
            lineStyle: {
              color: "rgba(26, 74, 141, 0.5)",
            },
          },
          axisLabel: {
            color: "#aaa",
            fontSize: 9,
            rotate: 0,
          },
        },
        yAxis: {
          type: "value",
          name: "(万斤)",
          nameTextStyle: {
            color: "#aaa",
            fontSize: 9,
          },
          min: 0,
          axisLine: {
            lineStyle: {
              color: "rgba(26, 74, 141, 0.5)",
            },
          },
          axisLabel: {
            color: "#aaa",
            fontSize: 9,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(26, 74, 141, 0.2)",
            },
          },
        },
        series: [
          {
            name: "直接出口",
            type: "bar",
            barWidth: "30%",
            data: [22, 20, 18, 15, 10],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#00f2ff" },
                { offset: 1, color: "#1a4a8d" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#00f2ff" },
                  { offset: 1, color: "#2d6cb5" },
                ]),
              },
            },
            // 关键修改：显示直接出口的数值标签
            label: {
              show: true,
              position: "top",
              color: "#00f2ff",
              fontSize: 9,
              fontWeight: "bold",
              distance: 2
            },
          },
          {
            name: "代加工",
            type: "bar",
            barWidth: "30%",
            data: [18, 15, 13, 10, 7],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#66a3ff" },
                { offset: 1, color: "#1a4a8d" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#66a3ff" },
                  { offset: 1, color: "#2d6cb5" },
                ]),
              },
            },
            // 关键修改：显示代加工的数值标签
            label: {
              show: true,
              position: "top",
              color: "#66a3ff",
              fontSize: 9,
              fontWeight: "bold",
              distance: 2
            },
          },
        ],
      };

      this.barChartInstance.setOption(option);
    },

    initLegendChart() {
      this.legendChartInstance = this.$echarts.init(this.$refs.legendChart);

      const option = {
        backgroundColor: "transparent",
        legend: {
          show: true,
          data: ["直接出口", "代加工"],
          orient: "horizontal",
          top: "center",
          left: "center",
          textStyle: {
            color: "#aaa",
            fontSize: 10,
          },
          itemWidth: 10,
          itemHeight: 6,
          selectedMode: true,
        },
      };

      this.legendChartInstance.setOption(option);

      // 图例交互与主图表同步
      this.legendChartInstance.on("legendselectchanged", (params) => {
        this.barChartInstance.dispatchAction({
          type: "legendToggleSelect",
          name: params.name,
        });
      });

      this.barChartInstance.on("legendselectchanged", (params) => {
        this.legendChartInstance.dispatchAction({
          type: "legendToggleSelect",
          name: params.name,
        });
      });
    },

    handleResize() {
      if (this.pieChartInstance) this.pieChartInstance.resize();
      if (this.barChartInstance) this.barChartInstance.resize();
      if (this.legendChartInstance) this.legendChartInstance.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/tracing-screen.scss";

.export-orders {
  @include panel-base;
  flex: 1;
}

.export-content {
  display: flex;
  height: calc(100% - 30px);
  gap: 12px;
  padding: 5px;
}

.export-stats {
  flex: 0.3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 8px;
  gap: 8px;
  border: 1px solid rgba(26, 74, 141, 0.5);
  border-radius: 6px;
}

.export-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(
    135deg,
    rgba(6, 30, 93, 0.8),
    rgba(6, 30, 93, 0.6)
  );
  border: 1px solid rgba(0, 242, 255, 0.3);
  border-radius: 8px;
  padding: 12px 8px;
  box-shadow: 0 2px 10px rgba(0, 242, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  .stat-label {
    font-size: 10px;
    color: #99ccff;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 60px;
    text-align: center;
  }

  .stat-value {
    display: flex;
    flex-direction: column;
    align-items: center;

    .value {
      font-size: 20px;
      color: $highlight;
      font-weight: bold;
      text-shadow: 0 0 6px rgba(0, 242, 255, 0.5);
    }

    .unit {
      font-size: 11px;
      color: #99ccff;
      margin-top: 2px;
    }
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.2);
  }
}

.export-chart {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 74, 141, 0.5);
  border-radius: 6px;
  padding: 5px;

  .chart {
    width: 100%;
    height: 100%;
  }
}

.export-countries {
  flex: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(26, 74, 141, 0.5);
  border-radius: 6px;
  padding: 5px;
}

.legend-chart {
  height: 30px;
  width: 100%;
  margin-bottom: 5px;
}

.bar-chart {
  width: 100%;
  height: calc(100% - 35px);
}
</style>