import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaFormItem,
	WeaUpload,
	WeaHelpfulTip,
	WeaLocaleProvider,
  WeaSearchGroup
} from 'ecCom'
import {
	Button,
} from 'antd'
import {
	WeaSwitch
} from 'comsMobx'
const getLabel = WeaLocaleProvider.getLabel

@inject('intelogin')
@observer
export default class LoginForm extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			list: [],
			upStatus: '',
		}
    }
    
    componentDidMount() {
		this.props.intelogin.operateTypeForm();
	}

	componentWillUnmount() {
		this.props.intelogin.resetTypeForm();
	}

	getForm = () => {
		const {
			intelogin
		} = this.props, {
			typeForm,
		} = intelogin, {
			form,
			condition,
		} = typeForm, {
			isFormInit,
		} = form;

		let arr = [];

		isFormInit && condition.map(c => {
			c.items.map((field) => {
                const key = field.domkey[0];
                
                if(!["iconWidth", "iconHeight"].includes(key)) {
                    arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@kta1pj@integrationLoginTypeForm${field.domkey[0]}`}
                        label={`${field.label}`}
                        labelCol={{span: 4, offset: 1}}
                        wrapperCol={{span: 12}}
                        error={form.getError(field)}
                        tipPosition="bottom"
                    >
                        <nobr>
                          <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@90wnjb@integrationLoginTypeForm${field.domkey[0]}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={cb => this.handleChange(cb)}/>
                        </nobr>
                    </WeaFormItem>)
    
                    arr = [...arr, this.add({
                        key,
                        form,
                    })]
                }
			})
		})
		return <div>{arr}</div>
	}

	add = (params) => {
		const {
			key,
			form,
		} = params;

		let arr = [];
		if (key == 'shortName') {
			['linkIcon', 'iconSize'].map((f, i) => {
				arr.push(this[f](form));
			});
        }
		return arr;
	}

	handleChange = (cb) => {
		const {
			intelogin
		} = this.props, {
            checkValueUnique,
            typeForm,
            mainTable
		} = intelogin;

		Object.entries(cb).map(arr => {
			const key = arr[0],
				t = arr[1],
				val = Array.isArray(t.value) ? t.value[0] : t.value;
            
			if(key == 'fullName') {
              checkValueUnique({
                tableName: 'outter_sys_type',
                fieldName: 'fullName',
                fieldValue: val.replace(/^(\s*)|(\s*)$/g, ''),
                idValue: mainTable.id,
                idName: 'id'
              }).then(result => {
                if(result.isNotUnique) {
                    typeForm.form.showError('fullName', getLabel('504676','"全称" 已存在'));
                }
              }) 
            }

            if(key == 'shortName') {
                checkValueUnique({
                  tableName: 'outter_sys_type',
                  fieldName: 'shortName',
                  fieldValue: val.replace(/^(\s*)|(\s*)$/g, ''),
                  idValue: mainTable.id,
                  idName: 'id'
                }).then(result => {
                  if(result.isNotUnique) {
                      typeForm.form.showError('shortName', getLabel('504677','"简称" 已存在'));
                  }
                }) 
              }
		});
	}

	linkIcon = () => {
		const {
			intelogin
		} = this.props, {
			typeForm,
			exportExcelFileId,
			delPic,
		} = intelogin, {
			urllinkimagid
		} = typeForm, {
			upStatus,
			list
		} = this.state;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@l7qs01`}
                label={getLabel(82627,'链接图标')}
                labelCol={{span: 4, offset: 1}}
                wrapperCol={{span: 19}}
            >
            	{!urllinkimagid ? (
	            	<div>
	                    <div style={{float: 'left'}}>
	                        <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@15pqn0`}
	                            uploadUrl='/api/integration/Outter/uploadFile'
	                            category='string'
	                            limitType='gif,png,jpg,jpeg,ico,bmp'
	                            datas={upStatus === 'uploaded'  ? list : []}
	                            onChange={(id, list) => {this.setList(list); exportExcelFileId(id[0],list[0].filename)}}
	                            onUploading={status => this.onUploading(status)}
	                        >
	                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3a2vqg`}>{getLabel(125333, '选择文件')}</Button>
	                        </WeaUpload>
	                    </div>
	                    <div style={{float: 'left', paddingLeft: 10, paddingTop: 6}}>
	                        { list.length == 0 ? <p>{getLabel(384040, '未选择任何文件')}</p> : list.map(file => <p>{file.filename}</p>) }
	                    </div>
	                    <div style={{float: 'left', marginLeft: 10, paddingTop: 6}}>
	                    	<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@rv2vh2`} title={`${getLabel(82744,'图片类型必须是')}gif,png,jpg,jpeg,ico,bmp`} width={238}/>
	                    </div>
	                </div>
            	):<div>
            		<img src={`${window.ecologyContentPath || ""}/weaver/weaver.file.FileDownload?fileid=${urllinkimagid}`} style={{width:32,height: 32,float:'left'}}  />
            		<a style={{display: 'block',float: 'left',padding: 8}} onClick={() => delPic()}>{getLabel(131966, '删除')}</a>
            	 </div>}
            </WeaFormItem>
		)
	}

	onUploading(upStatus) {
		this.setState({
			upStatus
		});

		this.setList((upStatus == 'uploading') ? [] : this.state.list);
	}

	setList = (list) => {
		this.setState({
			list
		});
	}

	iconSize = (form) => {
		const {
			intelogin
		} = this.props, {
			typeForm
		} = intelogin;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2mcczi`}
                label={getLabel(125422,'图标大小')}
                labelCol={{span: 4, offset: 1}}
                wrapperCol={{span: 19}}
            >
            	{typeForm.fields.map((field, index) => {
            		return (
            			<div style={{float:'left', width:150,marginLeft:(index == 1) ? 10 : 0 }}>
	            			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0xoerv@integrationLoginTypeForm${field.domkey[0]}`}
				                label={`${field.label}`}
				                labelCol={{span: 9}}
				                wrapperCol={{span: 15}}
				                error={form.getError(field)}
								tipPosition="bottom"
								style={{padding:0}}
	           				>
	           					<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@qfjy9r@integrationLoginTypeForm${field.domkey[0]}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />
	           				</WeaFormItem>
           				</div>
            		)
            	})}
            </WeaFormItem>
		)
	}

	render() {
		return (
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@gafgr5`}
                showGroup
                title={ getLabel(1361, '基本信息')}
                children={this.getForm()}
                col={1}
            />
		)
	}
}