import {WeaFormItem,WeaLocaleProvider, WeaDialog, WeaCheckbox, WeaSearchGroup} from 'ecCom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import {Button, Spin} from 'antd';
import {
	i18n
} from '../../public/i18n';
const getLabel = WeaLocaleProvider.getLabel;

@inject('outSignAppSetting')
@observer
export default class OutSignAppSetting extends React.Component {

  componentDidMount () {
    const {outSignAppSetting, scope, onCancel} = this.props;
    outSignAppSetting.init(scope,onCancel);
  }

  getForm = () => {
    const {outSignAppSetting} = this.props;
    const {photo,remark,nearly,onChange} = outSignAppSetting;
      let items = [
      {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jwt4db`}
                  label={getLabel(514671, '必须填写"打卡备注"')}
                  labelCol={{span: 6}}
                  wrapperCol={{span: 6}}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@2wdpe0`}
                      value={remark}
                      display="switch"
                      onChange = {(value) => onChange(value,'remark')}
                      style={{display: 'block', marginTop:6}}
                  />
      </WeaFormItem>},
      {
      com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8w05ot`}
                  label={getLabel(514263 , '必须上传照片')}
                  labelCol={{span: 6}}
                  wrapperCol={{span: 6}}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@z7guno`}
                      value={photo}
                      display="switch"
                      onChange = {(value) => onChange(value,'photo')}
                      style={{display: 'block', marginTop:6}}
                  />
      </WeaFormItem>
      },
      {
      com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wmqbru`}
                  label={getLabel(516745,'可选择附近位置')}
                  labelCol={{span: 6}}
                  wrapperCol={{span: 6}}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ux8ptc`}
                      value={nearly}
                      display="switch"
                      onChange = {(value) => onChange(value,'nearly')}
                      style={{display: 'block', marginTop:6}}
                  />
      </WeaFormItem>
      }
      ]
      return (
    <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@pw9r1a`}
          showGroup={true}
          center={true} // 内容是否居中：一般弹框需要
          items={items}
          style={{paddingLeft:'110px'}}
        >
    </WeaSearchGroup>
      )
      
    
  }
    
  render() {
    const {outSignAppSetting} = this.props; 
    const {visible,loading, cancel} = outSignAppSetting;
    let buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2odqdd`} type="primary" onClick = {outSignAppSetting.doSave}>
        {getLabel(30986, '保存')}
      </Button>,
    ];
    const iconInfo = ecCom.WeaTools.getIconBGC('hrm')//图标
    
    return (
      <div>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@iji04w`}
          title={getLabel(507184, "应用设置")}
          visible={visible}
          buttons={buttons}
          icon={iconInfo.icon}
          iconBgcolor={'#217346'}
          style={{width: 500, height: 160}}
          onCancel = {cancel}
        >
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@b0a387`} spinning={loading}>
        {this.getForm()}
        </Spin>
        </WeaDialog>
      </div>
    );
  }
  
}