import React from "react";
import { Cascader, Form } from "@tencent/tea-component";

const data = {
  title: "Module",
  options: [
    {
      label: "M1",
      value: "M1",
      child: {
        title: "专区",
        col: 2,
        options: [
          {
            label: "191320",
            value: "191320",
            child: {
              title: "SET & 转发协议",
              col: 1,
              options: [
                {
                  label: "联通-IP-企业CAD-SET-1 电信/4层(TCP)",
                  value: "SET-1",
                },
                {
                  label: "联通-IP-企业CAD-SET-2 电信/4层(TCP)",
                  value: "SET-2",
                },
                {
                  label: "联通-IP-企业CAD-SET-3 电信/4层(TCP)",
                  value: "SET-3",
                },
                {
                  label: "联通-IP-企业CAD-SET-4 电信/4层(TCP)",
                  value: "SET-4",
                },
                {
                  label: "联通-IP-企业CAD-SET-5 电信/4层(TCP)",
                  value: "SET-5",
                },
                {
                  label: "联通-IP-企业CAD-SET-6 电信/4层(TCP)",
                  value: "SET-6",
                },
                {
                  label: "联通-IP-企业CAD-SET-7 电信/4层(TCP)",
                  value: "SET-7",
                },
                {
                  label: "联通-IP-企业CAD-SET-8 电信/4层(TCP)",
                  value: "SET-8",
                },
                {
                  label: "联通-IP-企业CAD-SET-9 电信/4层(TCP)",
                  value: "SET-9",
                },
                {
                  label: "联通-IP-企业CAD-SET-10 电信/4层(TCP)",
                  value: "SET-10",
                },
                {
                  label: "联通-IP-企业CAD-SET-11 电信/4层(TCP)",
                  value: "SET-11",
                },
              ],
            },
          },
          {
            label: "191321",
            value: "191321",
            child: {
              title: "SET & 转发协议",
              col: 1,
              options: [
                {
                  label: "联通-IP-企业CAD-SET-1 电信/4层(TCP)",
                  value: "SET-1",
                },
                {
                  label: "联通-IP-企业CAD-SET-2 电信/4层(TCP)",
                  value: "SET-2",
                },
              ],
            },
          },
        ],
      },
    },
    {
      label: "M2",
      value: "M2",
      child: {
        title: "专区",
        col: 2,
        options: [
          {
            label: "191322",
            value: "191322",
            child: {
              title: "SET & 转发协议",
              col: 1,
              options: [
                {
                  label: "联通-IP-企业CAD-SET-1 电信/4层(TCP)",
                  value: "SET-1",
                },
                {
                  label: "联通-IP-企业CAD-SET-2 电信/4层(TCP)",
                  value: "SET-2",
                },
                {
                  label: "联通-IP-企业CAD-SET-3 电信/4层(TCP)",
                  value: "SET-3",
                },
              ],
            },
          },
        ],
      },
    },
  ],
};

export default function CascaderExample() {
  return (
    <Form>
      <Form.Item label="单选">
        <Cascader
          clearable
          searchable
          data={data}
          onChange={(value, { options }) => console.log(value, options)}
          multiple={false}
        />
      </Form.Item>
      <Form.Item label="多选">
        <Cascader
          multiple
          clearable
          searchable
          data={data}
          onChange={(value, { options }) => console.log(value, options)}
        />
      </Form.Item>
    </Form>
  );
}