import React from "react";
import { Tag, Tooltip, SelectMultiple } from "@tencent/tea-component";

export default function TagExample2() {
  return (
    <SelectMultiple
      staging={false}
      appearance="button"
      defaultValue={["gz"]}
      options={[
        { value: "gz", text: "瓜子", tooltip: "百煮入味香" },
        {
          value: "hs",
          text: "花生",
          disabled: true,
          tooltip: "花生已售罄",
        },
        { value: "bmf", text: "爆米花", tooltip: "焦糖味" },
        { value: "kl", text: "可乐", tooltip: "肥宅快乐水" },
        { value: "pj", text: "啤酒" },
        { value: "kqs", text: "矿泉水" },
        { value: "bbz", text: "八宝粥" },
      ]}
      button={options =>
        options.length ? (
          <Tooltip title={options.map(o => o.text).join(", ")}>
            <div>
              <Tag.Group>
                {options.map(o => (
                  <Tag key={o.value}>{o.text}</Tag>
                ))}
              </Tag.Group>
            </div>
          </Tooltip>
        ) : (
          "请选择"
        )
      }
    />
  );
}