import React, { useState } from 'react';
import { Image, Space, Button, Row, Col } from '@btri-ui/base';

export default () => {
  const [random, setRandom] = useState<number>();
  const [random2, setRandom2] = useState<number>();
  const [imageUrl, setImageUrl] = useState<string>();
  return (
    <Row autoMode={true}>
      <Col span={4}>
        <Space direction="vertical">
          <Image
            width={200}
            src={`https://static-dist-pub.oss-cn-hangzhou.aliyuncs.com/ibuilding-ui/static/images/ImageDemoPic2x1.png?${random}`}
          />
          <Button
            type="primary"
            onClick={() => {
              setTimeout(() => {
                setRandom(Date.now());
              }, 2000);
            }}
          >
            默认加载
          </Button>
        </Space>
      </Col>
      <Col span={4}>
        <Space direction="vertical">
          <Image
            width={200}
            src={`https://static-dist-pub.oss-cn-hangzhou.aliyuncs.com/ibuilding-ui/static/images/ImageDemoPic2x1.png?${random2}`}
            placeholder={
              <Image
                preview={false}
                src={`https://static-dist-pub.oss-cn-hangzhou.aliyuncs.com/ibuilding-ui/static/images/ImageDemoPic1.png?${random2}`}
                width={200}
                placeholder={null}
                style={{ backdropFilter: 'blur(2px)' }}
              />
            }
          />
          <Button
            type="primary"
            onClick={() => {
              setRandom2(Date.now());
            }}
          >
            渐进加载
          </Button>
        </Space>
      </Col>
    </Row>
  );
};