import { PageContainer } from '@ant-design/pro-components';
import { Card, Space, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { queryDataList } from '@/services/ProductionDataManagement';
import { queryRole } from '@/services/role';
import DetectionData from '@/pages/ProductionDataManagement/detectionData';

interface DataType {
  record_id: string;
  name: string;
}

const ProductionDataManagement: React.FC = () => {
  const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
  const [loading, setLoading] = useState(false);
  const [dataList, setDataList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [params, setParams] = useState({});

  // 获取数据
  const getList = () => {
    const data = {
      q: 'page',
      current: pagination.current,
      pageSize: pagination.pageSize,
    };
    queryDataList(data).then((res) => {
      if (res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  useEffect(() => {
    setLoading(true);
    getList();
  }, []);

  // table切换
  const tableChange = () => {
    setLoading(true);
    const data = {
      q: 'page',
      current: pagination.current,
      pageSize: pagination.pageSize,
    };
    queryRole(data).then((res) => {
      if (res && res.code === 0) {
        setDataList(res.data.list);
        setPagination(res.data.pagination);
        setLoading(false);
      }
    });
  };

  // 时间戳转时间格式
  const timestampToTime = (timestamp: any) => {
    const date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    const Y = date.getFullYear() + '-';
    const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + '-';
    const D = date.getDate() + ' ';
    const h = date.getHours() + ':';
    const m = date.getMinutes() + ':';
    const s = date.getSeconds();
    return Y + M + D + h + m + s;
  };

  // 检测数据弹框打开
  const detectionData = (record: any) => {
    setVisible(true);
    setParams(record);
  };

  const editCallback = () => {
    setVisible(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: 'startTime',
      key: 'startTime',
      render: (v) => v && timestampToTime(v),
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
      render: (v) => v && timestampToTime(v),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              detectionData(record);
            }}
          >
            设备数据
          </a>
        </Space>
      ),
    },
  ];

  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => {
      return <span> 共 {total}条 </span>;
    },
    ...pagination,
  };

  return (
    <PageContainer>
      <div>
        <Card>
          <Table
            columns={columns}
            dataSource={dataList}
            rowKey={(record) => record.record_id}
            pagination={paginationProps}
            loading={loading}
            onChange={tableChange}
            style={{ margin: '20px 0' }}
          />
          {visible && (
            <DetectionData visible={visible} editCallback={editCallback} params={params} />
          )}
        </Card>
      </div>
    </PageContainer>
  );
};

export default ProductionDataManagement;
