text: import React, { Component } from 'react'
  import { Card, Button, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover,Switch } from 'antd'
  import { connect } from 'dva'
  import PageHeaderLayout from '../../layouts/PageHeaderLayout'
  import SelectObject from '../../components/SelectObject'
  import {ImageComponent} from '../../axios/tools'
  import FooterToolbar from '../../components/FooterToolbar'
  import styles from './Platform.createform.less'
  import {mapBackToImageValues, mapFromImageValues} from '../../axios/tools'
  import GlobalComponents from '../../custcomponents';
  import PlatformBase from './Platform.base'
  import PlatformCreateFormBody from './Platform.createformbody'
  import appLocaleName from '../../common/Locale.tool'
  const { Option } = Select
  const { RangePicker } = DatePicker
  const { TextArea } = Input
  
  const testValues = {};
  
  const imageKeys = [
  ]
  
  
  class PlatformCreateForm extends Component {
    state = {
      previewVisible: false,
      previewImage: '',
      convertedImagesValues: {},
    }
  
    componentDidMount() {
  	const {initValue} = this.props
      if(!initValue || initValue === null){
        return
      }
      this.setState({
        convertedImagesValues: mapFromImageValues(initValue,imageKeys)
      })
  
  
    }
  
    handlePreview = (file) => {
      console.log('preview file', file)
      this.setState({
        previewImage: file.url || file.thumbUrl,
        previewVisible: true,
      })
    }
  
  
  
  
  
    handleImageChange = (event, source) => {
      console.log('get file list from change in update change:', source)
  
      const { fileList } = event
      const { convertedImagesValues } = this.state
  
      convertedImagesValues[source] = fileList
      this.setState({ convertedImagesValues })
      console.log('/get file list from change in update change:', source, "file list" ,fileList)
    }
  
  
  
    render() {
      const { form, dispatch, submitting, role } = this.props
      const { convertedImagesValues } = this.state
  	const userContext = null
      const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form
      const {fieldLabels} = PlatformBase
      const {PlatformService} = GlobalComponents
  
      const capFirstChar = (value)=>{
      	//const upper = value.replace(/^\w/, c => c.toUpperCase());
    		const upper = value.charAt(0).toUpperCase() + value.substr(1);
    		return upper
    	}
  
      const submitCreateForm = () => {
        validateFieldsAndScroll((error, values) => {
          if (error) {
            console.log('code go here', error)
            return
          }
  
          const { owner } = this.props
          const imagesValues = mapBackToImageValues(convertedImagesValues)
  
          const parameters = { ...values, ...imagesValues }
          const cappedRoleName = capFirstChar(role)
          dispatch({
            type: `${owner.type}/add${cappedRoleName}`,
            payload: { id: owner.id, role: role, parameters },
          })
        })
      }
      const submitCreateFormAndContinue = () => {
        validateFieldsAndScroll((error, values) => {
          if (error) {
            console.log('code go here', error)
            return
          }
  
          const { owner } = this.props
          const imagesValues = mapBackToImageValues(convertedImagesValues)
  
          const parameters = { ...values, ...imagesValues }
          dispatch({
            type: `${owner.type}/addPlatform`,
            payload: { id: owner.id, type: 'platform', parameters, continueNext: true },
          })
        })
      }
  
      const goback = () => {
        const { owner } = this.props
  
        dispatch({
          type: `${owner.type}/goback`,
          payload: { id: owner.id, type: 'platform',listName:appLocaleName(userContext,"List") },
        })
      }
      const errors = getFieldsError()
      const getErrorInfo = () => {
        const errorCount = Object.keys(errors).filter(key => errors[key]).length
        if (!errors || errorCount === 0) {
          return null
        }
        // eslint-disable-next-line no-unused-vars
        const scrollToField = (fieldKey) => {
          const labelNode = document.querySelector('label[for="${fieldKey}"]')
          if (labelNode) {
            labelNode.scrollIntoView(true)
          }
        }
        const errorList = Object.keys(errors).map((key) => {
          if (!errors[key]) {
            return null
          }
          return (
            <li key={key} className={styles.errorListItem} onClick={() => scrollToField(key)}>
              <Icon type="cross-circle-o" className={styles.errorIcon} />
              <div className={styles.errorMessage}>{errors[key][0]}</div>
              <div className={styles.errorField}>{fieldLabels[key]}</div>
            </li>
          )
        })
        return (
          <span className={styles.errorIcon}>
            <Popover
              title={appLocaleName(userContext,"FieldValidateInfo")}
              content={errorList}
              overlayClassName={styles.errorPopover}
              trigger="click"
              getPopupContainer={trigger => trigger.parentNode}
            >
              <Icon type="exclamation-circle" />
            </Popover>
            {errorCount}
          </span>
        )
      }
  
  
      
  
      const tryinit  = (fieldName) => {
        const { owner } = this.props
        if(!owner){
        	return null
        }
        const { referenceName } = owner
        if(referenceName!=fieldName){
          return null
        }
        return owner.id
      }
  
      const availableForEdit= (fieldName) =>{
        const { owner } = this.props
        if(!owner){
        	return true
        }
        const { referenceName } = owner
        if(referenceName!=fieldName){
          return true
        }
        return false
  
      }
  	const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 12 },
      }
      const switchFormItemLayout = {
        labelCol: { span: 3 },
        wrapperCol: { span: 9 },
      }
  
      const internalRenderTitle = () =>{
        const linkComp=<a onClick={goback}  > <Icon type="double-left" style={{marginRight:"10px"}} /> </a>
        return (<div>{linkComp}{appLocaleName(userContext,"CreateNew")}{window.trans('platform')}</div>)
      }
  
  	return (
        <PageHeaderLayout
          title={internalRenderTitle()}
          content={`${appLocaleName(userContext,"CreateNew")}${window.trans('platform')}`}
          wrapperClassName={styles.advancedForm}
        >
  
     		<PlatformCreateFormBody	 {...this.props} handleImageChange={this.handleImageChange}/>
  
  
          <FooterToolbar>
            {getErrorInfo()}
            <Button type="primary" onClick={submitCreateForm} loading={submitting} htmlType="submit">
              {appLocaleName(userContext,"Submit")}
            </Button>
            <Button type="primary" onClick={submitCreateFormAndContinue} loading={submitting}>
              {appLocaleName(userContext,"SubmitAndContinue")}
            </Button>
            <Button type="danger" onClick={goback} loading={submitting}>
              {appLocaleName(userContext,"Discard")}
            </Button>
          </FooterToolbar>
  
        </PageHeaderLayout>
      )
    }
  }
  
  export default connect(state => ({
    collapsed: state.global.collapsed,
  }))(Form.create()(PlatformCreateForm))
  
  
  
  
  