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

const data = [
  {
    label: "北京市",
    value: "bj",
    children: [
      { label: "朝阳区", value: "cy" },
      { label: "海淀区", value: "hd" },
    ],
  },
  {
    label: "上海市",
    value: "sh",
    children: [
      { label: "徐汇区", value: "xh" },
      { label: "黄埔区", value: "hp" },
    ],
  },
  {
    label: "广东省",
    value: "gd",
    children: [
      {
        label: "广州市",
        value: "gz",
      },
      {
        label: "深圳市",
        value: "sz",
        children: [
          { label: "南山区", value: "ns" },
          { label: "宝安区", value: "ba" },
          { label: "福田区", value: "ft" },
        ],
      },
    ],
  },
];

export default function CascaderAllExample() {
  const [valueMode, setValueMode] = useState("onlyLeaf");
  const [showMode, setShowMode] = useState("onlyLeaf");
  return (
    <Form>
      <Form.Item label="值模式">
        <Segment
          options={[
            { value: "all" },
            { value: "onlyLeaf" },
            { value: "parentFirst" },
          ]}
          value={valueMode}
          onChange={mode => setValueMode(mode)}
        />
      </Form.Item>
      <Form.Item label="展示格式">
        <Segment
          options={[{ value: "onlyLeaf" }, { value: "parentFirst" }]}
          value={showMode}
          onChange={mode => setShowMode(mode)}
        />
      </Form.Item>
      <Form.Item label="多选">
        <Cascader
          multiple
          clearable
          type="menu"
          data={data}
          all={{ label: "全部", value: "all" }}
          valueMode={valueMode}
          showMode={showMode}
          onChange={(value, { options }) => {
            console.log(value, options);
          }}
        />
      </Form.Item>
    </Form>
  );
}