/** 
 * 批量添加座位
*/
import React from 'react';
import {
    Form, Row, Col, Input, Select, Table, Drawer, Switch, Upload, Button, Icon, message, Collapse, Modal, Tag, DatePicker
} 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 AddSeat extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            unitArr: [],
            timesArr: [],
            typeArr: [],
            config: [],
            blankItem: [],
            selectIndex: "",
            blankItemAdd: "",
            displayColorPicker: "none",
            color: "#89c4E2",
            culomnArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        }
    }
    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) : {};
        let code = "04080002";
        if (this.props.seatInfo.seatID !== undefined) {
            code = "04080003";
        }
        this.props.form.validateFields((err, values) => {
            if (!err) {  //!err

                let data = {
                    "params": [{
                        userID: user.userID,                //用户ID
                        hospID: this.props.hospID,          //医院ID
                        locID: this.props.locID,            //科室ID                 
                        areaDesc: values.areaDesc || '',    //区域描述
                        // width: values.width || '',          //数据类型
                        height: values.height || '',        //填写次数     
                        interval: values.interval || '',    //间隔
                        startCode: values.startCode || '',  //起始座位号  
                        startDesc: values.startDesc || '',  //座位号前缀                              
                        count: values.count || '',          //生成数量
                        column: values.column || '',        //显示列数
                        color: this.state.color,          //颜色
                        type: 1,
                        areaID: this.props.seatInfo.seatID || '',
                        startDate: Moment(values.startDate).format(dayFormat) || '',    //有效日期
                        stopDate: values.stopDate ? Moment(values.stopDate).format(dayFormat) : '',      //失效日期
                    }]
                };
                $http.post('urlADS', this, {
                    code: code,
                    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,
            displayColorPicker: 'none',
        }, () => {
            // 如果为编辑，则关闭后清除表单

            this.props.handelThis.resetSeatInfo();
            this.resetFields()

        });
    };
    // 打开抽屉
    showDrawer = () => {
        let color = "#89c4E2";
        if (this.props.seatInfo.seatColor !== undefined) {
            color = this.props.seatInfo.seatColor
        }
        this.setState({
            visible: true,
            color: color,
        });
    };

    // 重置表单
    resetFields() {
        this.props.form.resetFields();
    }
    /** 快捷筛选 */
    filterOption = (input, option) => {
        return ((option.props.descripts.toLowerCase().indexOf(input.toLowerCase()) >= 0)
            || (option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0)
            || (option.props.descriptsspcode.toLowerCase().indexOf(input.toLowerCase()) >= 0))
    }
    onColorClick = (e) => {
        e.preventDefault();
        let { displayColorPicker } = this.state;
        displayColorPicker = displayColorPicker == "none" ? "block" : "none";
        this.setState({ displayColorPicker })
    }
    handleChange = (color, e) => {
        this.setState({ color: color.hex })
    }
    ///校验数据
    checkData = (rule, value, callback) => {
        //与表单数据进行关联
        var regex = /^[1-9]\d*$/;
        if (!value) {
            // 当value值不存在的话
            callback('数据不能为空');
        } else {
            if (!regex.test(value)) {
                callback("只允许填写正整数");
            }
        }
        callback();
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        let seatInfo = this.props.seatInfo ? this.props.seatInfo : {};
        const displayColorPicker = this.state.displayColorPicker;
        return (
            <Drawer
                title={"批量维护座位信息"}
                width={720}
                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={7}>
                            <Form.Item label="区域名称">
                                {getFieldDecorator('areaDesc', {
                                    initialValue: seatInfo.seatAreaDesc,
                                })(
                                    <Input placeholder="请输入区域名称" className='input' />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={7} offset={1}>
                            {/* <Form.Item label="座位宽度">
                                {getFieldDecorator('width', {
                                    initialValue: seatInfo.seatWidth,
                                    rules: [{ required: true, validator: this.checkData }]
                                })(
                                    <Input placeholder="请输入座位宽度" className='input' />
                                )}
                            </Form.Item> */}
                            <Form.Item label="显示列数">
                                {getFieldDecorator('column', {
                                    initialValue: seatInfo.seatColumn,
                                    rules: [{ required: true, message: '请选择显示列数' }],
                                })(
                                    <Select
                                        allowClear={true}
                                        placeholder="请选择显示列数" >
                                        {
                                            this.state.culomnArr.map((item) => {
                                                return (<Option key={item + ""}>{item}</Option>)
                                            })
                                        }
                                    </Select>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={7} offset={1}>
                            <Form.Item label="座位高度">
                                {getFieldDecorator('height', {
                                    initialValue: seatInfo.seatHeight,
                                    rules: [{ required: true, validator: this.checkData }],
                                })(
                                    <Input placeholder="请输入座位高度" className='input' />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第二行 */}
                    <Row>
                        <Col span={7}>
                            <Form.Item label="座位间距">
                                {getFieldDecorator('interval', {
                                    initialValue: seatInfo.seatInterval,
                                    rules: [{ required: true, validator: this.checkData }],
                                })(
                                    <Input placeholder="请输入座位间距" className='input' />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={7} offset={1}>
                            <Form.Item label="生成数量">
                                {getFieldDecorator('count', {
                                    initialValue: seatInfo.seatCount,
                                    rules: [{ required: true, validator: this.checkData }],
                                })(
                                    <Input disabled={this.props.seatInfo.seatID !== undefined ? true : false} placeholder="请输入生成数量" className='input' />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={7} offset={1}>
                            <Form.Item label="座位号前缀">
                                {getFieldDecorator('startDesc', {
                                    initialValue: seatInfo.startDesc,
                                })(
                                    <Input placeholder="请输入座位号前缀" className='input' />
                                )}
                            </Form.Item>
                        </Col>


                    </Row>
                    {/* 第三行 */}
                    <Row>

                        <Col span={7}   >
                            <Form.Item label="起始座位号">
                                {getFieldDecorator('startCode', {
                                    initialValue: seatInfo.seatStartCode,
                                    rules: [{ required: this.props.seatInfo.seatID === undefined ? true : false, validator: this.props.seatInfo.seatID === undefined ? this.checkData : null }],
                                })(
                                    <Input placeholder="请输入起始座位号" className='input' />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={7} offset={1}>
                            <Form.Item label="生效日期">
                                {getFieldDecorator('startDate', {
                                    initialValue: Moment((seatInfo.startDate) || (new Date()), 'YYYY-MM-DD'),
                                    rules: [{ required: true }]
                                })(
                                    <DatePicker />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={7} push={1}>
                            <Form.Item label="失效日期">
                                {getFieldDecorator('stopDate', {
                                    initialValue: seatInfo.stopDate ? Moment(seatInfo.stopDate) : null,
                                })(
                                    <DatePicker />
                                )}
                            </Form.Item>
                        </Col>

                    </Row>
                    {/* 第四行 */}
                    <Row>
                        <Col span={7} >
                            <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.seatInfo.seatID === undefined ? "" : "重新"}生成</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 AddSeatFrom = Form.create()(AddSeat);

export default AddSeatFrom;
