import React from 'react'
import { Modal, Button, Row, Col, Radio } from 'antd'
import { WeaSelect, WeaBrowser } from "ecCom"
import { inject, observer } from 'mobx-react';
import RequiredLabelTip from '../../components/requiredLabelTip';

const objectOptions = [
    {
        key: "EMPLOYEE",
        showname: "人员",
        selected: false
    },
    {
        key: "DEPT",
        showname: "部门",
        selected: false
    },
    {
        key: "POSITION",
        showname: "岗位",
        selected: false
    }
    
]

@inject('ledgerStore')
@observer
export default class AddUserModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedKey: "EMPLOYEE",
            radioValue: "ALL",
            ids: ""
        }
    }

    onRadioChange(e) {
        this.setState({radioValue: e.target.value})
    }

    // 保存
    handleSave() {
        const { ledgerStore: {saveLedgerPersonRange, salarySobId, includeType} } = this.props;
        saveLedgerPersonRange({
            salarySobId: salarySobId,
            includeType: includeType,
            employeeStatus: this.state.radioValue,
            targetParams: this.state.ids.split(",").map(id => ({targetType: this.state.selectedKey, targetId: id}))
        })
    }

    // 重置
    handleReset() {
        this.setState({
            selectedKey: "EMPLOYEE",
            radioValue: "ALL",
            ids: ""
        })
    }

    render() {
        return (
            <Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}} width={600} 
                title="关联人员"
                footer={
                    <div style={{display:"inlne-block"}}>
                        <Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
                        <Button type="default" onClick={() => {this.handleReset()}}>重置</Button>
                    </div>
                }
            >
                <div style={{padding: "20px"}}>
                    <Row style={{lineHeight: "40px"}}>
                        <Col span={8}>对象类型<RequiredLabelTip /></Col>
                        <Col span={16}>
                            <div style={{display: "inline-block", verticalAlign: "top"}}>
                                <WeaSelect style={{height: "30px", marginRight: "10px"}} options={objectOptions} value={this.state.selectedKey} onChange={(value) => {
                                    this.setState({selectedKey: value, ids: ""})
                                    }}/>
                            </div>
                            <div style={{display: "inline-block", verticalAlign: "middle"}}>
                                {
                                    this.state.selectedKey == "EMPLOYEE" && <WeaBrowser
                                    type={17}
                                    title={"人员选择"}
                                    isSingle={false}
                                    inputStyle={{ width: 200 }}
                                        onChange={(ids, names, datas) => {
                                            this.setState({ids})
                                        }}
                                    />
                                }
                                {
                                    this.state.selectedKey == "DEPT" && <WeaBrowser
                                    type={57}
                                    title={"部门选择"}
                                    isSingle={false}
                                    inputStyle={{ width: 200 }}
                                    onChange={(ids, names, datas) => {
                                        this.setState({ids})
                                    }}
                                    />
                                }
                                {
                                    this.state.selectedKey == "POSITION" && <WeaBrowser
                                    type={278}
                                    title={"岗位选择"}
                                    isSingle={false}
                                    inputStyle={{ width: 200 }}
                                    onChange={(ids, names, datas) => {
                                        this.setState({ids})
                                    }}
                                    />
                                }
                            </div>
                        </Col>
                    </Row>
                    <Row style={{lineHeight: "40px"}}>
                        <Col span={8}>选择员工状态<RequiredLabelTip /></Col>
                        <Col span={16}>
                        <Radio.Group onChange={(e) => this.onRadioChange(e)} value={this.state.radioValue}>
                            <Radio value={"ALL"}>全部</Radio>
                            <Radio value={"NORMAL"}>在职</Radio>
                            <Radio value={"UNAVAILABLE"}>离职</Radio>
                        </Radio.Group>
                        </Col>
                    </Row>
                </div>
                
            </Modal>
        )
    }
}