import React, { useState, useEffect } from 'react';
import { Checkbox, Input, Card, Form, Button, Row, Col, InputNumber, message } from 'antd';
import { connect } from 'dva';
import XForm, { FieldTypes } from '@/components/XForm';
import request from '@/utils/request';
import router from 'umi/router';
import apis from '@/services/apis';
import AuthButton from '@/components/AuthButton';

const { TextArea } = Input;

const tailFormItemLayout = {
  labelCol: {
    xs: { span: 20 },
    sm: { span: 3 },
  },
  wrapperCol: {
    xs: { span: 20 },
    sm: { span: 16 },
  },
};

const Backcom = () => {
  router.go('-1');
};
const Poster = props => {
  const { id } = props.location.query;
  const [data, setData] = useState({});

  const getData = () => {
    request({
      ...apis.system.getPolicyTypeDetail,
      urlData: { id: id },
    })
      .then(data => {
        setData(data);
      })
      .catch(err => {
        message.info(err.msg || err.message);
      });
  };

  useEffect(() => {
    if (id) {
      getData();
    }
  }, [id]);

  const handleSubmit = val => {
    props.form.validateFields((err, values) => {
      if (!err) {
        if (id) {
          request({
            ...apis.system.upDatePolicyType,
            urlData: { id: id },
            data: { ...data, ...values },
          })
            .then(data => {
              message.info('保存成功');
              router.go('-1');
            })
            .catch(err => {
              message.info(err.msg || err.message);
            });
        } else {
          request({ ...apis.system.addPolicyType, data: { ...values } })
            .then(data => {
              // cancelPage();
              message.info('保存成功');
              router.go('-1');
            })
            .catch(err => {
              message.info(err.msg || err.message);
            });
        }
      }
    });

    // console.log(val, '------');

    // let { ...submitValue } = val;

    // if (id) {
    //   request({ ...apis.news.put, urlData: { id: newsId }, data: { ...submitValue } })
    //     .then(data => {
    //       router.go('-1');
    //       message.info('保存成功');
    //     })
    //     .catch(err => {
    //       message.info(err.msg || err.message);
    //     });
    // } else {
    //   request({ ...apis.system.addPolicyType, data: { ...submitValue } })
    //     .then(data => {
    //       // cancelPage();
    //       message.info('保存成功');
    //       router.go('-1');
    //     })
    //     .catch(err => {
    //       message.info(err.msg || err.message);
    //     });
    // }
  };

  const { getFieldDecorator } = props.form;

  return (
    <Card>
      <Form {...tailFormItemLayout} onSubmit={handleSubmit}>
        <Form.Item label="类型名称">
          {getFieldDecorator('policyTypeName', {
            initialValue: data.policyTypeName,
          })(<Input style={{ width: '500px' }} />)}
        </Form.Item>
        <Form.Item label="顺序">
          {getFieldDecorator('sort', {
            initialValue: data.sort,
          })(<InputNumber style={{ width: '500px' }} />)}
        </Form.Item>
        <Form.Item style={{ display: 'flex', justifyContent: 'center' }}>
          <AuthButton name="encyclopedias.type.submit" noRight={null}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </AuthButton>

          <Button style={{ marginLeft: '20px' }} onClick={Backcom}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};
const WrappedNormalLoginForm = Form.create({ name: 'Poster' })(Poster);
export default connect(({ user }) => ({ user }))(WrappedNormalLoginForm);
