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 XForm, { FieldTypes } from '../../../components/XForm';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import Wangedit from '../../../components/Wangedit/Wangedit'
import moment from 'moment';


const header = props => {
    const demandId = props.location.query.id
  
    const [ data, setData ] = useState({})
    if(demandId){
      useEffect(() => {
        getDemandData(demandId);
      },[])
  
    // 查询列表
    const getDemandData = (demandId) => {
      request({
          ...apis.sample.get,
          urlData: { id: demandId }
      }).then((data) => {
        setData(data)
      }).catch((err) => {
        message.error(err.msg || err.message)
      })
    }
    }
  
    const fields = [
      {
        label: '样例名',
        name: 'sampleName',
        type: FieldTypes.Text,
        value: data.sampleName,
        props: {disabled: true}
      },    
      {
        label: '下单组织',
        name: 'orgName',
        type: FieldTypes.Text,
        value: data.orgName,
        props: {disabled: true}
      },
      {
        label: '下单人',
        name: 'orderer',
        value: data.orderer,
        type: FieldTypes.Text,
        props: {disabled: true}
      },
      {
        label: '联系方式',
        name: 'phone',
        value: data.phone,
        type: FieldTypes.Text,
        props: {disabled: true}
      },
      {
        label: '下单时间',
        name: 'createDate',
        value: data.createDate,
        render: <span>{`${moment(data.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span>
      },
      {
        label: '需求单状态',
        name: 'demandStatus',
        value: data.demandStatus+'',
        render: <Select style={{ width: '180px' }} placeholder="需求单状态">
                  <Select.Option value="1">已提交</Select.Option>
                  <Select.Option value="2">处理中</Select.Option>
                  <Select.Option value="3">已交付</Select.Option>
                  <Select.Option value="4">作废</Select.Option>
                </Select>,
      },
      {
        label: '备注',
        name: 'remark',
        value: data.remark,
        render: <Input placeholder="不超过100个字" maxLength = "100"/>
      },
      {
        label: '最后修改时间',
        name: 'updateDate',
        value: data.updateDate,
        render: <span>{`${moment(data.updateDate).format('YYYY-MM-DD HH:mm:ss')}`}</span>
      },
      {
        label: '需求描述',
        name: 'demandContent',
        value: data.demandContent,
        render: <Wangedit contenteditable={false}/>
      },
    ]
  
     
    const handleSubmit = (values) => {
      if(demandId){
          request({ ...apis.sample.update, urlData: { id: demandId }, data: { ...values }}).then((data) => {
            cancelPage();
          }).catch((err) => {
            message.error(err.msg || err.message)
          })
        }
    }
  
    const cancelPage = () => {
      router.push({
        pathname: '/sample/demand/list',
      });
    }
  
    return (
      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
    )
  }
  
  const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
  export default WrappedNormalLoginForm