import React, { useState, useEffect } from 'react';
import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import channels from './channelList.less';
import router from 'umi/router';
import apis from '../../services/apis';
import request from '../../utils/request'

const { TextArea } = Input;
const { Option } = Select;

const header = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({ channelNmae: [], result: [] })
  // eslint-disable-next-line react-hooks/rules-of-hooks

  // useEffect(() => {
  //   addChannel({ pageNum: 1, pageSize: 10 })
  // }, [])

  function addChannel(params) {
    request({ ...apis.channelList.addChannel, data: { ...params } }).then((data) => {
      setData(data)
      router.go(-1)
    }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
    })
  }

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        // eslint-disable-next-line max-len
        addChannel({
          channelName: values.channelName,
          channelContact: values.channelContact,
          contactTel: values.contactTel,
          explain: values.explain
        })
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="渠道名称">
          {getFieldDecorator('channelName', {
            rules: [{ required: true, message: '请输入渠道名称' }],
          })(<Input className={channels.inpuit} />)}
        </Form.Item>
        <Form.Item label="联系人">
          {getFieldDecorator('channelContact', {
            rules: [{ required: true, message: ' 请输入联系人' }],
          })(<Input className={channels.inpuit} />)}
        </Form.Item>
        <Form.Item label="联系电话">
          {getFieldDecorator('contactTel', {
            rules: [{ required: true, message: '请输入联系电话' }],
          })(<Input className={channels.inpuit} />)}
        </Form.Item>
        <Form.Item label="说明描述">
          {getFieldDecorator('explain', {
          })(<TextArea className={channels.inpuitTxt} rows={8} />)}
        </Form.Item>
        <Form.Item wrapperCol={{ span: 15, offset: 8 }}>
          <div style={{ width: '190px' }}>
            <Button type="primary" htmlType="submit">
              保存
          </Button>
            <Button className={channels.formButton} onClick={() => router.go(-1)} htmlType="submit">
              取消
          </Button>
          </div>
        </Form.Item>
      </Form>
    </>
  )
}

const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
export default WrappedNormalLoginForm
