import React, { useState, useEffect,useRef} from 'react';
import styles from './ContractContent.less';
import { Input ,Form, message,Upload, Button, DatePicker ,Space, } from 'antd';
import { UploadOutlined ,LeftOutlined } from '@ant-design/icons';
import { Link, useIntl, connect, Dispatch ,Loading } from 'umi';

import { RA } from '@/services/tos';

import LINE from '../../components/Line/Line';
import TextArea from 'antd/lib/input/TextArea';

import moment from 'moment';
import './ContractContent.less';
// 配置英文
import 'moment/locale/en-au';
import locale from 'antd/es/date-picker/locale/en_US';


import SearchOptionsCommnity from '@/components/SearchOptions/SearchOptionsCommnity';
import {tipList} from '@/utils/tip'

const ContractContent = (props: any) => {
  const { ContractModel,dispatch } = props;
  const { RangePicker } = DatePicker;     // 日期组件
  const [form] = Form.useForm();          // 表单
  const RA = (index: any, values: any) => { dispatch({ type: 'Contract/RA', playload: { index: index, body: values } }) };
  
    // 设置之前时间不能选择
  function disabledDate(current:any) {
    return current && current <= moment().subtract(1, "days").endOf('day');
  }
  const startTime = moment().format('YYYY-MM-DD');      // 开始默认事件
  const overTime = moment().add(1, 'month').format('YYYY-MM-DD');  // 结束默认事件
  
  const [fileList, setFileList] = useState([] as any);


  console.log(tipList)

  useEffect(()=>{
    // 如果是添加传来没有值的时候 就清空  否则  赋值给表单
    if(ContractModel.record === -1){ 
      // 返回列表
      

    }else if(ContractModel.record === 0){ 
      form.resetFields()
    }else{
      
      let arr = ContractModel.record.contractFileName.split(',');
      let obj = new Array;
      for(var i in arr){
        let a = {
          uid: arr[i],
          name: arr[i],
          url:'http://'
        }
        obj.push(a)
      }
      
      setFileList([...obj])

      // setFileList([{ uid: 1,name:DataSaveDetail.contractFileName }])

      form.setFieldsValue({
        ...ContractModel.record,
        time:[moment(ContractModel.record.contractValidStartDate),moment(ContractModel.record.contractValidEndDate)],
        
      })


    }

  } ,[1])

  const goToReturn = () => {
    // console.log(fileList)
      history.back()
  }

  // // 提交
  const onFinish = (values:any) => {
    values.contractValidStartDate = values.time[0].format('YYYY-MM-DD')
    values.contractValidEndDate = values.time[1].format('YYYY-MM-DD')
    let file = fileList;
    let data = new Array();
    for (let i = 0; i < file.length; i++){
      data.push(fileList[i].name)
    }
    values.contractFileNameList = data;

    if(ContractModel.record.id === undefined){
      // 添加
      RA(27, values)
    }else{
      // 修改

    }
    // RA(27, values)
  }


  // 上传文件设置
  const uploadProps = {
    accept:".doc,.docx,.jpg,.png,.pdf" ,
    action:"/tos/image/upload",  
    data: { imageType: "tosContract" },   
    fileList:fileList,
    onChange({ file, fileList }:{file:any,fileList:any} ) {

      setFileList(fileList)

      if (file.status == 'done') {
        message.success( file.name,3)
      }
    }
  };


  // 时间提示
  // let tipTime = moment(defForm.time[1]).subtract(25, 'days').format('YYYY-MM-DD'); 
  // let dec =  moment(tipTime).diff(startTime,'days') > 1 ? tipTime : 'Due soon';
  // const [stateTime,setmodalTime] = useState(dec);  // 监听时间变化 -- 结束时间

  // // 设置提示倒计时 25 天
  const changeTime = (data:any,dateStrings:any)=>{
    // if(overTime != dateStrings[1]){
    //   moment(dateStrings[1]).diff(startTime,'days') > 25 ?  
    //   setmodalTime(moment(dateStrings[1]).subtract(25, 'days').format('YYYY-MM-DD')) : 
    //   setmodalTime('Due soon'); 
    // }
    // form.setFieldsValue({
    //   'time' : [moment(dateStrings[0]),moment(dateStrings[1])]
    // })
  }
  // 选择小区名字并赋值
  const opname = (value:any)=>{
    form.setFieldsValue({
      'communityName' : value
    })
  }


  return (
    <div className={styles.base}>

      {/* 头部组件 */}
      <div className={styles.box}>
      <div className={styles.item1}>{ContractModel.type} Service Provider</div>
        <button className={styles.item3} onClick={goToReturn}><LeftOutlined />Back</button>
      </div>
      {/* 表单  initialValues={defForm} */}
      <Form
        // ref={formRef} 
        autoComplete= "off" 
        form={form}  
        name="basic" 
        initialValues={ContractModel.record} 
        onFinish={onFinish} 
        // initialValues={defForm} 
        > 
        <div className='contract_box'>
          {/* 合同编号、甲方、乙方 */}
          <div className='list_1'>
            <div className='item_1'>
              <Form.Item 
                name="contractNumber"
                label="Contract Number"
                rules={[{ required: true, message: `${tipList[0]}` }]}>
                <Input style={{width:200}} placeholder="Contract Number" />
              </Form.Item>
            </div>
            <div className='item_1'>
              <Form.Item 
                name="contractPartyA"
                label="Contract Party A"
                rules={[{ required: true, message: `${tipList[1]}` }]}>
                <Input style={{width:200}} placeholder="Contract Party A" />
              </Form.Item>
            </div>
            <div className='item_1'>
              <Form.Item 
                name="contractPartyB" 
                label="Contract Party B"
                rules={[{ required: true, message: `${tipList[2]}` }]}>
                <Input style={{width:200}} placeholder="Contract Party B" />
              </Form.Item>
            </div>
          </div>
          {/* 小区 */}
          <div className='list2'>
            <div className='main'>
              <Form.Item 
                labelAlign='right'
                name="communityName" 
                label="Community Name"
                rules={[{ required: true, message: `${tipList[3]}` }]}>
                <SearchOptionsCommnity 
                  defaultName={ContractModel.record.communityName} 
                  // ubmit={extendName} 
                  opname={opname}
                />
              </Form.Item>
            </div>
          </div>
          {/* 合同标题 */}
          <div className='list2'>
            <Form.Item 
              labelAlign='right'
              name="contractTitle"
              label="Contract Title"
              rules={[{ required: true, message: `${tipList[4]}` }]}>
              <Input style={{width:200}} placeholder="Contract Title" />
            </Form.Item>
          </div>

          {/* 起止时间 */}
          <div className='list2'>
            <Form.Item 
              name="time"
              labelAlign='right'
              label="Contract Time"
              rules={[{ required: true, message: `${tipList[5]}` }]}>
              <RangePicker 
                  locale={locale}
                  defaultValue={ContractModel.time}
                  disabledDate={disabledDate} 
                  // onChange={changeTime}
                  />
            </Form.Item>
          </div>
          

          {/* 附件上传 */}
          <div className='list2'>
              <Form.Item
                labelAlign='right'
                label="Contract Annex"
                rules={[{ required: true, message: `${tipList[6]}` }]}>
                <Upload 
                {...uploadProps} >
                  <Button>
                    <UploadOutlined /> Upload
                  </Button>
                </Upload>
              </Form.Item>
          </div>
          
          {/* 合同内容 */}
          <div className='list2'>
            <div className={styles.box8item2x1}>
            <Form.Item 
                name="contractRemindContent">
              <TextArea autoSize={false} style={{ padding: 8, width: 600, height: 194 }}>
              </TextArea>
            </Form.Item>
            </div>
            <div className={styles.box8item2x2}>
              The system will send out reminders of contract expiration on 25 .  
              {/* <span style={{color:'#f00'}}>&nbsp;{stateTime}</span> */}
            </div>
          </div>

          <div>
            <LINE/>
            <Button type="primary" htmlType="submit">Conserve</Button>
          </div>

        </div>
       
        </Form>
  

  
    </div>
  )
}

function mapStateToProps({ ContractModel }: {ContractModel:any}) {

  return {
    ContractModel
  };
}
export default connect(mapStateToProps)(ContractContent);
