import { Modal, Space, Table } from 'antd';
import React, { useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import DataCheck from '@/pages/ProductionDataManagement/dataCheck';

interface editPros {
  visible: boolean;
  editCallback: () => void;
  params: any;
}

interface DataType {
  record_id: string;
  deviceCode: string;
  name: string;
  data: string;
  pass: boolean;
}

const DetectionData: React.FC<editPros> = (props) => {
  const { params, visible, editCallback } = props;
  const [dataVisible, setDataVisible] = useState(false);
  const [checkParams, setCheckParams] = useState({});

  const onOk = () => {
    editCallback();
  };

  const onCancel = () => {
    editCallback();
  };

  // 查看数据弹框
  const checkData = (record: any) => {
    setDataVisible(true);
    setCheckParams(record?.data);
  };

  // 查看数据弹框回调
  const checkDataCallback = () => {
    setDataVisible(false);
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      key: 'index',
      render: (_: any, row: any, index: number) => index + 1,
    },
    {
      title: '设备编号',
      dataIndex: 'deviceCode',
      key: 'deviceCode',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '是否通过',
      dataIndex: 'pass',
      key: 'pass',
      render: (v) => (v ? '通过' : '不通过'),
    },
    {
      title: '检测数据',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              checkData(record);
            }}
          >
            查看
          </a>
        </Space>
      ),
    },
  ];

  return (
    <Modal title="数据" open={visible} onOk={onOk} onCancel={onCancel} width={800}>
      <Table
        columns={columns}
        dataSource={params.steps}
        rowKey={(record) => record.record_id}
        style={{ margin: '20px 0' }}
      />
      {dataVisible && (
        <DataCheck
          dataVisible={dataVisible}
          editCallback={checkDataCallback}
          checkParams={checkParams}
        />
      )}
    </Modal>
  );
};
export default DetectionData;
