import { useMount } from "ahooks";
import * as echarts from "echarts";
import { useRef, useState } from "react";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const tabs = ["人员", "车辆"];
const records = [
  { NAME: "零号门", IN: "0", OUT: "0" },
  { NAME: "一号门", IN: "15", OUT: "12" },
  { NAME: "二号门", IN: "8", OUT: "10" },
  { NAME: "三号门", IN: "22", OUT: "18" },
  { NAME: "四号门", IN: "5", OUT: "7" },
  { NAME: "五号门", IN: "30", OUT: "25" },
  { NAME: "六号门", IN: "12", OUT: "14" },
  { NAME: "七号门", IN: "18", OUT: "16" },
  { NAME: "八号门", IN: "9", OUT: "11" },
  { NAME: "九号门", IN: "25", OUT: "20" },
];

/** 负责初始化封闭区域进出趋势图并管理人员、车辆标签状态。 */
function EntryExitTrendPanel() {
  const [activeTab, setActiveTab] = useState(0);
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  const initEcharts = (mainRef, chartInstance, data) => {
    chartInstance.current = echarts.init(mainRef.current);

    const inData = data.map(item => Number.parseInt(item.IN));
    const outData = data.map(item => Number.parseInt(item.OUT));
    const names = data.map(item => item.NAME);

    chartInstance.current.setOption({
      tooltip: { trigger: "axis", axisPointer: { type: "none" } },
      legend: {
        data: ["进", "出"],
        top: "0%",
        right: "0%",
        textStyle: { color: "#fff", fontSize: 14 },
        itemWidth: 12,
        itemHeight: 10,
      },
      dataZoom: [
        {
          type: "slider",
          height: 6,
          bottom: "7%",
          show: true,
          start: 0,
          end: 50,
          handleSize: 5,
          handleStyle: { color: "#DCE2E8" },
          xAxisIndex: [0],
          filterMode: "filter",
          showDetail: false,
        },
      ],
      grid: { left: "10%", right: "5%", top: "10%", bottom: "20%" },
      xAxis: [
        {
          type: "category",
          data: names,
          axisTick: { alignWithLabel: true },
          axisLabel: { color: "#fff" },
        },
      ],
      yAxis: {
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { color: "#fff" },
        splitLine: { show: true, lineStyle: { type: "dashed" } },
      },
      series: [
        {
          name: "进",
          type: "bar",
          backgroundStyle: {
            color: "rgba(216, 229, 247, 0.55)",
            borderRadius: [8, 8, 0, 0],
          },
          itemStyle: {
            borderRadius: [12, 12, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: "rgba(121,103,255,0.7)" },
              { offset: 0, color: "#7967FF" },
            ]),
          },
          barWidth: "10",
          data: inData,
        },
        {
          name: "出",
          type: "bar",
          backgroundStyle: {
            color: "rgba(216, 229, 247, 0.55)",
            borderRadius: [8, 8, 0, 0],
          },
          itemStyle: {
            borderRadius: [12, 12, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: "rgba(255,198,124,0.7)" },
              { offset: 0, color: "#FFC67C" },
            ]),
          },
          barWidth: "10",
          data: outData,
        },
      ],
    });
  };

  useMount(() => {
    initEcharts(chartRef, chartInstance, records);
    return () => chartInstance.current?.dispose();
  });

  return (
    <Panel
      title="封闭区域进出情况统计"
      className="port-closed-area__trend"
      extra={<Tabs activeTab={activeTab} onChange={setActiveTab} />}
    >
      <div className="port-closed-area-trend__content">
        <div ref={chartRef} className="port-closed-area-trend__chart" />
      </div>
    </Panel>
  );
}

function Tabs({ activeTab, onChange }) {
  return (
    <div className="port-closed-area-tabs">
      {tabs.map((item, index) => (
        <div
          key={item}
          className={`port-closed-area-tabs__item ${index === activeTab ? "port-closed-area-tabs__item--active" : ""}`}
          onClick={() => onChange(index)}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

export default EntryExitTrendPanel;
