import React, { useEffect, useState } from 'react';
import { Input, Radio, Form, Button, Spin, Modal, Space } from 'antd';
import { connect } from 'umi';

import { CCQK } from '@/utils/constants';

/**
 *
 *
 *
 */
const { Item } = Form;
const { TextArea } = Input;

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 },
};
const tailLayout = {
  wrapperCol: { offset: 10, span: 10 },
};

const CC = (props) => {
  const { id, sysToken, loading } = props;
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);



  useEffect(() => {

    return () => {
      // cleanup
    };
  }, []);

  const onClose = () => {
    form.resetFields();
    setVisible(false);
  }

  const onFinish = (values) => {
    const params = { ...values, pfId: id };
    props.fetchSaveCC({ params, sysToken }).then((data) => {
      if (data) {
        onClose();
        props.hideModal(true);
      }
    });
  };



  return (
    <div title="">
      <Spin spinning={loading}>
        <div style={{textAlign: 'right', marginBottom: 20 }}><Button type='primary' onClick={() => setVisible(true)}>抽查</Button></div>
        <Modal
          title='抽查情况'
          onCancel={onClose}
          visible={visible}
          footer={null}
          width={640}
          maskClosable={false}
        >
          <Form onFinish={onFinish} {...layout}>
            {/* <Item label='抽查时间' name='ccSj' rules={[{ required: true, message: '请选择抽查时间!' }]}>
              <DatePicker format='YYYY-MM-DD HH:mm:ss' />
            </Item> */}
            <Item label='抽查结果' name='ccjg' rules={[{ required: true, message: '请选择抽查结果!' }]}>
              <Radio.Group>
                {Object.keys(CCQK).map(key => {
                  if (key !== 'WCC') { // 抽查不显示‘未抽查’选项
                    return <Radio key={key} value={CCQK[key].value}>{CCQK[key].name}</Radio>
                  }
                })}
              </Radio.Group>
            </Item>
            <Item label='备注' name='bzxx' rules={[{ max: 200, message: '最多能输入200字!' }]}>
              <TextArea />
            </Item>
            <Form.Item {...tailLayout}>
              <Space>
                <Button type="default" onClick={onClose}>
                  取消
            </Button>
                <Button type="primary" htmlType="submit">
                  确认
            </Button>
              </Space>
            </Form.Item>
          </Form>
        </Modal>
      </Spin>
    </div>
  );
};

const mapStateToProps = ({ doing, global, loading }) => ({
  doing,
  global,
  loading: loading.effects['doing/fetchSaveCC'] || false,
});
const mapDispatchToProps = (dispatch) => ({
  fetchSaveCC(params) {
    return dispatch({ type: 'doing/fetchSaveCC', payload: params });
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(CC);