import React from 'react'
import { Modal, Row, Col, Select, message, Button } from 'antd'
import RequiredLabelTip from '../../components/requiredLabelTip'
import { inject, observer } from 'mobx-react';
import { WeaDatePicker, WeaInput } from 'ecCom'
import { notNull } from '../../util/validate';

const { Option } = Select;

@inject('calculateStore')
@observer
export default class baseFormModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
            salaryMonthStr: "",
            inited: false,
            selectOptions: [],
            salarySob: '',
            description: ""
        }
    }

    componentWillMount() {
        const { calculateStore } = this.props;
        const { salaryacctGetForm } = calculateStore
        salaryacctGetForm().then(data => {
            this.setState({
                inited: true,
                selectOptions: data.salarySobs
            })
        })
    }

    handleSelectChange(value) {
        this.setState({
            salarySob: value
        })
    }

    // 保存回调
    handleSave() {
        if(!this.validate()) {
            return 
        }

        let params = {
            salaryMonthStr: this.state.salaryMonthStr,
            salarySobId: this.state.salarySob,
            description: this.state.description
        }
        const { calculateStore: { saveBasic }} = this.props;

        saveBasic(params).then((id) => {
            this.props.onCancel()
            this.props.onRefresh()
            window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail?id=" + id)
        })
    }

    validate() {
        if(!notNull(this.state.salaryMonthStr)) {
            message.warning("薪酬所属月不能为空")
            return false;
        } else if(!notNull(this.state.salarySob)) {
            message.warning("核算账套不能为空")
            return false;
        }
        return true;
    }

    render() {
        const { salaryMonthStr, salarySobId, description } = this.state;
        return (
            <Modal title="核算" visible={this.props.visible} width={600} onCancel={() => {this.props.onCancel()}}
                footer={<Button type="primary" onClick={() => {
                    this.handleSave()
                }}>保存</Button>}
            >
                <Row style={{lineHeight: '40px'}}>
                    <Col span={8}>薪酬所属月<RequiredLabelTip /></Col>
                    <Col span={16}>
                    <WeaDatePicker
                        style={{width: "200px"}}
                        format="yyyy-MM"
                        value={this.state.salaryMonthStr}
                        onChange={value => {this.setState({
                            salaryMonthStr: value
                        })}}
                    />
                    </Col>
                </Row>
                
                <Row style={{lineHeight: "40px"}}>
                    <Col span={8}>核算账套<RequiredLabelTip /></Col>
                    <Col span={16}>
                    {
                        this.state.inited && <Select 
                        defaultValue={this.state.salarySob} value={this.state.salarySob} style={{ width: "200px" }} onChange={(value) => this.handleSelectChange(value)}>
                        {this.state.selectOptions.map(item => (
                            <Option value={item.id} key={item.id}>{item.name}</Option>
                        ))}
                        </Select>
                    }
                    </Col>
                </Row>
                
                <Row style={{lineHeight: '40px'}}>
                    <Col span={8}>备注</Col>
                    <Col span={16}>
                        <WeaInput value={description} onChange={(value) => this.setState({description: value})}/>
                    </Col>
                </Row>
            </Modal>
        )
    }
}