import React, { useState } from 'react';
import { CloseCircleOutlined } from '@ant-design/icons';
import {
  Form,
  Input,
  DatePicker,
  Modal,
  Button,
  Upload
} from 'antd';
import SelectOptionTree from '@/components/SelectOptionTree';
import { MyIcon } from "@/components/Icon"
import { XQ, AE, AX, _09, AB, OR, BG, AT, HC, OC, OD, RF, X4 } from '@/utils/pr_new_datadictionary';
import moment from 'moment';
import styles from '@/global.less';
import style from '../index.less';

const FormItem = Form.Item;

const Aa01CreateForm = (props) => {
  const [form] = Form.useForm();
  const { modalVisible, handleAdd, handleModalVisible, dictDataList } = props;
  const [error, setError] = useState([]);
  const [subLoading, setSubLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState('');
  const [imageFile, setImageFile] = useState(null);
  const okHandle = () => {
    // za9998 头像
    form
      .validateFields()
      .then(fieldsValue => {
        console.log(fieldsValue, 'fieldsValue');
        setSubLoading(true);
        setError([]);
        fieldsValue.aa0111 = fieldsValue.aa0111 ? moment(fieldsValue.aa0111).format("YYYY-MM-DD") : null;
        fieldsValue.aa0141 = fieldsValue.aa0141 ? moment(fieldsValue.aa0141).format("YYYY-MM-DD") : null;
        fieldsValue.v_aa011f = fieldsValue.v_aa011f ? moment(fieldsValue.v_aa011f).format("YYYY-MM-DD") : null;
        fieldsValue.v_aa011g = fieldsValue.v_aa011g ? moment(fieldsValue.v_aa011g).format("YYYY-MM-DD") : null;
        fieldsValue.file = imageFile;
        handleAdd(fieldsValue, form, setSubLoading);
      })
      .catch(errInfo => {
        onFinishFailed(errInfo)
      });

  };

  const onFinishFailed = (errorInfo) => {
    setError(errorInfo.errorFields)
  }

  const getErrorInfo = (errors) => {
    const errorCount = errors.filter((item) => item.errors.length > 0).length;
    if (!errors || errorCount === 0) {
      return null;
    }

    return (
      <span className={styles.errorIcon}>
        <CloseCircleOutlined />{errorCount}
      </span>
    );
  };

  const beforeUpload = file => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/JPEG/PNG 格式的文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图像必须小于2MB!');
    }
    return isJpgOrPng && isLt2M;
  }

  const handleChange = info => {
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      if (window.FileReader) {
        const reader = new FileReader();
        reader.readAsDataURL(info.file.originFileObj);
        reader.addEventListener('load', () => {
          setImageUrl(reader.result);
        });
      }
      setImageFile(info.file.originFileObj);
    }
  };

  const uploadButton = (<MyIcon className={style.headIcon} type="icon-user" />);

  return (
    <Modal
      width={1200}
      height={580}
      bodyStyle={{ padding: '20px', maxHeight: '580px', overflowY: 'auto' }}
      forceRender={true}
      destroyOnClose
      getContainer={false}
      title="新增"
      visible={modalVisible}
      onCancel={() => handleModalVisible()}
      afterClose={() => handleModalVisible()}
      footer={<>{getErrorInfo(error)}
        <Button onClick={() => handleModalVisible()}>关闭</Button>
        <Button loading={subLoading} type="primary" onClick={() => okHandle()}>提交</Button></>}
    >
      <Form form={form} onFinish={okHandle} onFinishFailed={onFinishFailed}
        colon={false} hideRequiredMark>

        <table className={styles.formtable}>
          <tbody>
            <tr>
              <td colSpan="28">人员基本情况信息</td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>姓名</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="za0101" rules={[{required: true, message: '请输入', min: 1}]}>
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>性别</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0107" rules={[{required: true, message: '请输入', min: 1}]}>
                  <SelectOptionTree treeData={AX || []} />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>民族</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0121" rules={[{required: true, message: '请输入', min: 1}]}>
                  <SelectOptionTree treeData={AE || []} />
                </FormItem>
              </td>
              {/* 照片（za9998） */}
              <td colSpan="7" style={{ position: 'relative', border: 'none' }}>
                <div style={{ position: 'absolute', left: '28%', top: '20px' }} className={style.photoBox}>
                  <Upload
                    accept="image/jpg,image/jpeg,image/png"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                    style={{ display: 'table', width: '120px', height: '140px' }}
                  >
                    {imageUrl ? <img src={imageUrl} alt="图片加载失败" style={{ width: '120px', height: '130px' }} /> : uploadButton}
                  </Upload>
                  <div className="ant-upload-text" style={{ marginTop: '5px' }}><span className={styles.required}></span>上传照片</div>
                </div>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>出生年月</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0111" rules={[{required: true, message: '请输入', type: "object"}]}>
                  <DatePicker format="YYYY-MM" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>籍贯</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0114" rules={[{required: true, message: '请输入', min: 1}]}>
                  <SelectOptionTree treeData={AB || []} />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>出生地</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0117">
                  <SelectOptionTree treeData={AB || []} />
                </FormItem>
              </td>
              
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>参加工作时间</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0141" rules={[{required: true, message: '请输入', type: "object"}]}>
                  <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>
              
              <td colSpan="3">
                <span>党派交叉情况</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="v_aa011n">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>职称</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="v_aa011a" rules={[{required: true, message: '请输入', min: 1}]}>
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>婚姻状况</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0127" rules={[{required: true, message: '请输入', min: 1}]}>
                  <SelectOptionTree treeData={BG || []} />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>健康状况</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="v_aa011b" rules={[{required: true, message: '请输入', min: 1}]}>
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>身份证号码</span>
              </td>
              <td colSpan="4">
                <FormItem label="" name="aa0177" rules={[{required: true, message: '请输入', min: 1}]}>
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>工作单位</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011c">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>职务</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011d">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>职务层次</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011h">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>任现职务层次时间</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011f">
                  <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>职级</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011e">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>任现职级时间</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011g">
                  <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>单位地址</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011i">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>固定电话</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011j">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span className={styles.required}>家庭地址</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011k" rules={[{required: true, message: '请输入', min: 1}]}>
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span className={styles.required}>邮政编码</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="ak010g" rules={[{required: true, message: '请输入', min: 1}]}>
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>手机号码</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="ak010b">
                  <Input placeholder="" />
                </FormItem>
              </td>
              <td colSpan="3">
                <span>电子邮箱</span>
              </td>
              <td colSpan="11">
                <FormItem label="" name="v_aa011l">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
            <tr>
              <td colSpan="3">
                <span>专业专长</span>
              </td>
              <td colSpan="25">
                <FormItem label="" name="v_aa011m">
                  <Input placeholder="" />
                </FormItem>
              </td>
            </tr>
          </tbody>
        </table>
      </Form>
    </Modal>
  );
};

export default Aa01CreateForm;

