import React from 'react'
import { Modal, Row, Col, Button, Select, message } from 'antd'
import moment from 'moment'
import { WeaSelect, WeaInput, WeaBrowser, WeaDatePicker } from "ecCom"
import SelectItemModal, {items} from '../../../components/selectItemsModal'
import SelectItemsWrapper from '../../../components/selectItemsModal/selectItemsWrapper'
import { inject, observer } from 'mobx-react';
import RequiredLabelTip from '../../../components/requiredLabelTip'
import { notNull } from '../../../util/validate'
const { Option } = Select

@inject('attendanceStore')
@observer
export default class RefereAttendFormModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            headerSetVisible: false,
            inited: false,
            request: {
                salarySobId: "",
                salaryYearMonth: moment(new Date()).format("YYYY-MM"),
                employeeIds: [],
                description: ""
            }
        }
    }

    handleHeaderSet() {
        this.setState({headerSetVisible: true})
        this.props.onHeaderSet();
    }

    componentWillMount() {
        const { attendanceStore: { getLedgerList }} = this.props;
        getLedgerList().then(() => {
            this.setState({
                inited: true
            })
        })
    }

    // 请求参数改变事件
    handleRequestChange(params) {
        const { request } = this.state;
        let result = { ...request, ...params }
        this.setState({request: result})
    } 


    // 同步点击回调
    handleSync() {
        const { attendanceStore: {syncAttendanceRefer}} = this.props
        if(!this.validate()) {
            return
        }
        syncAttendanceRefer(this.state.request).then(() => {
            this.props.onCancel()
        })
    }

    // 校验数据
    validate() {
        const { request } = this.state;
        if(!notNull(request.salarySobId)) {
            message.warning("薪资账套不能为空");
            return false;
        } 
        if(!notNull(request.salaryYearMonth)) {
            message.warning("薪资所属月不能为空")
            return false;
        }
        return true;
    }


    render() {
        const { attendanceStore: { importLedgerList }} = this.props;
        return (
            <Modal width={600} title="引用考勤数据" footer={
                <div style={{display: "inline-block"}}>
                    <Button type="primary" onClick={() => {this.handleSync()}}>同步</Button>
                    <Button type="default" onClick={() => {this.handleHeaderSet()}}>表头设置</Button>
                </div>
            } visible={this.props.visible} onCancel={this.props.onCancel}>
                <Row style={{marginBottom: "10px"}}>
                    <Col span={8}>薪资所属月: <RequiredLabelTip /></Col>
                    <Col span={16}>
                        <WeaDatePicker
                            format="yyyy-MM"
                            style={{width: 200}}
                            value={this.state.request.salaryYearMonth}
                            onChange={(value) => {
                                this.handleRequestChange({salaryYearMonth: value})
                            }}
                        />
                    </Col>
                </Row>
                <Row style={{marginBottom: "10px"}}>
                    <Col span={8}>薪资账套：<RequiredLabelTip /></Col>
                    <Col span={16}>
                        {
                            this.state.inited && <Select 
                                defaultValue={this.state.request.salarySobId} value={this.state.request.salarySobId} style={{ width: "200px" }} onChange={(value) => {
                                    this.handleRequestChange({salarySobId: value})
                                }}>
                                {importLedgerList.map(item => (
                                    <Option value={item.id} key={item.id}>{item.content}</Option>
                                ))}
                            </Select>
                        }
                    </Col>
                </Row>
                <Row style={{marginBottom: "10px"}}>
                    <Col span={8}>添加账套外人员</Col>
                    <Col span={16}>
                        <WeaBrowser
                            type={17}
                            textDecoration={true}
                            inputStyle={{ width: 200 }}
                            onChange={(ids, names, datas) =>
                                this.handleRequestChange({employeeIds: ids.split(",")})
                            }
                            isSingle={false}
                        />
                    </Col>
                </Row>
                <Row style={{marginBottom: "10px"}}>
                    <Col span={8}>备注</Col>
                    <Col span={16}>
                        <WeaInput style={{width: 200}} value={this.state.request.description} onChange={(value) => {
                            this.handleRequestChange({description: value})
                        }}/>
                    </Col>
                </Row>


                <SelectItemModal 
                    onShowChecked={(value) => {this.props.onShowChecked(value)}} 
                    onRestoreDefault={() => {this.props.onRestoreDefault()}}
                    onSetDefault={() => {this.props.onSetDefault()}}
                    onSearch={(value) => {this.props.onSearch(value)}}
                    onSave={(value) => {this.props.onSave(value)}}
                    visible={this.state.headerSetVisible} onCancel={() => this.setState({headerSetVisible: false})}>
                    <SelectItemsWrapper items={this.props.items} title={"考勤模块"} onChange={(value) => {this.props.onChange(value)}}/>
                </SelectItemModal>
            </Modal>

            
        )
    }
}