import React, { useState } from "react";
import { CheckTree, Checkbox } from "@tencent/tea-component";
import { Segment } from "../../segment";

export default function CheckTreeExample() {
  const [valueMode, setValueMode] = useState("onlyLeaf");
  const [selected, setSelected] = useState(["cc"]);
  const relations = {
    gz: "gd",
    sz: "gd",
    fs: "gd",
    by: "gz",
    th: "gz",
    ns: "sz",
    ft: "sz",
    sd: "fs",
    cc: "fs",
  };
  return (
    <>
      值模式：
      <section>
        <Segment
          options={[
            { value: "all" },
            { value: "onlyLeaf" },
            { value: "parentFirst" },
          ]}
          value={valueMode}
          onChange={mode => setValueMode(mode)}
        />
      </section>
      <CheckTree
        relations={relations}
        value={selected}
        onChange={value => {
          console.log(value);
          setSelected(value);
        }}
        disabledNames={["fs"]}
        // @ts-ignore
        valueMode={valueMode}
      >
        <Checkbox name="gd">广东省</Checkbox>
        <ul style={{ paddingLeft: 20 }}>
          <li>
            <Checkbox name="gz">广州市</Checkbox>
            <ul style={{ paddingLeft: 20 }}>
              <li>
                <Checkbox name="by">白云区</Checkbox>
              </li>
              <li>
                <Checkbox name="th">天河区</Checkbox>
              </li>
            </ul>
          </li>
          <li>
            <Checkbox name="sz">深圳市</Checkbox>
            <ul style={{ paddingLeft: 20 }}>
              <li>
                <Checkbox name="ns">南山区</Checkbox>
              </li>
              <li>
                <Checkbox name="ft">福田区</Checkbox>
              </li>
            </ul>
          </li>
          <li>
            <Checkbox name="fs">佛山市</Checkbox>
            <ul style={{ paddingLeft: 20 }}>
              <li>
                <Checkbox name="sd">顺德区</Checkbox>
              </li>
              <li>
                <Checkbox name="cc">禅城区</Checkbox>
              </li>
            </ul>
          </li>
        </ul>
      </CheckTree>
    </>
  );
}