import React, { useState } from 'react';
import { Modal, Button, Input, Form, DatePicker, Upload, message, Select, Table } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import FormItem from 'antd/lib/form/FormItem';

class FeedbackQuestion extends Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
    App = () => {
      [isModalVisible, setIsModalVisible] = useState(false);

      showModal = () => {
        setIsModalVisible(true);
      };
      onTableBtnSubmit = () => {
        this.props.dispatch({
          type: 'app/getDataByPost',
          url: 'PF/QuestionFeedback/Update',
          payload: {
            USER_NAME: this.props.data.name,
            DEAPARTMENT_NAME: this.props.data.DEAPARTMENT_NAME,
            QUESTION_DESCRIPTION: this.props.data.description,
          },
          onComplete: (ret) => {
            if (ret) {
              message.success('执行成功！');
              this.BtnClose();
            }
          }
        })
      }
      BtnClose = () => {
        if (typeof this.props.data.onCancel != "undefined" && typeof this.props.data.onCancel == 'function')
          this.props.data.onCancel();
      }
      handleOk = () => {
        setIsModalVisible(false);
      };

      handleCancel = () => {
        setIsModalVisible(false);
      };
      function onChange(date, dateString) {
        console.log(date, dateString);
      }
      props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
          authorization: 'authorization-text',
        },
        onChange(info) {
          if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
          }
        },
      };

      return (
        <>
          <span type="primary" onClick={showModal}>
            问题反馈
          </span>
          <Modal title="问题反馈" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <Form>
              <FormItem>
                <Input type="name" placeholder="姓名" />
                <Input type="name" placeholder="部门" />
              </FormItem>
              <FormItem>
                <DatePicker onChange={onChange} />
              </FormItem>
              <FormItem>
                <TextArea rows={4} placeholder="问题描述" />
              </FormItem>
              <FormItem>
                <Upload {...props}>
                  <Button icon={<UploadOutlined />}>上传附件</Button>
                </Upload>
              </FormItem>
              <FormItem>
                <Button style={{ marginLeft: '8px' }} onClick={() => this.onTableBtnSubmit()} icon="check" >提交</Button>
              </FormItem>
            </Form>
          </Modal>
        </>
      );
    };
  }
}
export default withRouter(connect(({ login }) => ({ login }))(Form.create()(FeedbackQuestion)))