import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Tabs, Radio, DatePicker, message, Upload } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import moment from 'moment';
import router from 'umi/router';
import BuildSelect from '../../../../../components/SelectButton/BuildSelect'
import XForm, { FieldTypes } from '../../../../../components/XForm';
import Wangedit from '../../../../../components/Wangedit/Wangedit'
import request from '../../../../../utils/request'
import yinhao from '../../../../../assets/yinhao.png'
import ImageUploader from '../../../../../components/XForm/ImageUpload';
import logo from '../../../../../assets/logo.png';
import touxiang from '../../../../../assets/touxiang.jpg';
import poster1 from '../../../../../assets/poster1.png';
import poster2 from '../../../../../assets/poster2.png';
import apis from '../../../../../services/apis';

const Share = props => {
  const [inputValue, changeInput] = useState('')
  const [imgValue, changeImg] = useState('')
  const [shareContentId, setShareContentId] = useState('')

  const { buildingId } = props.building
  if (buildingId) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      request({
        ...apis.activity.shareContent,
        params: { targetId: buildingId, targetType: 'building' },
      }).then(data => {
        if (data.length > 0) {
          setShareContentId(data[0].shareContentId)
          changeImg(data[0].shareContentImg)
          changeInput(data[0].shareContentTitle)
        }
      }).catch(err => {
        message.info(err.msg || err.message)
      })
    }, [])
  }

  const submitShare = () => {
    if (buildingId) {
      if (shareContentId) {
        request({
          ...apis.activity.updateShareContent,
          urlData: { id: shareContentId },
          data: { targetId: buildingId, shareContentType: 'building', shareContentImg: imgValue,shareContentTitle: inputValue },
        }).then(data => {
          message.info('保存成功')
        }).catch(err => {
          message.info(err.msg || err.message)
        })
       } else {
        request({
          ...apis.activity.addShareContent,
          data: { targetId: buildingId, shareContentType: 'building', shareContentImg: imgValue,shareContentTitle: inputValue },
        }).then(data => {
          setShareContentId(data.shareContentId)
          message.info('保存成功')
        }).catch(err => {
          message.info(err.msg || err.message)
        })
       }
     } else {
      message.warn('请先保存基本信息数据')
     }
  }

  return <div style={{ padding: '20px' }}>
    <div style={{ display: 'flex', margin: '10px 0 40px 0', width: '100%' }}>
      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享模板</p>
      <div>
        <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}>
          <img src={logo} style={{ width: '22px', marginRight: '10px' }} />
          知与行互动
        </p>
        <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
        <img style={{ width: '200px', height: '140px' }} src={imgValue ? imgValue : poster2} alt="" />
      </div>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享标题</p>
      <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
    </div>
    <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
      <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
    </div>
    <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '250px' }}>图片比例: 5:4</p>
    <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
    <Button onClick={() => router.go(-1)}>取消</Button>
  </div>
}

export default Share