import React, { useRef } from 'react';
import { Button, Space } from '@zhst/meta'
import { BigImagePreview } from '@zhst/meta'


const props = {
  heigth: '500px',
  data: {
      imageKey: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      odRect:{
        "x":0.553125,"y":0.29722223,"w":0.048958335,"h":0.2462963
      },
      cameraPosition: 'string', // 摄像头位置
      time: '2022-01-01', // 摄像头拍摄时间
  },
  onDraw: data => console.log('data', data)
}

export default () => {
  const imgRef = useRef(null)

  return (
    <Space size={[8, 16]} direction="vertical">
      <BigImagePreview {...props} ref={imgRef} />
      <Space>
        <Button type="primary" onClick={() => imgRef.current?.setShowCrop(true)}>编辑</Button>
        <Button onClick={() => imgRef.current?.handleChangeIndex(1)}>下一张</Button>
        <Button onClick={() => imgRef.current?.setShowCrop(false)}>取消</Button>
      </Space>
    </Space>
  )
}