import {
  MyBetaModalFormProps,
  MyButtons,
  MyColumns,
  MyProTableProps,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { HouseOccupantsCardTypeEnum } from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { Image, Space } from 'antd';
import Create from '../modals/WorkersCreate';
import Update from '../modals/WorkersUpdate';

export default function Index(props: MyBetaModalFormProps) {
  return (
    <ProTable<Record<any, any>>
      {...MyProTableProps.props}
      request={async (params, sort) =>
        MyProTableProps.request(
          { ...params, renovation_applies_id: props?.item?.id },
          sort,
          Apis.Renovation.RenovationWorkers.List,
        )
      }
      toolBarRender={(action) => [
        <Create
          key="Create"
          reload={action?.reload}
          item={props?.item}
          title="装修工人"
        />,
      ]}
      columns={[
        MyColumns.ID({ search: false }),
        {
          title: '工人姓名',
          dataIndex: 'worker_name',
        },
        {
          title: '工人电话',
          dataIndex: 'worker_phone',
        },
        {
          title: '有效期',
          search: false,
          render: (_, item: any) => {
            return `${item?.valid_from} - ${item?.valid_to}`;
          },
        },
        MyColumns.EnumTag({
          title: '证件类型',
          dataIndex: 'card_type',
          search: false,
          valueEnum: HouseOccupantsCardTypeEnum,
        }),
        {
          title: '证件号',
          search: false,
          dataIndex: 'id_card',
        },
        {
          title: '证件正面',
          search: false,
          render: (_, item: any) => {
            return item?.card_front?.map((res: any, index: number) => {
              return (
                <Image
                  key={`index_${index}`}
                  src={res?.url}
                  style={{ width: 60 }}
                />
              );
            });
          },
        },
        {
          title: '证件反面',
          search: false,
          render: (_, item: any) => {
            return item?.card_back?.map((res: any, index: number) => {
              return (
                <Image
                  key={`index_${index}`}
                  src={res?.url}
                  style={{ width: 60 }}
                />
              );
            });
          },
        },
        MyColumns.CreatedAt(),
        MyColumns.Option({
          render: (_, item: any, index, action) => (
            <Space key={index}>
              <Update item={item} reload={action?.reload} title="装修工人" />
              <MyButtons.Delete
                onConfirm={() =>
                  Apis.Renovation.RenovationWorkers.Delete({
                    id: item.id,
                  }).then(() => action?.reload())
                }
              />
            </Space>
          ),
        }),
      ]}
    />
  );
}
