import { getAliYunOSSFileNameFromUrl, isImageName } from '@/utils';
import { ModalForm } from '@ant-design/pro-components';
import { Button, Card, Divider, Empty, Form, Image, List, message } from 'antd';
import Base64 from 'base-64';
import { cloneDeep } from 'lodash';
import React, { useEffect, useState } from 'react';

export default ({ data, onClose }) => {
  let newData = cloneDeep(data);
  const [fileList, setFileList] = useState<[]>([]);
  console.log(fileList);
  const [form] = Form.useForm<{
    subOrderId: '';
    listAnnex: [];
  }>();

  let newListAnnex = newData.listAnnex?.map((path) => {
    let i = 0;
    return {
      uid: i++,
      name: getAliYunOSSFileNameFromUrl(path),
      status: 'uploaded',
      url: path,
      response: { data: [path] },
    };
  });
  newData.listAnnex = newListAnnex;

  //将图片和其他文件区分开
  let images: any[] = [];
  let otherAnnex: any[] = [];
  newListAnnex.forEach((item: any) => {
    if (isImageName(item.name)) {
      images.push(item);
    } else {
      otherAnnex.push(item);
    }
  });

  useEffect(() => {
    setFileList(newData.listAnnex);
  }, []);

  return (
    <ModalForm
      width={800}
      open
      title="查看附件"
      initialValues={newData}
      form={form}
      modalProps={{
        onCancel: onClose,
      }}
      submitter={{
        render: () => {
          return [
            <Button
              key="back"
              onClick={() => {
                onClose();
              }}
            >
              返回
            </Button>,
          ];
        },
      }}
    >
      {newListAnnex?.length <= 0 ? (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      ) : (
        // <ProFormUploadDragger
        //   name="listAnnex"
        //   action="/api/service/order/fileProcess"
        //   disabled
        //   fieldProps={{
        //     headers: { Authorization: localStorage.getItem('token') },
        //     // onRemove: (file) => {
        //     //   const index = fileList[listMeta.index].indexOf(file);
        //     //   console.log(index);
        //     //   const newFileList = fileList.slice();
        //     //   newFileList.splice(index, 1);
        //     //   setFileList(newFileList);
        //     // },
        //     // beforeUpload: (file) => {
        //     //   fileList[listMeta.index] = [...fileList[listMeta.index], file as RcFile];
        //     //   setFileList(fileList);
        //     //   return true;
        //     // },
        //     fileList,
        //     // defaultFileList: itemFileList
        //   }}
        // />
        <>
          <Card>
            <Image.PreviewGroup
              className="mr-10"
              preview={{
                onChange: (current, prev) =>
                  console.log(`current index: ${current}, prev index: ${prev}`),
              }}
            >
              {images.map((item, index) => (
                <React.Fragment key={index}>
                  <Image
                    className="max-h-[200px] max-w-[200px]"
                    src={item.url}
                    title={item.name}
                  />{' '}
                  <Divider type="vertical" />
                </React.Fragment>
              ))}
            </Image.PreviewGroup>
          </Card>
          <Divider />

          <div>
            <List
              size="small"
              header={<div>其他类型文件</div>}
              bordered
              dataSource={otherAnnex}
              renderItem={(item) => (
                <List.Item
                  actions={[
                    <Button
                      type="link"
                      key="key"
                      href={item.url}
                      className="py-1"
                    >
                      下载
                    </Button>,
                    <Button
                      type="link"
                      key="key"
                      className="py-1"
                      onClick={() => {
                        message.info(item.url);
                        window.open(
                          '/previewApi/onlinePreview?url=' +
                            encodeURIComponent(Base64.encode(item.url)),
                        );
                      }}
                    >
                      预览
                    </Button>,
                  ]}
                >
                  <div>
                    <span>{item.name}</span>
                  </div>
                </List.Item>
              )}
            />
          </div>
        </>
      )}
    </ModalForm>
  );
};