import React from 'react'
import { Row, Col, Switch, Select } from 'antd'
import { WeaInput, WeaSelect } from 'ecCom'
import { inject, observer } from 'mobx-react';
import RequiredLabelTip from '../../../components/requiredLabelTip';
import "./index.less"
const { Option } = Select

@inject('payrollStore')
@observer
export default class BaseInformForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            inited: false,
            options: [],
            request: {}
        }
    }
    componentWillMount() {
        const { payrollStore} = this.props;
        const { getPayrollBaseForm} = payrollStore
        getPayrollBaseForm(this.props.id).then(data => {
            this.setState({
                options: data.salarySobOptions,
                request: data.templateBaseData
            }, () => {
                this.setState({
                    inited: true,
                })
                
            })
        })
    }
    
    hanldeChange(params) {
        let request = {...this.state.request, ...params};
        this.setState({
            request
        })
        this.props.onChange && this.props.onChange(request)
    }

    render() {
        const { request } = this.state;
        const { salarySob, salarySobOption, name,
        description, emailStatus, sendEmail,
        sendEmailOptions, msgStatus } = request;
        return (
            <div className="baseInformForm">
                <div className="formItemWrapper">
                    <div className="itemTitle">基础信息</div>
                    <div className="formWrapper">
                        <Row className="formItem">
                            <Col span={8}>薪资账套<RequiredLabelTip /></Col>
                            <Col span={16}>

                                {
                                    this.state.inited && this.state.options.length > 0 && <Select 
                                    defaultValue={salarySob ? salarySob : ""} value={salarySob ? salarySob : ""} style={{ width: "200px" }} onChange={(value) => this.hanldeChange({salarySob: value})}>
                                    {this.state.options.map(item => (
                                        <Option value={item.key} key={item.key}>{item.showname}</Option>
                                    ))}
                                    </Select>
                                }
                            </Col>
                        </Row>
                        <Row className="formItem">
                            <Col span={8}>工资单模板名称<RequiredLabelTip /></Col>
                            <Col span={16}>
                                <WeaInput value={name} onChange={(value) => this.hanldeChange({name: value})}/>
                            </Col>
                        </Row>
                        <Row className="formItem">
                            <Col span={8}>备注</Col>
                            <Col span={16}>
                                <WeaInput value={description} onChange={(value) => this.hanldeChange({description: value})}/>
                            </Col>
                        </Row>
                    </div>
                </div>
                {/* 发送位置先隐藏 */}
                {/* <div  className="formItemWrapper">
                    <span className="itemTitle">发送位置</span>
                    <div className="formWrapper">
                        <Row className="formItem">
                            <Col span={12}>
                                <Row>
                                    <Col span={8}>邮件</Col>
                                    <Col span={16}>
                                        <Switch value={emailStatus} onChange={(value) => {this.hanldeChange({emailStatus: value})}}/>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={12}>
                                <Row>
                                    <Col span={8}>发送地址</Col>
                                    <Col span={16}>
                                        <WeaSelect style={{width: '200px'}} value={sendEmail} onChange={(value) => {this.hanldeChange({sendEmail: value})}}/>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row className="formItem">
                            <Col span={12}>
                                <Row>
                                    <Col span={8}>消息中心</Col>
                                    <Col span={16}>
                                        <Switch checked={msgStatus} onChange={(value)=>{this.hanldeChange({msgStatus: value})}}/>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </div>
                </div> */}
            </div>
        )
    }
}