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 xiaochengxu from '../../../../../assets/xiaochengxu.png'
import ImageUploader from '../../../../../components/XForm/ImageUpload';
import poster1 from '../../../../../assets/poster1.png';
import poster2 from '../../../../../assets/poster2.png';
import Styles from '../style.less';
import apis from '../../../../../services/apis';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { TextArea } = Input;

const Poster = props => {
  const [inputValue, changeInput] = useState('')
  const [textAreaValue, changeTextArea] = useState('')
  const [imgValue, changeImg] = useState('')
  const [posterId, setPosterId] = useState('')

  const [building, setBuilding] = useState({ buildingImg: [{ url: '' }] })
  const { buildingId } = props.building

  if (buildingId) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      request({
        ...apis.activity.poster,
        params: { targetId: buildingId, targetType: 'building' },
      }).then(data => {
        console.log(data, '2222')
        if (data.length > 0) {
          setPosterId(data[0].posterId)
          changeImg(data[0].posterImg)
          changeTextArea(data[0].posterDescription)
          changeInput(data[0].posterTitle)
        }
      }).catch(err => {
        message.info(err.msg || err.message)
      })

      getById(buildingId)
      getMiniappName()
    }, [])
  }

  // 获取详情信息
  function getById(currentId) {

    request({ ...apis.building.buildingGetById, urlData: { id: currentId } }).then(res => {
      setBuilding(res)
      console.log('getById: ', res)
    })
  }
  // 获取小程序名称
  const [miniappName, setMiniappName] = useState('')
  function getMiniappName() {

    request({ ...apis.building.getMiniappName }).then(res => {
    
      setMiniappName(res)
     
    })
  }

  const submitPoster = () => {
    if (buildingId) {
      if (!imgValue) {
        message.error('请选择海报图片')
        return
      }

      if (posterId) {
        request({
          ...apis.activity.updatePoster,
          urlData: { id: posterId },
          data: { targetId: buildingId, targetType: 'building', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue },
        }).then(() => {
          message.info('保存成功')
        }).catch(err => {
          message.info(err.msg || err.message)
        })
      } else {
        request({
          ...apis.activity.addPoster,
          data: { targetId: buildingId, targetType: 'building', posterImg: imgValue, posterTitle: inputValue, posterDescription: textAreaValue },
        }).then(data => {
          setPosterId(data.posterId)
          message.info('保存成功')
        }).catch(err => {
          message.info(err.msg || err.message)
        })
      }
    } else {
      message.warn('请先保存基本信息数据')
    }
  }

  return <div>
    <div style={{ display: 'flex' }}>
      <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
        <div style={{ width: '375px', height: '700px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
          <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : poster1} alt="" />

          <p className={Styles.tagLabel}>
            {
              building.buildingTag && building.buildingTag.map(item => <span>{item.tagName}</span>)
            }
          </p>
          <p style={{
            margin: '10px 20px', fontSize: '20px', color: '#222', fontWeight: '600',
            display: '-webkit-box', lineClamp: '3', height: '36px', lineHeight: '36px',
            WebkitLineClamp: '1',
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          }}>{inputValue || (building.buildingName || '海报标题')}</p>
          <p style={{ color: '#999', padding: ' 0 20px' }}><span style={{ color: '#fd0d0c', fontSize: '24px', marginLeft: '6px' }}>{building.price} </span><span style={{ color: '#fd0d0c', fontSize: '20px' }}></span></p>
          <img src={yinhao} style={{ width: '30px', marginLeft: '22px' }} alt="" />
          <p style={{
            margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
            display: '-webkit-box', lineClamp: '3', height: '72px',
            WebkitLineClamp: '3',
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
          }}>{textAreaValue || '海报描述'}</p>
          <div style={{ backgroundColor: '#f1f1f1', padding: '22px 30px', boxShadow: '0px 6px 12px -4px #dcdcdc',position:'relative' }}>
            <p style={{margin:'0',fontSize:'18px',color:'#888'}}>长按识别小程序码</p>
            <p style={{margin:'0',fontSize:'18px',color:'#888'}}>进入项目查看详情</p>
            <img style={{ width: '80px',position: 'absolute',right:'30px',top:'10px' }} src={xiaochengxu} alt="" />
          </div>
        </div>
        <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
      </div>
      <div >
        <div style={{ display: 'flex', width: '100%', margin: '30px 0' }}>
          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}><span style={{ color: 'red' }}>*</span> 楼盘海报图</p>
          <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
        </div>
        <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘海报</p>
        <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
          <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
        </div>
        <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>
          <TextArea rows={5} maxLength={1024} value={textAreaValue} onChange={e => changeTextArea(e.target.value)} />
        </div>

      </div>
    </div>
    <Button type="primary" onClick={submitPoster} style={{ margin: '40px 40px 40px 30vw' }}> 确定</Button>
    <Button onClick={() => router.go(-1)}>取消</Button>
  </div>
}

export default Poster
