import ButtonComp from "@/components/ButtonComp";
import { rowClassName } from "@/utils";
import { Modal, Table, Upload, UploadProps, message } from "antd";
import { FC, useEffect, useState } from "react";

interface PageProps {
  visibility: boolean;
  onCancel: () => void;
  onOk: (e: any) => void;
}

const SelectDiskDialog: FC<PageProps> = ({ visibility = false, onCancel, onOk}) => {
  const [tableData, setTableData] = useState<any>([]);
  const [total, setTotal] = useState(0);
  const [diskNumber, setdiskNumber] = useState('');

  const columns: any = [
    { title: '管理盘号', dataIndex: 'diskNumber', key: 'diskNumber', align: 'center' },
    { title: '文件数量', dataIndex: 'count', key: 'count', align: 'center' },
    { title: '使用状态', dataIndex: 'status', key: 'status', align: 'center' }
  ]

  useEffect(() => {
    if (visibility) {
      setTableData([])
      setTotal(0)
      setdiskNumber('')
    }
  }, [visibility])

  const props: UploadProps = {
    maxCount: 1,
    beforeUpload: (file: any) => {
      if (file?.name == 'diskNumber.bat') {
        message.success('导入成功');
        setTotal(1)
        setTableData([{diskNumber: 'C盘', count: 12, status: '已使用'}])
        setdiskNumber('C盘')
      } else {
        message.error('导入失败');
      }
    }
  };

  return <Modal
    title="选择管理盘"
    open={visibility}
    centered
    width={900}
    onCancel={() => onCancel()}
    footer={null}
    maskClosable={false}>
    <div className="flex_aiC_jB">
      <div>提示：请在下面列表中选择管理盘，如果没有，可导入管理盘类型为“310系统二期管理盘”的管理盘</div>
      <Upload {...props} showUploadList={false}>
        <ButtonComp text={'导入'} />
      </Upload>
    </div>

    <div className="mt30 mb10">管理盘列表（共{total}条）</div>

    <Table
      scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
      pagination={false}
      bordered
      columns={columns}
      dataSource={tableData}
      rowKey={(record: any) => record?.diskNumber}
      rowClassName={rowClassName}
    />
    <div className='flex_jE mt20'>
      <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => {
        if (tableData.length > 0) {
          onOk(diskNumber)
          onCancel()
        }else {
          message.info('请导入管理盘！')
        }
      }} />
      <ButtonComp type="cancel" text={'取消'} onClick={onCancel} />
    </div>
  </Modal>
}

export default SelectDiskDialog