import { postServiceOrderViewImages } from '@/services';
import { Button, Divider, Image, Modal } from 'antd';
import { useEffect, useState } from 'react';
export default ({ setVisible, optType, onClose, orderRow }) => {
  const [images, setImages] = useState<any[]>([]);
  const [title, setTitle] = useState('收货凭证');
  const handleOk = () => {
    onClose();
    setVisible(false);
  };

  const handleCancel = () => {
    onClose();
    setVisible(false);
  };

  async function getImages() {
    const res = await postServiceOrderViewImages({
      data: { subId: orderRow.id },
    });
    const images = res.data;
    setImages(images);
  }
  useEffect(() => {
    if (optType === 'shippingReceipt') {
      setTitle('收货凭证');
      getImages();
    } else if (optType === 'paymentReceipt') {
      let paymentReceiptsImagesList: any[] = [];
      if (orderRow.paymentReceiptAnnexList) {
        paymentReceiptsImagesList.push(...orderRow.paymentReceiptAnnexList);
      }
      //去重
      paymentReceiptsImagesList = [...new Set(paymentReceiptsImagesList)];
      setImages(paymentReceiptsImagesList);
    }
  }, []);

  return (
    <>
      <Modal
        title={title}
        open
        onOk={handleOk}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={handleCancel}>
            返回
          </Button>,
        ]}
      >
        <Image.PreviewGroup
          className="mr-10"
          preview={{
            onChange: (current, prev) =>
              console.log(`current index: ${current}, prev index: ${prev}`),
          }}
        >
          {images.map((url) => (
            <>
              <Image width={120} src={url} /> <Divider type="vertical" />
            </>
          ))}
        </Image.PreviewGroup>
      </Modal>
    </>
  );
};