import React from "react";
import Modal from "../Model/Base";
import IconFont from '../../../themeComponents/IconFont';
import Picture from '../../../components/Picture';
// import { IconFont, Picture } from '@zenview/micro-components'
import "./index.less";

class ModalSelectRectImage extends React.Component {
  // 框选搜图结果
  getSelectResult = async selectResultCb => {
    const imagePath = await selectResultCb();
    const { onClickSelectRect } = this.props;
    onClickSelectRect && onClickSelectRect(imagePath);
   
  };

  render() {
    const { className, lazyLoad, url, rects, onClickDefaultRect, hasFooter = true, ...rest } = this.props;
    return (
      <Modal
        className={`picture-rect-modal ${!hasFooter ? "picture-rect-modal-no-footer" : ""} ${className}`}
        destroyOnClose={true}  
        hasFooter={false}
        {...rest}
      >
        <Picture
          lazyLoad={lazyLoad}
          imagePath={url}
          size={{ width: 960, height: 540 }}
          key={url}
          showDefaultRect={false}
          showRect={true}
          rects={rects}
          onClickRect={(item)=> onClickDefaultRect(item)}
          disabledDrag={true}
          hasTool={false}
        >
          {({ getSelectResult, changeSelectStatus, isOpenSelect, isOverSelect }) =>
            hasFooter ? (
              <div className="picture-rect-footer">
                <div className="footer-button" onClick={() => changeSelectStatus(!isOpenSelect)}>
                  <IconFont type="icon-S_View_SearchBox" />
                  {isOpenSelect ? "取消" : "手动"}框选
                </div>
                {isOpenSelect && isOverSelect && (
                  <div className="footer-button" onClick={() => this.getSelectResult(getSelectResult)}>
                    <IconFont type="icon-S_Edit_ImgSearch" />
                    搜索截图
                  </div>
                )}
              </div>
            ) : null
          }
        </Picture>
      </Modal>
    );
  }
}

export default ModalSelectRectImage;
