Cascader 级联选择器

export function CascaderBasic() {
  const [value, setValue] = useState<CascaderValue>([]);

  return (
    <div style={stack}>
      <div style={section}>
        <p style={demoParagraph}>Child options expand when clicked (default)</p>
        <ElCascader value={value} options={OPTIONS} onChange={setValue} />
      </div>
      <div style={section}>
        <p style={demoParagraph}>Child options expand when hovered</p>
        <ElCascader
          value={value}
          options={OPTIONS}
          props={{ expandTrigger: "hover" }}
          onChange={setValue}
        />
      </div>
    </div>
  );
}

export function CascaderOptionDisabling() {
  return (
    <div style={stack}>
      <ElCascader options={DISABLED_OPTIONS} />
    </div>
  );
}

export function CascaderClearable() {
  const [value, setValue] = useState<CascaderValue>([]);

  return (
    <div style={stack}>
      <ElCascader
        value={value}
        options={OPTIONS}
        clearable
        onChange={setValue}
      />
    </div>
  );
}

export function CascaderClearIcon() {
  const [value, setValue] = useState<CascaderValue>([]);

  return (
    <div style={stack}>
      <ElCascader
        value={value}
        options={OPTIONS}
        clearable
        clearIcon={<CloseBold />}
        placeholder="Custom clear icon"
        onChange={setValue}
      />
    </div>
  );
}

export function CascaderLastLevel() {
  const [value, setValue] = useState<CascaderValue>([]);

  return (
    <div style={stack}>
      <ElCascader
        value={value}
        options={OPTIONS}
        showAllLevels={false}
        onChange={setValue}
      />
    </div>
  );
}

export function CascaderMultipleSelection() {
  return (
    <div style={stack}>
      <div style={section}>
        <p style={demoParagraph}>Display all tags (default)</p>
        <ElCascader options={OPTIONS} props={{ multiple: true }} clearable />
      </div>
      <div style={section}>
        <p style={demoParagraph}>Collapse tags</p>
        <ElCascader
          options={OPTIONS}
          props={{ multiple: true }}
          collapseTags
          clearable
        />
      </div>
      <div style={section}>
        <p style={demoParagraph}>Collapse tags tooltip</p>
        <ElCascader
          options={OPTIONS}
          props={{ multiple: true }}
          collapseTags
          collapseTagsTooltip
          clearable
        />
      </div>
      <div style={section}>
        <p style={demoParagraph}>Max Collapse Tags</p>
        <ElCascader
          options={OPTIONS}
          props={{ multiple: true }}
          collapseTags
          collapseTagsTooltip
          maxCollapseTags={3}
          clearable
        />
      </div>
    </div>
  );
}

export function CascaderAnyLevel() {
  return (
    <div style={stack}>
      <div style={section}>
        <p style={demoParagraph}>Select any level of options (Single selection)</p>
        <ElCascader
          options={OPTIONS}
          props={{ checkStrictly: true }}
          clearable
        />
      </div>
      <div style={section}>
        <p style={demoParagraph}>Select any level of options (Multiple selection)</p>
        <ElCascader
          options={OPTIONS}
          props={{ multiple: true, checkStrictly: true }}
          clearable
        />
      </div>
    </div>
  );
}

export function CascaderDynamicLoading() {
  return (
    <div style={stack}>
      <ElCascader props={LAZY_PROPS} />
    </div>
  );
}

export function CascaderFilterable() {
  return (
    <div style={stack}>
      <div style={section}>
        <p style={demoParagraph}>Filterable (Single selection)</p>
        <ElCascader
          placeholder="Try searchingL Guide"
          options={OPTIONS}
          filterable
        />
      </div>
      <div style={section}>
        <p style={demoParagraph}>Filterable (Multiple selection)</p>
        <ElCascader
          placeholder="Try searchingL Guide"
          options={OPTIONS}
          props={{ multiple: true }}
          filterable
        />
      </div>
    </div>
  );
}

export function CascaderCustomContent() {
  return (
    <div style={stack}>
      <ElCascader
        options={OPTIONS}
        renderLabel={({ node, data }) => (
          <span>
            {data.label}
            {!node.isLeaf ? ` (${data.children?.length})` : ""}
          </span>
        )}
      />
    </div>
  );
}

export function CascaderCustomSuggestionItem() {
  return (
    <div style={stack}>
      <ElCascader
        options={OPTIONS}
        filterable
        placeholder="Try searching: Guide"
        renderSuggestionItem={({ item }) => (
          <span>🔍 {item.pathLabels.join(" > ")}</span>
        )}
      />
    </div>
  );
}

export function CascaderPanelDemo() {
  return (
    <div style={stack}>
      <ElCascaderPanel options={OPTIONS} />
    </div>
  );
}

export function CascaderCustomTag() {
  return (
    <div style={section}>
      <p style={demoParagraph}>Using slots allows for more flexible control over the display.</p>
      <ElCascader
        options={TAG_OPTIONS}
        props={{ multiple: true }}
        clearable
        renderTag={({ data }) => (
          <>
            {data.map((item, index) => (
              <ElTag key={item.key} color={index % 2 === 0 ? "#FFDE0A" : ""}>
                {item.text}
              </ElTag>
            ))}
          </>
        )}
      />
      <p style={{ margin: "16px 0" }}>Display top-level tags only</p>
      <ElCascader
        options={TAG_OPTIONS}
        props={{ multiple: true }}
        clearable
        renderTag={({ data }) => (
          <>
            {getTopLevelLabels(data).map((label) => (
              <ElTag key={label}>{label}</ElTag>
            ))}
          </>
        )}
      />
    </div>
  );
}

export function CascaderShowCheckedStrategy() {
  const [value1, setValue1] = useState<CascaderValue>([]);
  const [value2, setValue2] = useState<CascaderValue>([]);

  return (
    <div style={stack}>
      <div style={section}>
        <p style={demoParagraph}>Strategy: child (default, show all selected child nodes)</p>
        <ElCascader
          value={value1}
          options={STRATEGY_OPTIONS}
          props={{ multiple: true }}
          showCheckedStrategy="child"
          clearable
          onChange={setValue1}
        />
      </div>
      <div style={section}>
        <p style={demoParagraph}>
          Strategy: parent (show only parent nodes when all children are
          selected)
        </p>
        <ElCascader
          value={value2}
          options={STRATEGY_OPTIONS}
          props={{ multiple: true }}
          showCheckedStrategy="parent"
          clearable
          onChange={setValue2}
        />
      </div>
    </div>
  );
}

export function CascaderCheckOnClickNode() {
  const [showPrefix, setShowPrefix] = useState(true);
  const [value, setValue] = useState<CascaderValue>();
  const [value2, setValue2] = useState<CascaderValue>();

  return (
    <div style={checkStack}>
      <ElSwitch
        checked={showPrefix}
        activeText="show prefix"
        inactiveText="hide prefix"
        onCheckedChange={setShowPrefix}
      />
      <div style={sectionRow}>
        <div style={section}>
          <p style={demoParagraph}>checkStrictly | Single mode</p>
          <ElCascader
            value={value}
            options={OPTIONS}
            props={{
              showPrefix,
              checkStrictly: true,
              checkOnClickNode: true,
            }}
            clearable
            onChange={setValue}
          />
        </div>
        <div style={section}>
          <p style={demoParagraph}>Multiple mode</p>
          <ElCascader
            value={value2}
            options={OPTIONS}
            showCheckedStrategy="parent"
            props={{ showPrefix, multiple: true, checkOnClickNode: true }}
            clearable
            onChange={setValue2}
          />
        </div>
      </div>
    </div>
  );
}

export function CascaderCustomHeaderFooter() {
  const [value, setValue] = useState<CascaderValue>([]);
  const [checkAll, setCheckAll] = useState(false);
  const [indeterminate, setIndeterminate] = useState(false);

  const handleChange = (next: CascaderValue) => {
    setValue(next);
    const length = Array.isArray(next) ? next.length : 0;
    setCheckAll(length === ALL_VALUE_PATHS.length);
    setIndeterminate(length > 0 && length < ALL_VALUE_PATHS.length);
  };

  const handleCheckAll = (checked: boolean) => {
    setIndeterminate(false);
    setCheckAll(checked);
    setValue(checked ? ALL_VALUE_PATHS : []);
  };

  return (
    <div style={{ display: "flex" }}>
      <div style={{ flex: 1, textAlign: "center" }}>
        <p style={demoParagraph}>Custom header content</p>
        <ElCascader
          value={value}
          popperClass="cascader-custom-header"
          options={HEADER_FOOTER_OPTIONS}
          props={{ multiple: true }}
          clearable
          header={
            <ElCheckbox
              checked={checkAll}
              indeterminate={indeterminate}
              onCheckedChange={handleCheckAll}
            >
              All
            </ElCheckbox>
          }
          onChange={handleChange}
        />
      </div>
      <div
        style={{
          flex: 1,
          textAlign: "center",
          borderLeft: "1px solid var(--el-border-color)",
        }}
      >
        <p style={demoParagraph}>Custom footer content</p>
        <ElCascader
          value={value}
          options={HEADER_FOOTER_OPTIONS}
          props={{ multiple: true }}
          clearable
          footer={
            <ElButton link size="small" onClick={() => setValue([])}>
              Clear
            </ElButton>
          }
          onChange={handleChange}
        />
      </div>
    </div>
  );
}

export function CascaderVirtualScroll() {
  const [value, setValue] = useState<CascaderValue>([]);

  return (
    <div style={stack}>
      <ElCascader
        value={value}
        options={LARGE_OPTIONS}
        filterMethod={largeFilterMethod}
        filterable
        virtualScroll
        clearable
        placeholder="Select with large data"
        onChange={setValue}
      />
    </div>
  );
}

export function CascaderFitInputWidth() {
  const [value, setValue] = useState<CascaderValue>([]);

  return (
    <div style={row}>
      <ElCascader
        value={value}
        options={OPTIONS}
        placeholder="Default expanding panel"
        filterable
        onChange={setValue}
      />
      <ElCascader
        value={value}
        options={OPTIONS}
        placeholder="Fit input width"
        filterable
        fitInputWidth
        onChange={setValue}
      />
      <ElCascader
        value={value}
        options={OPTIONS}
        placeholder="Fixed width (400px)"
        filterable
        fitInputWidth={400}
        onChange={setValue}
        renderSuggestionItem={({ item }) => (
          <div>{item.text} (Custom content that is very long)</div>
        )}
      />
    </div>
  );
}