import React from "react";
import { Spin, Button, Tabs, Table, message, Modal, Upload, Form, Input } from "antd";
import { splitUrl } from "@/tools";
import PicturesWall from "./picturesWall";
import "./remove.less"
const FormItem = Form.Item;

const AddPicModal = React.createClass({
  getInitialState() {
    return {
      newVisible: false,
      rotateDeg: 0,
      voucherUrl: [],
    };
  },
  componentWillReceiveProps(nextProps) {
    this.setState({
      newVisible: nextProps.ShowModal,
    });
  },
  handleOk() {
    this.setState({
      newVisible: false,
    });
  },
  add() {
    if(this.state.voucherUrl.length == 0) {
        message.warning("请上传图片")
        return
    }
    if(this.state.remarks == "" || this.state.remarks == undefined) {
        message.warning("请填写图片备注")
        return
    }
    this.props.add(this.state.voucherUrl[0].response.data, this.state.remarks);
    this.setState({
      voucherUrl: [],
      remarks: undefined,
    });
  },
  getVoucherUrl(e) {
    this.setState({
      voucherUrl: e,
    });
  },
  cancel() {
      this.props.cancel()
    this.setState({
        voucherUrl: [],
        remarks: undefined
    })
  },
  render() {
    return (
      <Modal
        maskClosable={false}
        visible={this.props.visible}
        width={400}
        okText={"保存"}
        style={{ zIndex: 9999 }}
        onOk={this.add}
        onCancel={this.cancel}
      >
        <div className="clearfix">
          <FormItem
            className="half-item"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 30 }}
            label="附件"
          >
            <PicturesWall
              domId={'addPicModal1'}
              fileList={this.getVoucherUrl}
              pictureUrl={this.state.voucherUrl}
              url="/api/admin/personnel/uploadFile"
              sign="personnel_file"
            />
          </FormItem>
          <FormItem
            className="half-item"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 30 }}
            label="备注"
          >
            <Input
              placeholder="输入备注"
              style={{ width: 80 }}
              value={this.state.remarks}
              onChange={(e) => {
                this.setState({
                  remarks: e.target.value,
                });
              }}
            />
          </FormItem>
        </div>
      </Modal>
    );
  },
});

export default AddPicModal;