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';
import Navigate from '@/components/Navigate';

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


const header = props => {
  const demandId  = props.location.query.id;
  const [demandData, setDemandData] = useState({})

  useEffect(() => {
    getDemandData(demandId);
  },[])

  // 查询列表
  const getDemandData = (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 sampleDetail(sampleId){
    request({ ...apis.taH5SampleManager.taH5SampleById, urlData: { id: sampleId } }).then((data) => {
      router.push({
        pathname: '/h5SampleManager/h5Sample/detail',
        query: {
          id: sampleId,
        },
      });
    }).catch(err => {
      message.info("该H5样例已取消发布或已删除")
    })
  }

  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        console.log(values,'valuesvaluesvalues')
        if (values.payType == 'onLine' && (values.payDescriptionOnline == '' || values.payDescriptionOnline == null)){
            message.info("请填写线上缴费说明");
            return;
        }
        if (values.payType == 'offLine' && (values.payDescriptionOffline == '' || values.payDescriptionOffline == null)){
          message.info("请填写线下缴费说明");
          return;
        }
        if ((values.payType == 'onLine' && (values.payDescriptionOnline == '' || values.payDescriptionOnline == null)) ||
            (values.payType == 'offLine' && (values.payDescriptionOffline == '' || values.payDescriptionOffline == null))){
          message.info("请填写缴费说明");
          return;
        }
        
        let {liveTime, ...submitValue} = values
        if (values.raiseStartTime > values.raiseEndTime){
          message.info("认筹结束时间大于认筹开始时间")
          return;
        }
        submitValue.raiseStartTime = moment(submitValue.raiseStartTime).format('YYYY-MM-DD HH:mm:ss')
        submitValue.raiseEndTime = moment(submitValue.raiseEndTime).format('YYYY-MM-DD HH:mm:ss')
        submitValue.payType = values.payType.toString();
        submitValue.raisePrice = submitValue.raisePrice * 100;
        request({ ...apis.house.addRaise, data: { ...submitValue },}).then((data) => {
          message.info("保存成功")
          router.push({
            pathname: '/house/raise/list',
          });
        }).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="样例名">
          <Navigate onClick={() => sampleDetail(demandData.sampleId)}>{demandData.sampleName}</Navigate>
        </Form.Item>
        <Form.Item label="下单人">
          <span>{demandData.orderer}</span>
        </Form.Item>
        <Form.Item label="联系方式">
        <span>{demandData.phone}</span>
        </Form.Item>
        <Form.Item label="下单时间">
        <span>{`${moment(demandData.createDate).format('YYYY-MM-DD HH:mm')}`}</span>
        </Form.Item>
        <Form.Item label="更新时间">
        <span>{`${moment(demandData.updateDate).format('YYYY-MM-DD HH:mm')}`}</span>
        </Form.Item>
        <Form.Item label="需求单状态">
        <span>{demandData.demandStatus === 1 ? "已提交": demandData.demandStatus === 2 ?"处理中":demandData.demandStatus === 3?"已交付":"作废"}</span>
        </Form.Item>
        <Form.Item label="需求描述">
          {getFieldDecorator('demandContent')(<Wangedit contenteditable={false}/>)}
        </Form.Item>
        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <Button type="primary"  onClick={toDetail(demandId)} style={{marginRight:'20px'}}>
            修改需求
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}

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

export default WrappedHeader
