import React from 'react'
import { Modal, Row, Col, Button,Switch, Select } from 'antd'
import { inject, observer } from 'mobx-react';
import { WeaInput, WeaSelect } from 'ecCom'
import SelectItemModal, { items } from '../../../components/selectItemsModal/selectItemsWrapper';

@inject('attendanceStore')
@observer
export default class ItemMangeFormModal extends React.Component {
    componentWillMount() {
        const { attendanceStore: {currentItem, currentItemOperate}} = this.props;
        if(currentItemOperate == "add") {
            this.state = {
                request: {
                    fieldName: "",
                    fieldType: "1",
                    enableStatus: 0,
                    description: ''
                }
            }
        } else {
            this.state = {
                request: currentItem
            }
        }
    }

    handleChange(params) {
        const { request } = this.state
        let result = {...request, ...params}
        this.setState({request: result})
    }   

    render() {
        const options =  [
            {
                key: "1",
                selected: true,
                showname: "数值"
            },
            {
                key: "2",
                selected: false,
                showname: "文本"
            }
        ]
        const { request } = this.state;
        const {fieldName, fieldType, enableStatus, description} = request
        const { attendanceStore : {currentItemOperate}} = this.props;
        return (
            <Modal width={600} visible={this.props.visible} onCancel={this.props.onCancel}
            title={"新建自定义字段"}
            footer={
                <Button type="primary" onClick={() => 
                    {
                        currentItemOperate == "add" ? this.props.onSave(this.state.request) :
                        this.props.onUpdate(this.state.request)
                    }
                    
                }>保存</Button>
            }>
                <div style={{padding: "20px"}}>
                    <Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
                        <Col span={8}>
                            字段名称
                        </Col>
                        <Col span={16}>
                            <WeaInput style={{width: "200px"}} value={fieldName} onChange={(v) => {this.handleChange({fieldName: v})}}/>
                        </Col>
                    </Row>
                    <Row gutter={[10, 10]} style={{marginBottom: "10px"}}>    
                        <Col span={8}>
                            类型
                        </Col>
                        <Col span={16}>
                            <WeaSelect  style={{width: "200px"}} options={options} value={fieldType}
                                onChange={(v) => this.handleChange({fieldType: v})}
                            />
                        </Col>
                    </Row>
                    <Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
                        <Col span={8}>
                            是否启用
                        </Col>
                        <Col span={16}>
                            <Switch checked={enableStatus == 1} onChange={(value) => {
                                let enableStatus = 0
                                if(value) {
                                    enableStatus = 1
                                }
                                this.handleChange({enableStatus})
                            }}/>
                        </Col>
                    </Row>
                    <Row gutter={[10, 10]} style={{marginBottom: "10px"}}>
                        <Col span={8}>
                            备注
                        </Col>
                        <Col span={16}>
                            <WeaInput style={{width: "200px"}} value={description} onChange={(v) => {
                                this.handleChange({description: v})
                            }}/>
                        </Col>
                    </Row>
                </div>
                
            </Modal>
        )
    }
}