import { MyButtons, MyProTableProps } from '@/common';
import { Apis } from '@/gen/Apis';
import {
  PatrolTaskLocationsStatusEnum,
  PatrolTasksStatusEnum,
} from '@/gen/Enums';
import { ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Divider, Image, Modal, Space } from 'antd';
import { useState } from 'react';
import PatrolOrderAssign from './PatrolOrderAssign';

interface PatrolOrderShowProps {
  item: any;
  title?: string;
  reload?: () => void;
}

export default function PatrolOrderShow({
  item,
  title = '巡更详情',
  reload,
}: PatrolOrderShowProps) {
  const [open, setOpen] = useState(false);
  const [data, setData] = useState<any>(null);

  const handleOpen = async () => {
    try {
      const res = await Apis.Patrol.PatrolTasks.Show({ id: item.id });
      setData(res.data);
      setOpen(true);
    } catch (error) {
      console.error('获取详情失败:', error);
    }
  };

  return (
    <>
      <MyButtons.Default onClick={handleOpen} type="primary" title={title} />
      <Modal
        title={title}
        open={open}
        onCancel={() => setOpen(false)}
        footer={null}
        width={800}
      >
        {data && (
          <>
            <ProDescriptions
              column={2}
              dataSource={data}
              columns={[
                {
                  title: '任务ID',
                  dataIndex: 'id',
                },
                {
                  title: '工单ID',
                  dataIndex: 'house_work_orders_id',
                },
                {
                  title: '项目名称',
                  dataIndex: ['asset_project', 'name'],
                },
                {
                  title: '项目名称',
                  dataIndex: ['patrol_route', 'name'],
                },
                {
                  title: '任务状态',
                  dataIndex: 'status',
                  valueEnum: PatrolTasksStatusEnum,
                },
                {
                  title: '处理人',
                  dataIndex: 'assign_employee_name',
                  span: 2,
                  render: (_, record) => {
                    const assigneeInfo = record?.house_work_order
                      ?.assign_employee?.name
                      ? `${
                          record.house_work_order.assign_employee.name || ''
                        }-${
                          record.house_work_order.assign_employee.phone || ''
                        }`
                      : '未分配';
                    return (
                      <Space>
                        <span>{assigneeInfo}</span>
                        <PatrolOrderAssign
                          item={{ ...item, title: '重新分配' }}
                          reload={handleOpen}
                          title="重新分配"
                        />
                      </Space>
                    );
                  },
                },
                {
                  title: '开始时间',
                  dataIndex: 'start_time',
                },
                {
                  title: '结束时间',
                  dataIndex: 'end_time',
                },
                {
                  title: '创建时间',
                  dataIndex: 'created_at',
                  valueType: 'dateTime',
                },
                {
                  title: '更新时间',
                  dataIndex: 'updated_at',
                  valueType: 'dateTime',
                },
                {
                  title: '完成时间',
                  dataIndex: 'complete_time',
                },
              ]}
            />
            <Divider />

            <ProTable
              {...MyProTableProps.props}
              search={false}
              toolBarRender={false}
              pagination={false}
              dataSource={data?.patrol_task_locations}
              rowKey={(record, index) => record?.id_card || index}
              size="small"
              columns={[
                {
                  title: '处理人',
                  dataIndex: 'name',
                },
                {
                  title: '点位名称',
                  dataIndex: ['patrol_location_json', 'name'],
                },
                {
                  title: '任务状态',
                  dataIndex: 'status',
                  valueEnum: PatrolTaskLocationsStatusEnum,
                },
                {
                  title: '完成时间',
                  dataIndex: 'updated_at',
                  render: (_, item) => {
                    return item?.status ===
                      PatrolTaskLocationsStatusEnum.Completed.value
                      ? item?.updated_at
                      : '-';
                  },
                },
                {
                  title: '现场照片',
                  render: (_, item) => {
                    return (
                      <Space>
                        {item?.images?.[0] && (
                          <Image
                            height={30}
                            style={{
                              width: 'auto',
                              objectFit: 'contain',
                            }}
                            src={item?.images[0]?.url}
                          />
                        )}
                      </Space>
                    );
                  },
                },
              ]}
            />
          </>
        )}
      </Modal>
    </>
  );
}
