import React from 'react';
import { Modal, Select, Row } from 'antd';

const { Option } = Select;

export default class CopyScheduling extends React.Component{
    constructor() {
        super();
        this.state = {
            visible: false,
            status: [],
            source: undefined, // 已进行排班的排班周期
            target: undefined, // 选则需要复制的排班周期
        }
    }

    componentDidMount() {
        this.props.onRef(this)
    }

    // 显示弹出层
    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    // 取消
    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }

    // 确定复制
    handleCopy = () => {
        console.log(this.state.source, this.state.target)
    }

    // 已进行排班的排班周期
    onChangeSource = (e) => {
        this.setState({source: e})
    }

    // 选则需要复制的排班周期
    onChangeTarget = (e) => {
        this.setState({target: e})
    }

    render() {
        return (
            <Modal
                visible={this.state.visible}
                title="复制排班"
                okText="确定"
                onCancel={this.handleCancel}
                onOk={this.handleCopy}
            >
                <div>
                    <Row style={{marginBottom: '8px'}}>
                        已进行排班的排班周期<span style={{fontSize: '12px', color: 'red', marginLeft: '8px', opacity: '0.5'}}>(来源)</span>
                    </Row>
                    <Row style={{marginBottom: '18px'}}>
                        <Select style={{width: '100%'}} allowClear value={this.state.source} onChange={this.onChangeSource} placeholder="请选择来源">
                            {this.state.status && this.state.status.map(item => {
                                return <Option value={item.id} key={item.id}>{item.descripts}</Option>
                            })}
                        </Select>
                    </Row>
                    <Row style={{marginBottom: '8px'}}>
                        选择需要复制的排班周期<span style={{fontSize: '12px', color: 'red', marginLeft: '8px', opacity: '0.5'}}>(目标)</span>
                    </Row>
                    <Row style={{marginBottom: '18px'}}>
                        <Select style={{width: '100%'}} allowClear value={this.state.target} onChange={this.onChangeTarget} placeholder="请选择目标">
                            {this.state.status && this.state.status.map(item => {
                                return <Option value={item.id} key={item.id}>{item.descripts}</Option>
                            })}
                        </Select>
                    </Row>
                    <Row style={{fontSize: '12px', color: 'red', opacity: '0.5'}}>说明：已生成排班表周期不能复制排班</Row>
                </div>
          </Modal>
        )
    }
}