import { CSSProperties } from "react";
import "./index.less";
import { Collapse, CollapseProps, theme } from "antd";
import { CaretRightOutlined } from "@ant-design/icons";

interface LabelProps {
  children?: JSX.Element;
}

const content = (
  <ul>
    <li>切片太少</li>
    <li>{"层厚>1.0mm"}</li>
  </ul>
);
const getItems: (panelStyle: CSSProperties) => CollapseProps["items"] = (
  panelStyle
) => [
  {
    key: "1",
    label: "影像质量",
    children: content,
    style: panelStyle,
  },
  {
    key: "2",
    label: "其他",
    children: <p>1</p>,
    style: panelStyle,
  },
];

export const Label = (props: LabelProps) => {
  const { token } = theme.useToken();

  const panelStyle: React.CSSProperties = {
    marginBottom: 12,
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: "none",
  };

  return (
    <div className="label-container">
      <aside>
        <Collapse
          bordered={false}
          defaultActiveKey={[]}
          expandIcon={({ isActive }) => (
            <CaretRightOutlined rotate={isActive ? 90 : 0} />
          )}
          style={{ background: token.colorBgContainer }}
          items={getItems(panelStyle)}
        />
      </aside>
      <main>标签相关数据</main>
    </div>
  );
};