import React, { useRef } from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { OPPreviewImage, OPButton } from '../../src/index';

export default {
  title: '组件/数据展示/OPPreviewImage',
  component: OPPreviewImage,
} as ComponentMeta<typeof OPPreviewImage>;

export const 图片预览: ComponentStory<
  typeof OPPreviewImage
> = (): JSX.Element => {
  const ref = useRef();
  const preview = () => {
    ref.current.view(1);
  };
  const datas = [
    'https://img.alicdn.com/imgextra/i1/O1CN01Y2SOnw1RCqxJtE5iF_!!6000000002076-2-tps-528-712.png',
    'https://img.alicdn.com/imgextra/i3/O1CN01ZljOEh1DlI703Puek_!!6000000000256-0-tps-960-1280.jpg',
    'https://img.alicdn.com/imgextra/i2/O1CN01yeKSst1t4Qv6ED1QB_!!6000000005848-2-tps-520-476.png',
  ];
  return (
    <div>
      <OPPreviewImage data='https://img.alicdn.com/imgextra/i3/O1CN01OUMAU71ZUjLO2QQx9_!!6000000003198-2-tps-762-425.png'></OPPreviewImage>
      <OPPreviewImage
        viewRef={ref}
        numPerLine={3}
        data={datas}
      ></OPPreviewImage>
      <OPButton onClick={preview}>点击展示</OPButton>
    </div>
  );
};