import React from 'react'
import { message } from 'antd'
import IconFont from '../../../themeComponents/IconFont';
import Portal from '../Portal'
import QueueAnim from '../QueueAnim'
import OriginUpload from '../OriginUpload'
import ModalSelectRectImage from '../ModalSelectRectImage'
import './index.less'
import { base64ToBlob } from '../utils/image'
import Service from '../service'
import _ from 'lodash'
class UploadPortal extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      rects: [],
      options: {
        url: null,
        pictureUrl: null,
        feature: null,
        type: 'image',
        code: 'static-image'
      }
    }
  }
  customUpload = async files => {
    const blob = base64ToBlob(files[0].url)
    let type=this.props.type
    const formData = new FormData()
    let urlRes
    formData.append('file', blob)

    try {
      urlRes = await Service.uploadPersonPicture(formData)
    } catch (e) {
      message.warn('上传失败！')
    }
    if (!urlRes) {
      return
    }
    if(type==="person"){
      try {
        const result = await Service.getFaceFeature({ url: urlRes.data.url })
        const cloneResult = _.cloneDeep(result.data.list)
        if (cloneResult.length > 1) {
          const r = _.cloneDeep(result.data.list).map(item => {
            item.value = `${item.rect.left},${item.rect.top},${item.rect.width},${item.rect.height}`
            item.type = 'face'
            item.needExpand = 'true'
            // item.isDefault = 'false'
            item.rect = [item.rect.left,item.rect.top,item.rect.width,item.rect.height]
            return item
          })
          const options = this.state.options
          options.url = urlRes.data.url
          this.setState({
            rects: r,
            visible: true,
            options,
          })
          return;
        }
        if (result.data.list.length === 1) {
          return this.onClickDefaultRect( urlRes.data.url,true,result.data.list[0])
        }
        return message.warn('未获取到特征值！')
      } catch (e) {
        message.warn(e.data ? e.data.message : '未获取到特征值！')
      }
    }else{
      try {
        const result = await Service.getVehicleFeature({ url: urlRes.data.url })
        const cloneResult = _.cloneDeep(result.data.vehicles)
        if (cloneResult.length > 1) {
          const r = cloneResult.map(item => {
            // item.value = `${item.rect.left},${item.rect.top},${item.rect.width},${item.rect.height}`
            item.type = 'vehicle'
            item.needExpand = 'false'
            item.isDefault = 'false'
            item.rect = [item.rect.left,item.rect.top,item.rect.width,item.rect.height]
            return item
          })
          const options = this.state.options
          options.url = urlRes.data.url
          this.setState({
            rects: r,
            visible: true,
            options,
          })
          return;
        }else{
          const options = this.state.options
          options.url = urlRes.data.url
           this.setState({
            options
          })
          return this.onClickDefaultRect(urlRes.data.url, true,result.data.vehicles[0])
        }
        
      } catch (e) {
        message.warn(e.data ? e.data.message : '未获取到特征值！')
      }

    }
    
  }
  onClickDefaultRect = async ( url, isNobase64 = false,item) => {
    const { options } = this.state
    let type=this.props.type
    let pictureUrl = url
    if (!isNobase64) {
      const blob = base64ToBlob(url)
      const formData = new FormData()
      formData.append('file', blob)
      const urlRes = await Service.uploadPersonPicture(formData)
      pictureUrl = urlRes.data.url
    }
    options.pictureUrl = pictureUrl
    if(type==="person"){
      options.feature = item.feature
    }else{
      options.plateNo4ImgSearch=item.plateNo
      options.plateColor4ImgSearch=parseInt(item.plateColor)
    }
    this.setState({ options, visible: false })
    return this.props.onChange && this.props.onChange(options)
  }
  onClickDefaultRects = async (item = {}, url) => {
    // console.log(item, 'iiiiiiiiiiiiiiii')
    const blob = base64ToBlob(item.base64)
    const formData = new FormData()
    formData.append('file', blob)
    const urlRes = await Service.uploadPersonPicture(formData)
    const pictureUrl = urlRes.data.url
    const { options } = this.state
    let type=this.props.type
    if (type === 'person') {
      options.pictureUrl = pictureUrl
      options.feature = item.feature
    }else{
      options.plateNo4ImgSearch = item.plateNo
      options.plateColor4ImgSearch = parseInt(item.plateColor)
    }
    console.log(options)
    this.setState({ options, visible: false})

    return this.props.onChange && this.props.onChange(options)
  }
  render() {
    const { getContainer, visible ,type} = this.props
    return (
      <>
        <Portal getContainer={getContainer} visible={visible}>
          <QueueAnim type="top" leaveReverse={true}>
            <OriginUpload className="drop-upload-view" uploadType="local" customUpload={this.customUpload} key="imgUpload">
              <div className="content-image-box">
                <label className="image-upload">
                  <IconFont type={'icon-L_Bar_AddImg'} theme="outlined" />
                </label>
                <div className="box-text">点击“+”上传图片，或拖拽图片到这里搜图</div>
              </div>
            </OriginUpload>
          </QueueAnim>
        </Portal>
        <ModalSelectRectImage
          className="modal-select-face"
          width="960px"
          title={type==="person"?"请选择人脸":"请选择车辆"}
          url={this.state.options.url}
          rects={this.state.rects}
          hasFooter={false}
          visible={this.state.visible}
          onCancel={() => this.setState({ visible: false })}
          onClickDefaultRect={this.onClickDefaultRects}
        />
      </>
    )
  }
}

export default UploadPortal
