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 styles from '../../../style/GoodsList.less';
import SelectCity from '../../../../components/SelectButton/CitySelect'
import BuildSelect from '../../../../components/SelectButton/BuildSelect'
import ImageUpload from '../../../../components/XForm/ImageUpload'
import apis from '../../../../services/apis';
import request from '../../../../utils/request';
import AuthButton from '@/components/AuthButton';
import SaleBatchHelpDoc from '../edit/components/SalesBatchHelpDoc';

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




const header = props => {
  const { salesBatchId } = props.location.query
  console.log(salesBatchId)
  const [ saleBatchData, setSaleBatchData ] = useState({})
  const [showHelp, setShowHelp] = useState(false)
  if(salesBatchId){
    useEffect(() => {
      getSaleBatchData(salesBatchId);
    },[])

  // 查询列表
  const getSaleBatchData = (salesBatchId) => {
      request({ ...apis.system.taPolicy, urlData: {id: salesBatchId} }).then((data) => {
          console.log(data)
          setSaleBatchData(data)
      })
    }
  }

  const cancelPage = () =>{
    router.push({
      pathname: '/house/house/list',
    });
  }


  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        let {preSelectTime, ...submitValue} = values
        if(null != preSelectTime && preSelectTime.length > 0){
          const [preselectionStartTime, preselectionEndTime] = preSelectTime
          submitValue.preselectionStartTime = moment(preselectionStartTime).format('YYYY-MM-DD HH:mm:ss');
          submitValue.preselectionEndTime = moment(preselectionEndTime).format('YYYY-MM-DD HH:mm:ss');
        }else{
          submitValue.preselectionStartTime = null
          submitValue.preselectionEndTime = null
        }        
        // getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
        console.log(submitValue)
        request({ ...apis.house.addTaSalesBatch, data: { ...submitValue },}).then((data) => {
          message.info("保存成功,请上传房源")
          console.log(data,"datattttttt")
          router.push({
            pathname: '/house/house/batch',
            query: {
              salesBatchId: data.salesBatchId,
              buildingId: data.buildingId,
            },
          });
        }).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('salesBatchName', {
            rules: [{ required: true, message: '请输入销售批次名' }],
          })(<Input maxLength={20} placeholder="为本次销售命名，如二期销售" />)}
        </Form.Item>
        <Form.Item label="销售楼盘">
          {getFieldDecorator('buildingId', {
            rules: [{ required: true, message: ' 请输入销售楼盘' }],
          })(<BuildSelect />)}
        </Form.Item>
        <Form.Item label="备注">
          {getFieldDecorator('remark')
            (<Input maxLength={20} placeholder="本次销售哪几栋楼，多少套房源等"/>)}
        </Form.Item>
        <Form.Item label="发布状态">
          {getFieldDecorator('status', {
              rules: [{ required: true, message: '请选择发布状态' }],
            })(<Select placeholder="发布状态" style={{ width: '300px' }}>
            <Option value="0">否</Option>
            <Option value="1">是</Option>
          </Select>)}
        </Form.Item>
        <Form.Item label="房源显示价格">
          {getFieldDecorator('displayHousePrice', {
              rules: [{ required: true, message: '请选择房源是否显示价格' }],
            })(<Select placeholder="房源是否显示价格" style={{ width: '300px' }}>
            <Option value="false">否</Option>
            <Option value="true">是</Option>
          </Select>)}
        </Form.Item>
        <Form.Item label="分栋鸟瞰图" help="建议尺寸：690*388px，比例16::9，格式：jpg，文件小于300KB。分栋鸟瞰图会显示在楼盘详情页面。用户点击进入查看全部发布房源。可以适当在图中添加引导语。">
              {getFieldDecorator('aerialViewImg', {
                  rules: [{ required: true, message: '请上传分栋鸟瞰图' }],
              })(
                <ImageUpload />,
              )}
        </Form.Item>  
        <Form.Item label="说明信息">
          <Icon type="question-circle" theme="filled" style={{ fontSize: '18px', color: '#F00' }} onClick={() => setShowHelp(true)} />
        </Form.Item> 
        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <Button type="primary" htmlType="submit"style={{marginRight:'20px'}}>
            下一步
          </Button>
          <Button onClick={() => router.go(-1)}>
            取消
          </Button>
        </Form.Item>
      </Form>
      <SaleBatchHelpDoc visible={showHelp} onCancel={() => setShowHelp(false)} />
    </>
  )
}

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

export default WrappedHeader
