import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, Radio, Upload, InputNumber } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import router from 'umi/router';
import moment from 'moment';
import SelectCity from '../../../components/SelectButton/CitySelect'
import BuildSelect2 from '../../../components/SelectButton/BuildSelect2'
import LivePlatSelect from '../../../components/SelectButton/LivePlatSelect'
import CitySelect3 from '../../../components/SelectButton/CitySelect3'
import ImageUpload from '../../../components/XForm/ImageUpload'
import Wangedit from '../../../components/Wangedit/Wangedit'
import apis from '../../../services/apis';
import request from '../../../utils/request';
import AuthButton from '@/components/AuthButton';
import SelectContractTemp from './components/SelectContractTemp';
import SelectRaise from './components/SelectRaise';
import SelectCompany from './components/SelectCompany';
import SelectSeal from './components/SelectSeal';

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

let cityId = ''
let contractTemplateName = ''
let targetName = ''

const header = props => {
  const { salesBatchId } = props.location.query
  const [ saleBatchData, setSaleBatchData ] = useState({})
  const [showHelp, setShowHelp] = useState(false)

  // const [targetName, setTargetName] = useState({})
  const [companyName, setCompanyName] = useState({})
  // const [contractTemplateName, setContractTemplateName] = useState('')
  const [contractTemplateLink, setContractTemplateLink] = useState('')

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

   //打开新页面
   const openIndexImg = () => {
    if(contractTemplateLink){
     window.open(contractTemplateLink);
    }else{
      message.info('请选择合同模板');
    }
 }

  function highlightsTypeChange(e) {
    setTypeState(e.target.value)
  }

  function disabledDate(current) {
    // Can not select days before today and today
    return current && current < moment().endOf('day');
  }

  function companyOnSuccess(e){
    console.log(e)
    setCompanyName(e)
  }

  function contractOnSuccess(e){
    contractTemplateName = e.name
    request({ ...apis.taEcontract.taContractTemplateById, urlData: {id: e.id} }).then((data) => {
      setContractTemplateLink(data.contractTemplateAddress)
    })
  }

  function targetOnSuccess(e){
    console.log('targetOnSuccess', e)
    targetName = e
    console.log('targetOnSuccess', targetName)
  }

  function sealOnSuccess(e){
    console.log('sealOnSuccess', e)
  }

  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log(values)
      if (!err){
        request({ ...apis.taEcontract.addTaContractBusiness, data: { ...values },}).then((data) => {
          message.info("保存成功")
          router.push({
            pathname: '/eContract/businessConfig/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="合同标题">
          {getFieldDecorator('contractTemplateId', {
            rules: [{ required: true, message: ' 请选择合同模板' }],
          })(<SelectContractTemp  onSuccess={e => contractOnSuccess(e)}/>)}
          {getFieldDecorator('contractTemplateName')(<Input  hidden={true}/>)}
        </Form.Item>
        <Form.Item label="合同文件">
          {getFieldDecorator('contractTemplate')}<Button type="danger" style={{marginRight:'20px'}} onClick={openIndexImg}>查看文件</Button>
        </Form.Item>
        <Form.Item label="关联业务类型"> 
          {getFieldDecorator('targetType', {
              rules: [{ required: true, message: '请选择发布状态' }],
            })(<Select placeholder="关联业务类型" style={{ width: '400px' }}>
            <Option value="raise">房源认筹</Option>
          </Select>)}
        </Form.Item>
        <Form.Item label="关联业务">
          {getFieldDecorator('targetId', {
            rules: [{ required: true, message: ' 请选择关联业务' }],
          })(<SelectRaise targetType={props.form.getFieldValue('targetType')} onSuccess={e => targetOnSuccess(e)}/>)}
          {getFieldDecorator('targetName', {initialValue:targetName,
            rules: [{ required: true, message: ' 请选择关联业务' }],
          })(<Input  hidden={true}/>)}
        </Form.Item>
        <Form.Item label="甲方" help="系统会在业务需要时自动签所选企业印章，比如用户在签署认筹合同前系统会自动签署企业印章。">
          {getFieldDecorator('companyId', {
            rules: [{ required: true, message: ' 请选择关联企业' }],
          })(<SelectCompany onSuccess={e => companyOnSuccess(e)}/>)}
          {getFieldDecorator('companyName', {initialValue:companyName,
            rules: [{ required: true, message: ' 请选择关联业务' }],
          })(<Input  hidden={true}/>)}
        </Form.Item>
        <Form.Item label="甲方印章" style={{marginTop:'20px'}}>
          {getFieldDecorator('sealId', {
            rules: [{ required: true, message: ' 请选择企业印章' }],
          })(<SelectSeal companyId={props.form.getFieldValue('companyId')} onSuccess={e => sealOnSuccess(e)}/>)}
        </Form.Item>
        <Form.Item label="甲方签章定位关键字" help="关键字为合同文件中的文字内容（能被ctrl+f 查找功能检索到）。法大大按此关键字进行签章位置的定位，将电子章盖在这个关键字上面。凡出现关键字的地方均可能会盖上指定用户的电子章，建议关键字在合同中保持唯一。">
          {getFieldDecorator('signatoryKeywords', {
            rules: [{ required: true, message: '请输入甲方签章定位关键字' }],
          })(<Input maxLength={20} style={{width:'400px'}}/>)}
        </Form.Item>
        <Form.Item label="甲方关键字签章策略" style={{marginTop:'20px'}}> 
          {getFieldDecorator('signatoryStrategy', {
              rules: [{ required: true, message: '请选择甲方关键字签章策略' }],
            })(<Select placeholder="甲方关键字签章策略" style={{ width: '400px' }}>
            <Option value="2">最后一个关键字签章</Option>
            <Option value="0">所有关键字签章</Option>
            <Option value="1">第一个关键字签章</Option>
          </Select>)}
        </Form.Item>
        <Form.Item label="乙方签章定位关键字" help="关键字为合同文件中的文字内容（能被ctrl+f 查找功能检索到）。法大大按此关键字进行签章位置的定位，将电子章盖在这个关键字上面。凡出现关键字的地方均可能会盖上指定用户的电子章，建议关键字在合同中保持唯一。">
          {getFieldDecorator('customerKeywords', {
            rules: [{ required: true, message: '请输入乙方签章定位关键字' }],
          })(<Input maxLength={20} style={{width:'400px'}}/>)}
        </Form.Item>
        <Form.Item label="乙方关键字签章策略" style={{marginTop:'20px'}}> 
          {getFieldDecorator('customerStrategy', {
              rules: [{ required: true, message: '请选择乙方关键字签章策略' }],
            })(<Select placeholder="乙方关键字签章策略" style={{ width: '400px' }}>
            <Option value="2">最后一个关键字签章</Option>
            <Option value="0">所有关键字签章</Option>
            <Option value="1">第一个关键字签章</Option>
          </Select>)}
        </Form.Item>
        <Form.Item label="发布状态"> 
          {getFieldDecorator('status', {
              rules: [{ required: true, message: '请选择发布状态' }],
            })(<Select placeholder="发布状态" style={{ width: '400px' }}>
            <Option value='0'>否</Option>
            <Option value='1'>是</Option>
          </Select>)}
        </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>
    </>
  )
}

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

export default WrappedHeader
