import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, InputNumber, Checkbox, Row, Col} from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import XForm, { FieldTypes } from '../../../components/XForm';
import router from 'umi/router';
import moment from 'moment';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';
import Wangedit from '../../../components/Wangedit/Wangedit'
import TextArea from 'antd/lib/input/TextArea';

const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;


const header = props => {
  const sampleId  = props.location.query.id;
  const sampleName  = props.location.query.sampleName;
  const [sampleData, setSampleData] = useState({})

//   useEffect(() => {
//     getSampleData(sampleId);
//   },[])

//   // 查询列表
//   const getSampleData = (demandId) => {
//       request({ ...apis.taH5SampleManager.taH5DemandById, urlData: {id: demandId} }).then((data) => {
//           setDemandData(data)
//           props.form.setFieldsValue(data)
//       })
//   }

  // 跳转到编辑
  const toDetail = rowData => () => {
    if(rowData) {
      router.push({
      pathname: '/h5SampleManager/h5Demand/edit',
      query: {
        id: demandId,
      },
    });
      return
    }
  }

  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        values.sampleId = sampleId
        values.sampleName = sampleName
        request({ ...apis.taH5SampleManager.addTaH5Demand, data: { ...values },}).then((data) => {
          message.info("保存成功")
          router.go(-1);
        }).catch((err) => {
          message.info(err.msg || err.message)
        })
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="样例名">
          {/* {getFieldDecorator('sampleName')(<Input disabled={true}/>)} */}
          <span>{sampleName}</span>
        </Form.Item>
        <Form.Item label="下单人">
          {getFieldDecorator('orderer',{
          rules: [
            {
              required: true,
              message: '请填写下单人',
            },
          ],
        })(<Input maxLength={20}/>)}
        </Form.Item>
        <Form.Item label="联系方式">
          {getFieldDecorator('phone',{
          rules: [
            {
              required: true,
              message: '请填写正确的联系方式',
              // max:11,
              // min:11,
              pattern: new RegExp('^1[0-9]{10}$'),
            },
          ],
        })(<Input/>)}
        </Form.Item>
        <Form.Item label="需求描述">
          <span style={{color:'rgba(0, 0, 0, 0.45)', fontSize:'14px'}}>请在下方填写定制化内容，如替换样例中的企业名称、logo文案等，如暂不确定，可先不填，提交后可在H5需求单详情中继续修改</span>
          {getFieldDecorator('demandContent')(<Wangedit />)}
        </Form.Item>
        <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
            <Button type="primary" htmlType="submit">保存</Button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Button onClick={() => router.go(-1)}>取消</Button>
         </Form.Item>
      </Form>
    </>
  )
}

const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
