/** 
 * 批量添加座位
*/
import React from 'react';
import {
    Form, Row, Col, Input, Select, Table, Drawer, DatePicker, Upload, Button, Icon, message, Collapse, Modal, Tag
} from 'antd';
import { dayFormat } from 'tools/index';
import { $http } from '../../containers/config/https';
import { SketchPicker } from 'react-color';
import Moment from 'moment';
// 组件const
const { Option } = Select;
class AddSingleSeat extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            unitArr: [],
            timesArr: [],
            typeArr: [],
            config: [],
            blankItem: [],
            selectIndex: "",
            blankItemAdd: "",
            displayColorPicker: "none",
            color: "#89c4E2",
        }
    }
    componentDidMount() {
        this.props.onRef(this);
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return
        }
    }
    // 保存配置信息
    handleSubmit = (e) => {
        e.preventDefault();
        let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        this.props.form.validateFields((err, values) => {
            if (!err) {  //!err
                let data = {
                    "params": [{
                        hospID: this.props.hospID,          //医院ID
                        locID: this.props.locID,            //科室ID      
                        userID: user.userID,                //用户ID
                        code: values.code || '',            //座位代码
                        desc: values.descript || '',        //座位描述                     
                        type: "0",                          //修改信息时用
                        seatID: this.props.singleSeatInfo ? this.props.singleSeatInfo.seatID : '',//座位ID
                        areaID: values.areaID || '',        //区域ID
                        color: this.state.color,            //颜色
                        startDate: Moment(values.startDate).format(dayFormat) || '',    //有效日期
                        stopDate: values.stopDate ? Moment(values.stopDate).format(dayFormat) : '',      //失效日期
                    }]
                };
                $http.post('urlADS', this, {
                    code: "04080003",
                    data: data,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode === '0') {
                            message.success("生成完成!");
                            this.onClose();
                            this.props.handelThis.onChangeLoc(this.props.locID);
                        }
                    }
                });
            }

        });
    }

    // 关闭抽屉
    onClose = () => {
        this.setState({
            visible: false,
        }, () => {
            // 如果为编辑，则关闭后清除表单
            this.props.handelThis.resetSingleSeatInfo();
            this.resetFields()

        });
    };
    // 打开抽屉
    showDrawer = () => {

        this.setState({
            visible: true,
        });
    };

    // 重置表单
    resetFields() {
        this.props.form.resetFields();
    }
    onColorClick = (e) => {
        e.preventDefault();
        let { displayColorPicker } = this.state;
        displayColorPicker = displayColorPicker == "none" ? "block" : "none";
        this.setState({ displayColorPicker })
    }
    handleChange = (color, e) => {
        this.setState({ color: color.hex })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        let singleSeatInfo = this.props.singleSeatInfo ? this.props.singleSeatInfo : {};
        const locAreaList = this.props.locAreaList;
        let locAreaItem = [];
        locAreaList.map((item) => {
            locAreaItem.push(
                <Option key={item.seatID} value={item.seatID}>{item.seatAreaDesc}</Option>
            )
        })
        const displayColorPicker = this.state.displayColorPicker;
        return (
            <Drawer
                title={this.props.title + "座位信息"}
                width={340}
                onClose={this.onClose}
                visible={this.state.visible}
                style={{
                    overflow: 'auto',
                    height: 'calc(100% - 108px)',
                    paddingBottom: '108px',
                }}
            >
                <Form layout="vertical" onSubmit={this.handleSubmit}  >
                    {/* 第一行 */}
                    <Row>
                        <Col span={22} push={1}>
                            <Form.Item label="区域">
                                {getFieldDecorator('areaID', {
                                    initialValue: singleSeatInfo.areaID,
                                })(
                                    <Select
                                        allowClear={true}
                                        placeholder="请选择区域" >
                                        {locAreaItem}
                                    </Select>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第二行 */}
                    <Row>
                        <Col span={22} push={1}>
                            <Form.Item label="座位代码">
                                {getFieldDecorator('code', {
                                    initialValue: singleSeatInfo.seatCode,
                                    rules: [{ required: true }]
                                })(
                                    <Input placeholder="请输入座位代码" className='input' />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第三行 */}
                    <Row>
                        <Col span={22} push={1}>
                            <Form.Item label="座位描述">
                                {getFieldDecorator('descript', {
                                    initialValue: singleSeatInfo.seatDesc,
                                    rules: [{ required: true }]
                                })(
                                    <Input placeholder="请输入座位描述" className='input' />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第五行 */}
                    <Row>
                        <Col span={22} push={1}>
                            <Form.Item label="生效日期">
                                {getFieldDecorator('startDate', {
                                    initialValue: Moment((singleSeatInfo.startDate) || (new Date()), 'YYYY-MM-DD'),
                                    rules: [{ required: true }]
                                })(
                                    <DatePicker />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第六行 */}
                    <Row>
                        <Col span={22} push={1}>
                            <Form.Item label="失效日期">
                                {getFieldDecorator('stopDate', {
                                    initialValue:  singleSeatInfo.stopDate !== '' ? Moment(singleSeatInfo.stopDate) : null,
                                })(
                                    <DatePicker />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第四行 */}
                    <Row>
                        <Col span={22} push={1}>
                            <Form.Item label="座位背景色">
                                {getFieldDecorator('color')(
                                    <Tag style={{ border: '1px solid #cccccc' }} onClick={this.onColorClick} color={this.state.color}>座位背景色</Tag>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row style={{ width: '100%', textAlign: 'center', marginTop: "30px" }}>
                        <Button onClick={this.handleSubmit} style={{ marginRight: '15px', background: 'rgba(66,185,131,1)', color: '#fff' }}>{this.props.title}</Button>
                    </Row>
                </Form>
                {
                    displayColorPicker == "block" ?
                        <div type="" style={{ position: "absolute", zIndex: 66, textAlign: 'center', border: '1px solid #cccccc' }}>
                            <SketchPicker color={this.state.color} onChange={this.handleChange} />
                            <div style={{ background: '#ffffff', border: '1px solid #cccccc', borderTop: '0px !important', marginTop: '1px' }}>
                                <Button type="primary" onClick={() => {
                                    this.setState({
                                        displayColorPicker: 'none'
                                    })
                                }}>确认</Button>
                            </div>
                        </div>
                        : null
                }
            </Drawer>
        )

    }
}
const AddSingleSeatFrom = Form.create()(AddSingleSeat);

export default AddSingleSeatFrom;
