import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Select } from 'antd';
import dayjs from 'dayjs';
import React, { useRef } from 'react';

import { TIME_FORMAT } from '@/constants/global';
import { getAnchorGroupList } from '@/services/list';

const STATUS_OPTIONS = [
  { label: '已申请', value: 0 },
  { label: '已申请未进群 ', value: 1 },
  { label: '已进群 ', value: 2 },
];

const TableList: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<API.AnchorGroupListItem>[] = [
    {
      title: '主播昵称',
      dataIndex: 'nickName',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '主播ID',
      dataIndex: 'userId',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '主播手机号',
      dataIndex: 'userPhone',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '群ID',
      dataIndex: 'blGroupId',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '群名称',
      dataIndex: 'imGroupNick',
      valueType: 'textarea',
      search: false,
      copyable: true,
    },
    {
      title: '加群状态',
      dataIndex: 'status',
      valueType: 'textarea',
      renderText(status: number) {
        return STATUS_OPTIONS.find(option => option.value === status)?.label;
      },
      renderFormItem() {
        return <Select showSearch allowClear options={STATUS_OPTIONS} />;
      },
    },
    {
      title: '绑定时间',
      dataIndex: 'created',
      valueType: 'dateTime',
      renderText(created: string) {
        return dayjs(Number(created)).format(TIME_FORMAT);
      },
      search: false,
      // search: {
      //   transform: (created: string) => dayjs(created).valueOf().toString(),
      // },
    },
    {
      title: '绑定人',
      dataIndex: 'creator',
      valueType: 'textarea',
      copyable: true,
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.AnchorGroupListItem, API.PageParams>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
        request={getAnchorGroupList}
        columns={columns}
      />
    </PageContainer>
  );
};
export default TableList;
