import { Modal,  Table } from 'antd';
import type { ProColumns } from '@ant-design/pro-components';
import  { ProDescriptions } from '@ant-design/pro-components';
import React, { useEffect } from 'react';

export type StorageFormProps = {
  onCancel: (flag?: boolean, formVals?: unknown) => void;
  open: boolean;
  values?: Partial<API.StorageDetection.StorageItem>;
};

const ViewStorageDetail: React.FC<StorageFormProps> = (props) => {
  const detailColumns: ProColumns<API.StorageDetection.StorageDetailItem>[] = [
    // {
    //   title: '详情ID',
    //   dataIndex: 'detailId',
    //   key: 'detailId',
    //   width: 80,
    //   ellipsis: true,
    // },
    {
      title: '入库来源网站名称',
      dataIndex: 'websiteName',
      key: 'websiteName',
      width: 150,
    },
    {
      title: '入库成功数量',
      dataIndex: 'successNumber',
      key: 'successNumber',
      width: 120,
      align: 'center',
    },
    {
      title: '入库失败数量',
      dataIndex: 'failedNumber',
      key: 'failedNumber',
      width: 120,
      align: 'center',
    },
    {
      title: '入库数据详情',
      dataIndex: 'storageDetail',
      key: 'storageDetail',
      width: 200,
      ellipsis: true,
    },
    {
      title: '入库具体时间',
      dataIndex: 'storageTime',
      key: 'storageTime',
      width: 180,
    },
  ];

  const handleCancel = () => {
    props.onCancel();
  };

  return (
    <Modal
      title="入库监测详情"
      open={props.open}
      width={1200}
      onCancel={handleCancel}
      footer={null}
      destroyOnClose
    >
      {/* 基本信息 */}
      <div style={{ marginBottom: 24 }}>
        <h3 style={{ marginBottom: 16 }}>基本信息</h3>
        <ProDescriptions<API.StorageDetection.StorageItem>
          column={2}
          dataSource={props.values || {}}
          bordered
        >
          {/* <ProDescriptions.Item dataIndex="detectionId" label="监测ID" /> */}
          <ProDescriptions.Item dataIndex="storageDate" label="采集入库日期" />
          <ProDescriptions.Item dataIndex="storageNumber" label="采集入库数量" />
          <ProDescriptions.Item dataIndex="storageResult" label="采集入库结果" />
          <ProDescriptions.Item 
            dataIndex="storageDetail" 
            label="入库数据详情" 
            span={2}
          />
        </ProDescriptions>
      </div>

      {/* 入库数据来源详情列表 */}
      <div>
        <h3 style={{ marginBottom: 16 }}>入库数据来源详情</h3>
        <Table<API.StorageDetection.StorageDetailItem>
          columns={detailColumns}
          dataSource={props.values?.details || []}
          rowKey="detailId"
          pagination={false}
          bordered
          size="middle"
          scroll={{ x: 800 }}
        />
      </div>
    </Modal>
  );
};

export default ViewStorageDetail;