import { BfImagePreview } from '@bud-fe/react-taro-ui';
import { Button } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [show, setShow] = useState(false);

  return (
    <>
      <Button
        className="group-title"
        onClick={() => {
          BfImagePreview.open({
            imageUrls: [
              'https://w.wallhaven.cc/full/9m/wallhaven-9myy38.png',
              'https://w.wallhaven.cc/full/q2/wallhaven-q2xerq.jpg',
              'https://w.wallhaven.cc/full/g7/wallhaven-g7e2r7.png',
              'https://w.wallhaven.cc/full/3z/wallhaven-3z1r1d.png',
              'https://w.wallhaven.cc/full/wq/wallhaven-wq7m77.jpg',
              'https://w.wallhaven.cc/full/v9/wallhaven-v9lpxp.jpg',
              'https://w.wallhaven.cc/full/q2/wallhaven-q2qzw7.jpg',
            ],
            current: 1,
          });
        }}
      >
        预览（函数调用，小程序不支持）
      </Button>
      <Button className="group-title" onClick={() => setShow(true)}>
        预览
      </Button>
      <BfImagePreview
        isOpened={show}
        imageUrls={[
          'https://w.wallhaven.cc/full/wq/wallhaven-wq7m77.jpg',
          'https://w.wallhaven.cc/full/v9/wallhaven-v9lpxp.jpg',
          'https://w.wallhaven.cc/full/q2/wallhaven-q2qzw7.jpg',
        ]}
        onClose={() => setShow(false)}
      />
      <BfImagePreview />
    </>
  );
};