import React, { PureComponent, useState, useEffect } from 'react'
import { Modal, Row, Col, Table, Pagination, Button, Form, Input,message, Icon, notification } from 'antd'
import ImageUpload from './ImageUpload';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';

const UpdateSeal = props => {
  const sealId = props.sealId
  const companyId = props.companyId
  const [sealData, setSealData] = useState({})

  useEffect(() => {
    getSealData();
  },[sealId])

  // 查询列表
  function getSealData() {
    request({ ...apis.seal.taSealById, urlData: { id: sealId } }).then((data) => {
      console.log(data, 'datadata')
      setSealData(data)
    }).catch((err) => {
      message.error(err.msg || err.message)
    })
  }  

  function close(e){
    props.onCancel(e)
  }

  function success(e){
    props.onSuccess(e)
  }
  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        request({ ...apis.seal.updateSealById, urlData:{id: sealId}, data: { ...values, id: sealId, companyId: companyId },}).then((data) => {
          message.info("保存成功")
          success({visable:false, sealId:'', companyId: companyId})
        }).catch((err) => {
          message.info(err.msg || err.message)
        })
      }
    });
  }

  function openNotificationWithIcon(type, message) {
    notification[type]({
      message,
      description:
        '',
    });
  }

  function checkImageWH(file, width, height) {
    let self = this;
    return new Promise(function (resolve, reject) {
        let filereader = new FileReader();
        filereader.onload = e => {
            let src = e.target.result;
            const image = new Image();
            image.onload = function () {
                if (width && this.width != width && height && this.height != height) {
                    message.error('图片尺寸不符合要求')
                    reject();
                } else {
                    resolve();
                }
            };
            image.onerror = reject;
            image.src = src;
        };
        filereader.readAsDataURL(file);
    });
}

  const handleBeforeUpload = (file) => {
    //限制图片 格式、分辨率
    const isPNG = file.type === 'image/png';
    if (! isPNG){
        message.error('请上传PNG格式图片')
    }
    return (isPNG ) && checkImageWH(file, 166, 166);
  }  

  const { getFieldDecorator } = props.form

  return (
    <Modal footer={null} title="修改印章" visible={props.visible} onCancel={() => close({visable:false, companyId:companyId, sealId:''})} width={800}>
      {
        sealData && sealData.sealId &&
        (
          <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
            <Form.Item label="印章名称">
                {getFieldDecorator('sealName',{initialValue:sealData.sealName,
                rules: [
                    {
                    required: true,
                    message: '请填写印章名称',
                    },
                ],
                })(<Input maxLength={10}/>)}
            </Form.Item>
            <Form.Item label="印章图" help="166*166 像素，PNG格式透明底 ">
                {getFieldDecorator('sealImg', {initialValue:sealData.sealImg,
                  rules: [{ required: true, message: '请选择印章图' }],
                })(
                  <ImageUpload beforeUpload={handleBeforeUpload} />,
                )}
              </Form.Item>
            <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
                <Button type="primary" htmlType="submit">确定</Button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Button onClick={() => close({visable:false, companyId: companyId, sealId:''})}>取消</Button>
             </Form.Item>
          </Form>
        )
      }
    </Modal>
  );
}

const WrappedBase = Form.create({ name: 'UpdateSeal' })(UpdateSeal);

export default WrappedBase

