hlplus/src/components/lform/formGroup.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Switch, Input, Textarea, Picker } from '@tarojs/components'
import { strTrim, arrToObj } from '@utils'
import './index.scss'
import MultiSelect from './MultiSelect'
import RadioSelect from './RadioSelect'
import LCanton from './LCanton'
import TimeTwo from './TimeTwo'
const HLKEY = '654mca0l38b489d9'
const CJ = require('crypto-js')
export default class FormGroup extends Component {
  constructor (props) {
    super(props)
    const { val, typeStr, labelShow } = this.props
    const { valTrue = '1', valFalse = '2' } = this.props
    this.state = {
      switchValTrue: valTrue,
      switchValFalse: valFalse,
      curRegionName: '',
      curLabelShow: labelShow === 'no' ? false : true,
      curTypeStr: typeStr || 'input',
      curVal: val || '',
      curCheckedArr: [],
      curRadioObj: {},
      isMSShow: false,
      isRSShow: false,
      curImgUrl: val,
      isCShow: false,
      cantonNameObj: {},
    }
  }

  componentDidUpdate (prevProps, prevState) {
    const { val, typeStr } = this.props
    if (prevProps.val !== val) {
      this.setState({
        curVal: val || ''
      })
      if (typeStr === 'img') {
        this.setState({
          curImgUrl: val || ''
        })
      }
    }
  }

  // 后期有空来拆分，暂时放一块
  changeInput (e) {
    const { valStr, bc } = this.props
    bc(valStr, strTrim(e.target.value))
  }
  selectChange (curArr, e) {
    const { valStr, bc } = this.props
    bc(valStr, curArr[Number(e.detail.value)].val, curArr)
  }
  dateChange (e) {
    const { valStr, bc } = this.props
    bc(valStr, strTrim(e.target.value))
  }
  regionChange (e) {
    const { valStr, bc } = this.props
    bc(valStr, e.target.value, e.target.code)
  }

  openMSPopup (e) {
    this.setState({
      isMSShow: true
    })
  }
  dealMSPopup (curVal, curCheckedArr) {
    this.closeMSPopup()
    const { valStr, bc } = this.props
    if (curVal && curCheckedArr) {
      this.setState({
        curVal,
        curCheckedArr,
      })
      bc(valStr, curVal, curCheckedArr)
    } else {
      bc(valStr, '')
    }
  }
  closeMSPopup () {
    this.setState({
      isMSShow: false,
    })
  }

  openRSPopup (e) {
    this.setState({
      isRSShow: true
    })
  }
  dealRSPopup (curVal, curRadioObj) {
    this.closeRSPopup()
    const { valStr, bc } = this.props
    if (curVal && curRadioObj) {
      this.setState({
        curVal,
        curRadioObj,
      })
      bc(valStr, curVal, curRadioObj)
    } else {
      bc(valStr, '')
    }
  }
  closeRSPopup () {
    this.setState({
      isRSShow: false
    })
  }


  openCPopup (e) {
    this.setState({
      isCShow: true
    })
  }
  dealCPopup (curVal, cantonNameObj) {
    this.closeCPopup()
    const { valStr, bc } = this.props
    if (curVal && cantonNameObj) {
      this.setState({
        curVal,
        cantonNameObj,
      })
      bc(valStr, curVal, cantonNameObj)
    } else {
      bc(valStr, '')
    }
  }
  closeCPopup () {
    this.setState({
      isCShow: false
    })
  }
  
  renderTimeTwo () {
    const { curVal } = this.state
    const { 
      disabled,
      label1,
      label2,
    } = this.props
    return (
      <TimeTwo curArr={curVal} disabled={disabled} label1={label1} label2={label2} bc={this.timeTwoChange.bind(this)} />
    )
  }
  timeTwoChange (arr) {
    const { valStr, bc } = this.props
    bc(valStr, arr)
  }

  switchClickHandle () {
    const { valStr, bc } = this.props
    const { switchValTrue, switchValFalse } = this.state
    const { curVal } = this.state
    bc(valStr, curVal === switchValTrue ? switchValFalse : switchValTrue)
  }


  uploadImgHandle () {
    const { valStr, bc } = this.props
    const that = this
    Taro.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        const tempFilePaths = res.tempFilePaths
        Taro.uploadFile({
          url: `${BASE_URL}/fileupload/uploadfile`,
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            'filename': 'xcxOperate'
          },
          success (res){
            const msg = res.data || ''
            const key = CJ.enc.Utf8.parse(HLKEY)
            const bytes = CJ.AES.decrypt(msg, key, {
              mode: CJ.mode.ECB,
              padding: CJ.pad.Pkcs7
            })
            const originalText = bytes.toString(CJ.enc.Utf8)
            const cData = JSON.parse(originalText)
            that.setState({
              curImgUrl: cData.data || ''
            }, () => {
              bc(valStr, cData.data || '')
            })
          }
        })
      }
    })
  }

  render () {
    const {
      curTypeStr,
      curLabelShow,
      curVal,
      isMSShow,
      isRSShow,
      curCheckedArr,
      curRadioObj,
      curImgUrl,
      isCShow,
      cantonNameObj,
      inputDiyType,
    } = this.state
    const { 
      keyStr, 
      keyStr2, 
      moreOptions, 
      labelWidth, 
      labelAlign = 'left', 
      disabled, 
      pbShow,
      placeholderSingle = false,
      moreRows = false,
      cantonLevel = 3,
      cantonLabelObj,
      cantonVerify,
      dateFields
    } = this.props
    const { hasFooterNav = false } = this.props
    const curArr = moreOptions && moreOptions.arr ? moreOptions.arr : []
    const curObj = arrToObj(curArr)
    const curCheckedLabelArr = curCheckedArr.map(item => {
      return item.label
    })
    const curCheckedLabel = curCheckedLabelArr.join(',')
    const curRadioLabel = curRadioObj.label ? curRadioObj.label : curObj[curVal]
    const { hasText, textTrue, textFalse, rightAlign='right' } = this.props
    const { switchValTrue } = this.state
    const switchHasText = hasText || false
    const switchTextTrue = textTrue || '开启'
    const switchTextFalse = textFalse || '关闭'
    const switchChecked = curVal === switchValTrue
    let boxClassName = 'l-form-group'
    if (pbShow === 'no') boxClassName += ' nopb'
    if (moreRows) boxClassName += ' rows2'
    const {
      defineBoxClassName
    } = this.props
    if (defineBoxClassName) {
      if (defineBoxClassName === 'noborder') {
        boxClassName += ' noborder'
      } else {
        boxClassName += ' ' + defineBoxClassName
      }
    }

    let { inputType = 'text' } = this.state 
    if (inputDiyType) inputType = inputDiyType
    
    const bg = require('@img/icon_upload_img.png')
    const signRight = require('@img/icon_sign_right.png')
    const imageSrc = curImgUrl || bg
    const {
      initUpdate,
    } = this.props
    const { inputFont } = this.props
    const { startDate } = this.props
    const { defineContentClassName } = this.props
    let formContentStr = 'l-form-content'
    if (defineContentClassName) {
      formContentStr = 'l-form-content ' + defineContentClassName
    }
    return (
      <View className={boxClassName}>
        {
          curLabelShow
          &&
          <View className={labelAlign === 'left' ? 'l-form-label' : 'l-form-label t2'} style={`width: ${labelWidth || '26%'}`}>{keyStr}</View>
        }
        {
          curTypeStr === 'input'
          &&
          <View className={formContentStr}>
            <Input type={inputType} value={curVal} disabled={disabled} onInput={this.changeInput.bind(this)}  className={disabled ? 'l-form-input disabled' : 'l-form-input'}  placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请输入' + keyStr}`}/>
          </View>
        }
        {
          curTypeStr === 'inputFont'
          &&
          <View className={formContentStr}>
            <Input type={inputType} value={curVal} disabled={disabled} onInput={this.changeInput.bind(this)}  className={disabled ? 'l-form-input disabled' : 'l-form-input'}  placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请输入' + keyStr}`}/>
            <View className="l-form-input-font">{inputFont}</View>
          </View>
        }
        {
          curTypeStr === 'textarea'
          &&
          <View className={formContentStr + ' auto-height'}>
            <Textarea value={curVal} disabled={disabled}  onInput={this.changeInput.bind(this)}  className={disabled ? 'l-form-textarea disabled' : 'l-form-textarea'}  placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请输入' + keyStr}`}/>
          </View>
        }
        {
          curTypeStr === 'select'
          &&
          <View className={formContentStr + ' t2'}>
            <Picker mode='selector' className="l-form-picker" range={curArr} rangeKey="key" value="val"  disabled={disabled} onChange={this.selectChange.bind(this, curArr)}>
              <Input type="text" value={curObj[curVal]} disabled  className={disabled ? 'l-form-input disabled' : 'l-form-input'}  placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
            </Picker>
            <Image src={signRight} className="down" />
          </View>
        }
        {
          curTypeStr === 'radio'
          &&
          <View className={formContentStr + ' t2'} onClick={this.openRSPopup.bind(this)}>
            {
              curVal
              ? <View className="val" >{curRadioLabel}</View>
              : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
            }
            <Image src={signRight} className="down" />
          </View>
        }
        {
          curTypeStr === 'radio'
          &&
          <RadioSelect keyStr={keyStr} initUpdate={initUpdate} hasFooterNav={hasFooterNav} val={curVal} moreOptions={moreOptions} isShow={isRSShow} bc={this.dealRSPopup.bind(this)} close={this.closeRSPopup.bind(this)}/>
        }
        {
          curTypeStr === 'multiSelect'
          &&
          <View className={formContentStr + ' t2'} onClick={this.openMSPopup.bind(this)}>
            {
              curVal && curVal.length > 0
              ? <View className="val" >{curCheckedLabel}</View>
              : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
            }
            <Image src={signRight} className="down" />
          </View>
        }
        {
          curTypeStr === 'multiSelect'
          &&
          <MultiSelect keyStr={keyStr} hasFooterNav={hasFooterNav} val={curVal} moreOptions={moreOptions} isShow={isMSShow} bc={this.dealMSPopup.bind(this)} close={this.closeMSPopup.bind(this)}/>
        }
        {
          curTypeStr === 'date'
          &&
          <View className={formContentStr + ' t2'}>
            <Picker mode='date' value={curVal} className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this)} start={startDate} fields={dateFields ? dateFields : 'day'} >
              <Input type={inputType} value={curVal} disabled  className={disabled ? 'l-form-input disabled' : 'l-form-input'}  placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
            </Picker>
            <Image src={signRight} className="down" />
          </View>
        }
        {
          curTypeStr === 'time'
          &&
          <View className={formContentStr + ' t2'}>
            <Picker mode='time' value={curVal} className="l-form-picker" disabled={disabled} onChange={this.dateChange.bind(this)}>
              <Input type={inputType} value={curVal} disabled  className={disabled ? 'l-form-input disabled' : 'l-form-input'}  placeholder={`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}/>
            </Picker>
            <Image src={signRight} className="down" />
          </View>
        }
        {
          curTypeStr === 'timeTwo'
          &&
          this.renderTimeTwo()
        }
        {
          curTypeStr === 'canton'
          &&
          <View className={formContentStr + ' t2'} onClick={this.openCPopup.bind(this)}>
            {
              cantonNameObj && cantonNameObj.canton1
              ? <View className="val" >{`${cantonNameObj.canton1 ? cantonNameObj.canton1 : ''}${cantonNameObj.canton2 ? '-' + cantonNameObj.canton2 : ''}${cantonNameObj.canton3 ? '-' + cantonNameObj.canton3 : ''}`}</View>
              : <View className="val un">{`${placeholderSingle ? '' : keyStr2 ? keyStr2 : '请选择' + keyStr}`}</View>
            }
            <Image src={signRight} className="down" />
          </View>
        }
        {
          curTypeStr === 'canton'
          &&
          <LCanton keyStr={keyStr} val={curVal} cantonLabelObj={cantonLabelObj} cantonVerify={cantonVerify} cantonLevel={cantonLevel} isShow={isCShow} bc={this.dealCPopup.bind(this)} close={this.closeCPopup.bind(this)}/>
        }
        {
          curTypeStr === 'region'
          &&
          <View className={formContentStr + ' t2'}>
            <Picker mode='region' className="l-form-picker" disabled={disabled} value={curVal} onChange={this.regionChange.bind(this)}>
              {
                curVal && curVal.length > 0
                ? 
                <View className="val">{curVal[0]}-{curVal[1]}-{curVal[2]}</View>
                :
                <View className="val un">请选择{keyStr}</View>
              }
            </Picker>
            <Image src={signRight} className="down" />
          </View>
        }
        {
          curTypeStr === 'switch'
          &&
          <View style={rightAlign === 'right' ? 'flex: 1;text-align: right;' : 'flex: 1;text-align: left;'}>
            <Switch color="#3C82F7" disabled="true" checked={switchChecked} onClick={this.switchClickHandle.bind(this)} >{switchHasText ? switchChecked ? switchTextTrue : switchTextFalse : ''}</Switch>
          </View>
        }
        {
          curTypeStr === 'img'
          &&
          <View className="l-form-img" onClick={this.uploadImgHandle.bind(this)} style={rightAlign === 'right' ? 'flex: 1;text-align: right;' : 'flex: 1;text-align: left;'}>
            <Image className="img" src={imageSrc} />
          </View>
        }
      </View>
    )
  }
}