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 MyWorkerCreate from '../modals/WorkerCreate';
import MyWorkerUpdate from '../modals/WorkerUpdate';

export default function Index(props: MyBetaModalFormProps) {
  return (
    <ProTable
      {...MyProTableProps.props}
      headerTitle="装修工人"
      request={async (params, sort) =>
        MyProTableProps.request(
          {
            ...params,
            renovation_applies_id: props?.item?.id,
          },
          sort,
          Apis.Renovation.RenovationWorkers.List,
        )
      }
      toolBarRender={(action) => [
        <MyWorkerCreate
          key="Create"
          reload={action?.reload}
          item={{
            ...props?.item,
            size: 'middle',
          }}
          title="装修工人"
        />,
      ]}
      columns={[
        MyColumns.ID({ search: false }),
        {
          title: '姓名',
          dataIndex: 'worker_name',
        },
        {
          title: '电话',
          dataIndex: 'worker_phone',
          search: false,
        },
        {
          title: '有效期',
          search: false,
          render: (_, item: any) => {
            return `${item?.valid_from} 至 ${item?.valid_to}`;
          },
        },
        MyColumns.EnumTag({
          title: '证件类型',
          dataIndex: 'card_type',
          valueEnum: HouseOccupantsCardTypeEnum,
          search: false,
        }),
        {
          title: '证件正面照',
          search: false,
          render: (_, item: any) => {
            return <Image src={item?.card_front?.[0]?.url} height={50} />;
          },
        },
        {
          title: '证件反面照',
          search: false,
          render: (_, item: any) => {
            return <Image src={item?.card_back?.[0]?.url} height={50} />;
          },
        },
        {
          title: '工人照片',
          search: false,
          render: (_, item: any) => {
            return <Image src={item?.worker_photo?.[0]?.url} height={50} />;
          },
        },
        // MyColumns.UpdatedAt(),
        MyColumns.CreatedAt(),
        MyColumns.Option({
          render: (_, item: any, index, action) => (
            <Space key={index}>
              <MyWorkerUpdate
                item={item}
                reload={action?.reload}
                title="编辑"
              />
              <MyButtons.Delete
                onConfirm={() =>
                  Apis.Renovation.RenovationWorkers.Delete({
                    id: item.id,
                  }).then(() => action?.reload())
                }
              />
            </Space>
          ),
        }),
      ]}
    />
  );
}
