import React, { useState, useEffect } from 'react';
import { Card, Checkbox, Button, Upload } from 'antd';
import apis from '../../services/apis';
import request from '../../utils/request'
import { uploaderProps } from '../../utils/upload';
import head1 from '../../assets/head1.png';
import head2 from '../../assets/head2.png';
import head3 from '../../assets/head3.png';
import link from '../../assets/link.png';

const { Meta } = Card;

/**
 *
 *
 * @param {*} props
 * @returns
 */
const PosterCard = (props) => {
  const [data, setData] = useState([])
  const [indexOneUrl, setIndexOneUrl] = useState('')
  const [indexTwoUrl, setIndexTwoUrl] = useState('')
  const [indexThreeUrl, setIndexThreeUrl] = useState('')
  let resultData = []

  useEffect(() => {
  }, [])

  const handleUploadIndexOneSucess = url => {
    console.log(url, "第一张图上传回调");
    setIndexOneUrl(url)
    resultData[0] = url
    resultData[1] = indexTwoUrl
    resultData[2] = indexThreeUrl
    props.onChange(resultData)
  }

  const handleUploadIndexTwoSucess = url => {
    console.log(url, "第二张图上传回调");
    setIndexTwoUrl(url)
    resultData[0] = indexOneUrl
    resultData[1] = url
    resultData[2] = indexThreeUrl
    props.onChange(resultData)
  }

  const handleUploadIndexThreeSucess = url => {
    console.log(url, "第三张图上传回调");
    setIndexThreeUrl(url)
    resultData[0] = indexOneUrl
    resultData[1] = indexTwoUrl
    resultData[2] = url
    props.onChange(resultData)
  }

  return (

    <div style={{ display: 'flex' }}>

      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
          <img style={{ width: '100%', height: '100%' }} src={indexOneUrl} alt="" />
          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '38px' }} alt="" />
          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '79px', color: '#333' }}>小五子</p>
          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '58px', color: '#333' }}>175 1256 0225</p>
          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '39px', color: '#666' }}>邀请您参与活动</p>
          <img src={link} style={{ margin: '0', width: '80px', height: '80px', backgroundColor: '#fff', padding: '4px', borderRadius: '6px', position: 'absolute', right: '30px', bottom: '45px' }} alt="" />
          <p style={{ margin: '0', fontSize: '13px', position: 'absolute', right: '30px', bottom: '20px', color: '#666' }}>长按识别更多</p>

        </div>
        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
        <p style={{ textAlign: 'center' }}>
          <Upload showUploadList={false}
            {...uploaderProps}
            onSuccess={handleUploadIndexOneSucess}>
            <Button>
              上传图片
          </Button>
          </Upload>
        </p>
      </div>

      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
          <img style={{ width: '100%', height: '100%' }} src={indexTwoUrl} alt="" />
          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '122px' }} alt="" />
          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '163px', color: '#333' }}>小五子</p>
          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '142px', color: '#333' }}>175 1256 0225</p>
          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '121px', color: '#666' }}>邀请您参与活动</p>
          <div style={{ margin: '0', width: '100%', height: '112px', backgroundColor: '#fff', position: 'absolute', left: '0px', bottom: '0.5px', }}>
            <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '30px', bottom: '58px', color: '#666' }}>长按识别小程序码</p>
            <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '30px', bottom: '31px', color: '#666' }}>进入<span style={{ margin: '0 10px', fontSize: '17px', color: '#000' }}>致云</span>查看详情</p>
            <img src={link} style={{ margin: '0', width: '100px', height: '100px', position: 'absolute', right: '20px', bottom: '6px' }} alt="" />
          </div>
        </div>
        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
        <p style={{ textAlign: 'center' }}>
          <Upload showUploadList={false}
            {...uploaderProps}
            onSuccess={handleUploadIndexTwoSucess}>
            <Button>
              上传图片
          </Button>
          </Upload></p>
      </div>

      <div style={{ width: '420px', height: '940px', display: 'inline-block', marginTop: '30px' }}>
        <div style={{ width: '375px', height: '780px', backgroundColor: '#CFCFCF', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
          <img style={{ width: '100%', height: '100%' }} src={indexThreeUrl} alt="" />
          <img src={head1} style={{ width: '66px', height: '66px', position: 'absolute', left: '20px', bottom: '142px' }} alt="" />
          <p style={{ margin: '0', fontSize: '18px', position: 'absolute', left: '96px', bottom: '183px', color: '#333' }}>小五子</p>
          <p style={{ margin: '0', fontSize: '15px', position: 'absolute', left: '96px', bottom: '162px', color: '#333' }}>175 1256 0225</p>
          <p style={{ margin: '0', fontSize: '14px', position: 'absolute', left: '96px', bottom: '141px', color: '#666' }}>邀请您参与活动</p>
          <div style={{ margin: '0', width: '335px', borderRadius: '6px', height: '112px', backgroundColor: '#fff', position: 'absolute', left: '20px', bottom: '20px', }}></div>
          <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '50px', bottom: '78px', color: '#666' }}>长按识别小程序码</p>
          <p style={{ margin: '0', fontSize: '16px', position: 'absolute', left: '50px', bottom: '51px', color: '#666' }}>进入<span style={{ margin: '0 10px', fontSize: '17px', color: '#000' }}>致云</span>查看详情</p>
          <img src={link} style={{ margin: '0', width: '100px', height: '100px', position: 'absolute', right: '50px', bottom: '26px' }} alt="" />
        </div>
        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>生成海报分享给朋友</p>
        <p style={{ textAlign: 'center' }}>
          <Upload showUploadList={false}
            {...uploaderProps}
            onSuccess={handleUploadIndexThreeSucess}>
            <Button>
              上传图片
          </Button>
          </Upload>
        </p>
      </div>
    </div>
  )
}
export default PosterCard

