import React, { useState, useEffect } from 'react';
import { Input, Button, message } from 'antd';
import router from 'umi/router';
import apis from '@/services/apis';
import request from '@/utils/request';
import yinhao from '@/assets/yinhao.png';
import ImageUploader from '@/components/XForm/ImageUpload';
import touxiang from '@/assets/touxiang.jpg';
import poster1 from '@/assets/poster1.png';
import xiaochengxu from '@/assets/xiaochengxu.png';

const { TextArea } = Input;

const cancelPage = () => {
  router.go('-1');
};

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

  useEffect(() => {
    if (dynamicId) {
      request({ ...apis.activity.poster, params: { targetId: dynamicId, targetType: 'activity' } })
        .then(data => {
          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);
        });
    }
    // getMiniappName()
  }, []);

  // 获取小程序名称
  // const [miniappName, setMiniappName] = useState('')
  // function getMiniappName() {
  //   request({ ...apis.building.getMiniappName }).then(res => {
  //     console.log(res, "0000000000000")
  //     setMiniappName(res)
  //   })
  // }

  const submitPoster = () => {
    if (dynamicId) {
      if (posterId) {
        request({
          ...apis.activity.updatePoster,
          urlData: { id: posterId },
          data: {
            targetId: dynamicId,
            targetType: 'activity',
            posterImg: imgValue,
            posterTitle: inputValue,
            posterDescription: textAreaValue,
          },
        })
          .then(data => {
            message.info('保存成功');
          })
          .catch(err => {
            message.info(err.msg || err.message);
          });
      } else {
        request({
          ...apis.activity.addPoster,
          data: {
            targetId: dynamicId,
            targetType: 'activity',
            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 || poster1} alt="" />
            <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
              <img
                style={{
                  width: '70px',
                  height: '70px',
                  border: '4px solid #fff',
                  borderRadius: '35px',
                  marginLeft: '16px',
                }}
                src={touxiang}
                alt=""
              />
              <span
                style={{
                  color: '#222',
                  fontWeight: '600',
                  margin: '24px 10px 0 14px',
                  fontSize: '17px',
                }}
              >
                喵喵
              </span>
              <span style={{ color: '#999', marginTop: '25px', fontSize: '17px' }}>邀您参与</span>
              <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>
                2019.09.21
              </span>
            </div>
            <p
              style={{
                margin: '10px 20px',
                fontSize: '20px',
                color: '#222',
                fontWeight: '600',
                display: '-webkit-box',
                lineClamp: '3',
                height: '60px',
                WebkitLineClamp: '2',
                WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {inputValue || '海报标题'}
            </p>

            <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} 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: '60px 0' }}>
            <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: '230px',
              marginBottom: '30px',
            }}
          >
            建议图片尺寸：640*670px，比例64:67,格式：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={() => cancelPage()}>取消</Button>
    </div>
  );
};

export default Poster;
