import { Tabs } from "antd";
import { FC } from "react";
import ReactECharts from "echarts-for-react";
import style from "./index.module.scss";

export const Container: FC = () => {
  return (
    <Tabs
      className={style.tabs}
      items={[
        {
          label: "按时间",
          key: "0",
          children: (
            <ReactECharts
              style={{ height: "100%" }}
              option={{
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow",
                    label: {
                      show: true,
                    },
                  },
                },
                calculable: true,
                xAxis: [
                  {
                    type: "category",
                    data: ["a", "b", "c"],
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                    name: "评定得分",
                  },
                ],
                dataZoom: [
                  {
                    show: true,
                    start: 50,
                    end: 100,
                  },
                  {
                    type: "inside",
                    start: 0,
                    end: 100,
                  },
                  {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: "empty",
                    width: 30,
                    height: "80%",
                    showDataShadow: false,
                    left: "93%",
                  },
                ],
                series: [
                  {
                    name: "评定得分",
                    type: "bar",
                    data: [20, 40, 50],
                    markLine: {
                      symbol: "none",
                      silent: true,
                      label: {
                        position: "end",
                        color: "red",
                        fontSize: 14,
                        formatter: "预警值 700",
                      },
                      data: [
                        {
                          silent: true,
                          lineStyle: {
                            type: "solid",
                            color: "red",
                          },
                          yAxis: 40,
                        },
                      ],
                    },
                  },
                ],
              }}
            />
          ),
        },
        {
          label: "按部门",
          key: "1",
        },
      ]}
    />
  );
};
