import React, { useState, useEffect } from 'react';
import {
  Input,
  Menu,
  Dropdown,
  Button,
  Icon,
  message,
  Table,
  Divider,
  Card,
  Select,
  Form,
  Alert,
} from 'antd';
import router from 'umi/router';
import apis from '@/services/apis';
import request from '@/utils/request';
import AuthButton from '@/components/AuthButton';
import InstitutionSelect from '@/components/SelectButton/InstitutionSelect';

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

const header = props => {
  const { id } = props.location.query;

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    if (id) {
      getById();
    }
  }, []);

  // 查询当前信息
  function getById(params) {
    request({ ...apis.channelList.getById, urlData: { id: id } })
      .then(data => {
        props.form.setFieldsValue(data);
      })
      .catch(err => {
        console.log(err);
        message.info(err.msg || err.message);
      });
  }

  // 编辑
  function editChannel(data) {
    if (id) {
      request({ ...apis.channelList.editChannel, urlData: { id: id }, data: { ...data } })
        .then(data => {
          message.info('修改成功');
          router.go(-1);
        })
        .catch(err => {
          console.log(err);
          message.info(err.msg || err.message);
        });
    } else {
      request({ ...apis.channelList.addChannel, data: { ...data } })
        .then(data => {
          message.info('添加成功');
          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('values', values);
        editChannel({ ...values });
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <Card>
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="城市公司">
          {getFieldDecorator('institutionId', {
            rules: [{ required: true, message: '请选择城市公司' }],
          })(<InstitutionSelect />)}
        </Form.Item>
        <Form.Item label="渠道名称">
          {getFieldDecorator('channelName', {
            rules: [{ required: true, message: '请输入渠道名称' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="联系人">
          {getFieldDecorator('channelContact', {
            rules: [{ required: true, message: ' 请输入联系人' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="联系电话">
          {getFieldDecorator('contactTel', {
            rules: [{ required: true, message: '请输入联系电话' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="说明描述">
          {getFieldDecorator('explain', {})(<TextArea rows={8} />)}
        </Form.Item>
        <Form.Item wrapperCol={{ span: 15, offset: 6 }}>
          <AuthButton name="channel.submit" noRight={null}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </AuthButton>

          <Button onClick={() => router.go(-1)} style={{ marginLeft: '20px' }}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};
const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
export default WrappedNormalLoginForm;
