import React, { Fragment, useRef, useState } from 'react';
import { useAccess } from '@umijs/max';
import {
  getStorageDetectionList,
  getStorageDetectionSingle,
} from '@/services/recruitmentDataCollection/jobMonitor';
import { Button, FormInstance, message } from 'antd';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { EyeOutlined } from '@ant-design/icons';
import ViewStorageDetail from './detail';

function StorageDetectionList() {
  const access = useAccess();

  const formTableRef = useRef<FormInstance>();
  const actionRef = useRef<ActionType>();

  const [currentRow, setCurrentRow] = useState<API.StorageDetection.StorageItem>();
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);

  // 查看详情
  const handleViewDetail = async (detectionId: any) => {
    setLoading(true);
    try {
      const res = await getStorageDetectionSingle(detectionId);
      if (res.code === 200) {
        setCurrentRow(res.data);
        setModalVisible(true);
      } else {
        message.error(res.msg);
      }
    } catch (error) {
      message.error('获取详情失败');
    } finally {
      setLoading(false);
    }
  };

  const columns: ProColumns<API.StorageDetection.StorageItem>[] = [
    {
      title: '采集入库日期',
      dataIndex: 'storageDate',
      valueType: 'date',
      align: 'center',
    },
    {
      title: '采集入库数量',
      dataIndex: 'storageNumber',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '采集入库结果',
      dataIndex: 'storageResult',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
    },
    // {
    //   title: '入库数据来源名称',
    //   dataIndex: 'websiteName',
    //   valueType: 'text',
    //   align: 'center',
    //   hideInSearch: true,
    //   ellipsis: true,
    // },
    {
      title: '入库数据详情',
      dataIndex: 'storageDetail',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '是否异常',
      dataIndex: 'failedReason',
      valueType: 'text',
      align: 'center',
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      dataIndex: 'detectionId',
      width: 120,
      render: (detectionId, record) => (
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>
          <Button
            type="link"
            size="small"
            key="view"
            icon={<EyeOutlined />}
            loading={loading}
            hidden={!access.hasPerms('recruitmentDataCollection:jobMonitor:view')}
            onClick={() => handleViewDetail(detectionId)}
          >
            查看详情
          </Button>
        </div>
      ),
    },
  ];

  return (
    <Fragment>
      <div style={{ width: '100%', float: 'right' }}>
        <ProTable<API.StorageDetection.StorageItem>
          actionRef={actionRef}
          formRef={formTableRef}
          rowKey="detectionId"
          key="storageDetectionIndex"
          columns={columns}
          search={{ labelWidth: 'auto' }}
          request={async (
            params: API.StorageDetection.ListParams & {
              pageSize?: number;
              current?: number;
            },
          ) => {
            const res = await getStorageDetectionList({
              ...params,
            } as API.StorageDetection.ListParams);
            return {
              data: res.rows,
              total: res.total,
              success: true,
            };
          }}
        />
      </div>
      <ViewStorageDetail
        open={modalVisible}
        values={currentRow}
        onCancel={() => {
          setModalVisible(false);
          setCurrentRow(undefined);
        }}
      />
    </Fragment>
  );
}

export default StorageDetectionList;
