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

const { filterable } = Table.addons;

const records = [
  { name: "Mario", stage: "teenager", marriage: 0 },
  { name: "Luigi", stage: "youth", marriage: 0 },
  { name: "Koopa", stage: "youth", marriage: 1 },
  { name: "Yoshi", stage: "youth", marriage: 0 },
  { name: "Link", stage: "middle-aged", marriage: 2 },
  { name: "Zelda", stage: "middle-aged", marriage: 1 },
  { name: "Wario", stage: "elder", marriage: 3 },
  { name: "Pikachu", stage: "elder", marriage: 4 },
];
const MARRIAGE_TEXT = ["未婚", "已婚", "离异", "再婚", "丧偶"];
const STAGE_TEXT = {
  teenager: "少年",
  youth: "青年",
  "middle-aged": "中年",
  elder: "老年",
};
const ALL_VALUE = "__ALL__";

export default function TableAddonExample() {
  // 当前排序列
  // 年龄段筛选值
  const [stage, setStage] = useState(ALL_VALUE);
  // 婚姻状态筛选值
  const [marriages, setMarriages] = useState([]);

  let filteredRecords = records.slice();

  // 根据年龄段筛选
  if (stage !== ALL_VALUE) {
    filteredRecords = filteredRecords.filter(x => x.stage === stage);
  }

  // 根据混音状态
  if (marriages.length > 0) {
    filteredRecords = filteredRecords.filter(
      record => marriages.indexOf(record.marriage) > -1
    );
  }

  return (
    <Table
      records={filteredRecords}
      recordKey={x => x.name}
      columns={[
        { key: "name", header: "姓名" },
        {
          key: "stage",
          header: "年龄段",
          render: x => STAGE_TEXT[x.stage],
        },
        {
          key: "marriage",
          header: "婚姻状态",
          render: x => MARRIAGE_TEXT[x.marriage],
        },
      ]}
      addons={[
        // 对 age 列增加单选过滤支持
        filterable({
          type: "single",
          column: "stage",
          value: stage,
          onChange: value => setStage(value),
          // 增加 "全部" 选项
          all: {
            value: ALL_VALUE,
            text: "全部",
          },
          // 选项列表
          options: [
            { value: "teenager", text: "少年" },
            { value: "youth", text: "青年" },
            { value: "middle-aged", text: "中年" },
            { value: "elder", text: "老年" },
          ],
        }),

        // 对 marriage 列增加多选过滤支持
        filterable({
          type: "multiple",
          column: "marriage",
          value: marriages.map(x => String(x)),
          onChange: value => {
            setMarriages(value.map(x => Number(x)));
          },
          all: {
            value: ALL_VALUE,
            text: "全部",
          },
          options: MARRIAGE_TEXT.map((text, index) => ({
            value: index.toString(),
            text,
          })),
        }),
      ]}
    />
  );
}