import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import moment from 'moment';
import React, { useEffect, useMemo, useState } from 'react';
import OpButton, { DelOpButton, EditOpButton } from '../../components/crud/OpButton';
import { DamItem } from '../../models/_/defs';
import { IContextProp } from './_';
import type { DrawerProps } from 'antd/es/drawer';
import imgurl from '../../../public/assets/rzbw/bw1.png'


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

  const { pager, crud } = ctx;
const [myForm] = Form.useForm(); // 可以获取表单元素实例

  const columns = useMemo<ColumnsType<DamItem>>(() => [
    { title: '序号', key: 'id', align: 'center', width: 80, render: (_1: any, _2: any, index: number) => ctx.pager.noRender(index) },
    { title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' },
    { title: '测站编码', key: '测站编码', dataIndex: '测站编码', width: 120, align: 'center' },
    {
      title: '发送时间', key: '发送时间', dataIndex: '发送时间', width: 120, align: 'center',
      render: rec => (<span>{moment().format("YYYY-MM-DD HH:mm:ss")}</span>)
     },
    {
      title: '接收时间', key: '接收时间', dataIndex: '接收时间', width: 120, align: 'center',
      render: rec => (<span>{moment().format("YYYY-MM-DD HH:mm:ss")}</span>)
      
     },
    { title: '归属协议', key: '归属协议', dataIndex: '归属协议', width: 120, align: 'center' },
   
    // {
    //   title: '操作', key: '_',  width: 130, align: 'center', fixed: 'right',render: (value:any,row:any) => (
    //     <Space split={<Divider type="vertical" />}>
    //       <div className='act-but'><Button className='but3' type="link" 
    //       onClick={async() =>
    //       {
    //         console.log("www",row)
          
    //         myForm.setFieldsValue(row);
    //         }}>详情</Button></div>
    //     </Space>
    //   )
    // }
  ], []);


  // 弹框

  const [open, setOpen] = useState(false);
  const [size, setSize] = useState<DrawerProps['size']>();
  const [imgIndex, setImgIndex] = useState<any>(1);

  const showLargeDrawer = () => {
    setSize('large');
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  
 
  return (
    <>
      <Table
        columns={columns}
        rowKey={row => row.大坝代码}
        {...pager.tableProps}
        onRow = {(record,rowKey) => {
          return {
              onClick:(event) => {
                  console.log('onROW事件',rowKey);
                  showLargeDrawer()
                  //@ts-ignore
                  setImgIndex( rowKey + 1)
                //  获取值 引出值
          }
          }
      }}
      />
      <Drawer  title="报文历史"
        placement="right"
        size={size}
        onClose={onClose}
        open={open} 
        mask={false}
        >
             {/* < img src={`${process.env.PUBLIC_URL}/assets/rzbw/bw${imgIndex}.png`} alt=""/> */}
             <img src={require('../../../public/assets/rzbw/bw'+ [imgIndex] + '.png')}></img>
                </Drawer>
    </>
  )
}

export default DataTable