import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  MyTableActions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { VisitorAppliesStatusEnum } from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { message, Space } from 'antd';
import Reject from './modals/Reject';

export default function Index({ title = '访客预约' }) {
  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="visitor_applies_list"
      tabLabel={title}
    >
      <ProTable
        {...MyProTableProps.props}
        request={async (params, sort) =>
          MyProTableProps.request(
            params,
            sort,
            Apis.Visitor.VisitorApplies.List,
          )
        }
        headerTitle={`${title}列表`}
        columns={[
          MyColumns.ID({
            search: false,
          }),
          MyColumns.EnumTag({
            title: '申请状态',
            dataIndex: 'status',
            valueEnum: VisitorAppliesStatusEnum,
          }),
          {
            title: '房屋',
            search: false,
            dataIndex: ['asset_house', 'full_name'],
          },
          {
            title: '访客姓名',
            dataIndex: 'visitor_name',
            hidden: true,
          },
          {
            title: '访客电话',
            dataIndex: 'visitor_phone',
            hidden: true,
          },
          {
            title: '被访人电话',
            dataIndex: 'host_phone',
            hidden: true,
          },
          {
            title: '访客信息',
            search: false,
            render: (_, item: any) => {
              return (
                <Space>
                  {item.visitor_name}-{item.visitor_phone}
                </Space>
              );
            },
          },
          {
            title: '预计到访时间-离开时间',
            search: false,
            render: (_, item: any) => {
              return (
                <Space>
                  {item?.visit_start_time?.slice(0, 10)}至
                  {item?.code_expired_at?.slice(0, 10)}
                </Space>
              );
            },
          },
          {
            title: '随访人员',
            search: false,
            render: (_, item: any) => {
              return (
                <Space>
                  {item?.companions_json?.map((res: { name: string }) => {
                    return res?.name;
                  })}
                </Space>
              );
            },
          },
          MyColumns.CreatedAt(),
          MyColumns.Option({
            render: (_, item: any, __, action) => (
              <MyTableActions
                actions={{
                  audit: (
                    <MyButtons.Default
                      title="审核"
                      description="确定审核通过？"
                      isConfirm
                      disabled={item?.status !== 'Pending'}
                      size="small"
                      type="primary"
                      onConfirm={() => {
                        Apis.Visitor.VisitorApplies.Approve({
                          id: item?.id ?? 0,
                        })
                          .then(() => {
                            message.success('审核成功');
                            action?.reload();
                          })
                          .catch(() => false);
                      }}
                    />
                  ),
                  reject: (
                    <Reject item={item} reload={action?.reload} title={title} />
                  ),
                }}
              />
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}
