import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import moment from 'moment';
import React, { useMemo, useState } from 'react';
import OpButton, { DelOpButton, EditOpButton } from '../../components/crud/OpButton';
import { DamItem } from '../../models/_/defs';
import { IContextProp } from './_';




const DataTable: React.FC<{
  ctx: IContextProp
}> = ({ ctx }) => {

  const { pager2, crud } = ctx;
  const generateTimeData = (count = 15) => {
        const timeLabels = [];
        const now = moment();
        
        for (let i = count - 1; i >= 0; i--) {
          const time = now.clone().subtract(i, 'hours');
          timeLabels.push(time.format('YYYY-MM-DD HH:mm'));
        }
        
        return timeLabels;
      };
    
       // 电压数据
      const voltageData = [0, 0,15, 12, 17, 11, 13,0,5, 0,0,0,0,15, 12, 17, 11, 13,30, 0,0,0,0,0,5, 0,0,0,0,15, 12, 17,30, 11, 13];
      
      // 时间标签
      const timeLabels = generateTimeData(15);
  const columns = useMemo<ColumnsType<DamItem>>(() => [
 
    { title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' },
   
    { title: '测站编码', key: '测站编码', dataIndex: '测站编码', width: 120, align: 'center' },
    {
      title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center',
      render: (v: any, r: any, i: any) => <span>{timeLabels[i]}</span>
      
     },
    {
      title: '数据(mm)', key: '数据(mm)', dataIndex: '数据(mm)', width: 120, align: 'center',
      render: (v: any, r: any, i: any) => <span>{voltageData[i]}</span>
      
     },
  ], []);

  const [openIntroduction, setOpenIntroduction] = useState(false);


  const onCloseIntroduction = () => {
    setOpenIntroduction(false);
  };
  const [form] = Form.useForm();
  // 弹框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Table
        columns={columns}
        rowKey={row => row.大坝代码}
        {...pager2.tableProps}
      />
        <Modal title="详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
       <Form form={form} name="validateOnly" layout="vertical" autoComplete="off" >
      <Form.Item name="序号" label="序号" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="站名" label="站名" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="数据(mm)" label="数据(mm)" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Space>
        
          <Button htmlType="reset">Reset</Button>
        </Space>
      </Form.Item>
    </Form>
    </Modal>
    </>
  )
}

export default DataTable