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 Wangedit from '../../../components/Wangedit/Wangedit'
import router from 'umi/router';
import channels from './detail.less';
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
  useEffect(() => {
    getById()
  }, [])


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

  // 编辑
  function editDemandById(data) {
    console.log('datadata', data)
    console.log('props.location.query.id', props.location.query.id)
    request({ ...apis.taH5SampleManager.updateH5DemandById, urlData: { id: props.location.query.id }, data: { ...data } }).then((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('values', values)
        if (values.demandContent == '<p><br></p>') {
          message.info("请填写需求内容")
          return
        }
        editDemandById({ ...values })
      }
    });
  }
  function go() {
    router.push({
      pathname: '/h5SampleManager/h5Demand/list',
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="修改需求" help="注意，修改的需求可能会大幅增加开发时间，请在增加前和联系人确认，若需求对应开发工作量较大，可能需要重新评估报价和开发周期，因此，建议一次性提交完全部需求">
          {getFieldDecorator('sampleName')(<Input disabled={true} />)}
        </Form.Item>
        <Form.Item label="需求描述" style={{ marginTop: '20px' }}>
          {getFieldDecorator('demandContent', {
            rules: [{ required: true, message: '请输入需求描述' }],
          })(<Wangedit />)}
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 9 }}>
          <div style={{ display: 'flex', alignItems: 'center', width: '220px' }}>    <Button type="primary" htmlType="submit">
            保存
          </Button>
            <Button className={channels.formButton} onClick={() => router.go(-1)}>取消</Button></div>
        </Form.Item>
      </Form>
    </>
  )
}
const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
export default WrappedNormalLoginForm
