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

const records = [
  {
    PEOPLE_OUT: "2",
    AREA_NAME: "王雯仲测试",
    PEOPLE_IN: "1",
    CAR_IN: "0",
    CAR_OUT: "0",
  },
  {
    PEOPLE_OUT: "0",
    AREA_NAME: "测试",
    PEOPLE_IN: "0",
    CAR_IN: "0",
    CAR_OUT: "0",
  },
  {
    PEOPLE_OUT: "0",
    AREA_NAME: "测试11",
    PEOPLE_IN: "0",
    CAR_IN: "0",
    CAR_OUT: "0",
  },
  {
    PEOPLE_OUT: "0",
    AREA_NAME: "1",
    PEOPLE_IN: "0",
    CAR_IN: "0",
    CAR_OUT: "0",
  },
  ...[
    "秦港一号门",
    "秦港二号门",
    "秦港三号门",
    "秦港四号门",
    "秦港五号门",
    "秦港六号门",
    "秦港七号门",
    "秦港八号门",
    "秦港九号门",
    "秦港十号门",
    "翻控一号门",
    "翻控二号门",
    "翻控三号门",
  ].map(AREA_NAME => ({
    PEOPLE_OUT: "0",
    AREA_NAME,
    PEOPLE_IN: "0",
    CAR_IN: "0",
    CAR_OUT: "0",
  })),
];

/** 负责初始化口门进出统计图，并在卸载时释放图表实例。 */
function EntryExitTrendPanel() {
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  const initEcharts = (mainRef, chartInstance, data) => {
    const xAxisData = data.map(item => item.AREA_NAME);
    const enterData = data.map(
      item => Number(item.CAR_IN) + Number(item.PEOPLE_IN),
    );
    const exitData = data.map(
      item => Number(item.CAR_OUT) + Number(item.PEOPLE_OUT),
    );
    chartInstance.current = echarts.init(mainRef.current);
    chartInstance.current.setOption({
      tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
      grid: {
        left: "2%",
        right: "4%",
        bottom: "5%",
        top: "10%",
        containLabel: true,
      },
      dataZoom: [
        {
          type: "slider",
          height: 6,
          bottom: 0,
          show: true,
          start: 0,
          end: 25,
          handleSize: 3,
          handleStyle: { color: "#DCE2E8" },
          xAxisIndex: [0],
          filterMode: "filter",
          showDetail: false,
        },
      ],
      legend: {
        top: "0%",
        right: "0%",
        textStyle: { color: "#fff", fontSize: 14 },
        itemWidth: 12,
        itemHeight: 10,
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        axisLine: { lineStyle: { color: "#fff" } },
        axisLabel: {
          rotate: 0,
          color: "#fff",
          fontSize: 14,
          interval: 0,
          formatter(value) {
            return textFormatter(value, 3);
          },
        },
      },
      yAxis: {
        type: "value",
        axisLine: { show: false, lineStyle: { color: "#fff" } },
        splitLine: { show: true, lineStyle: { color: "#8c9493" } },
        axisLabel: { fontSize: 14, color: "#fff" },
      },
      series: [
        {
          name: "进",
          type: "bar",
          barWidth: "30%",
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "#00f0ff" },
              { offset: 1, color: "#0066ff" },
            ],
            false,
          ),
          data: enterData,
        },
        {
          name: "出",
          type: "bar",
          barWidth: "30%",
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "#003cff" },
              { offset: 1, color: "#00ff9c" },
            ],
            false,
          ),
          data: exitData,
        },
      ],
    });
  };

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

  return (
    <Panel title="进入进出统计" className="port-gate__trend">
      <div className="port-gate-trend__content">
        <div ref={chartRef} className="port-gate-trend__chart" />
      </div>
    </Panel>
  );
}

export default EntryExitTrendPanel;
