import React, { Component } from 'react';
import { Modal,Row, message, Input, Button, Select, Radio, DatePicker,Icon, Table, Col ,Form} from 'antd';
import store from 'store';
import { $http } from '../../../containers/config/https';
import Moment from 'moment';

const FormItem = Form.Item;
const { Option } = Select;
var user ;
const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
const formItemLayoutSelect = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
}
class AddDevice extends Component {
    constructor(props) {
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        super(props);
        var date = new Date()
        this.state = {
            visible: false,
            deviceTypeArr:[],
            hospitalArr:[],
            locArr:[],
            bedArr:[],
            stDate: "",
            locID:"",
            hospID:"",
            bedID:"",
            
        };
    }

    //初始化
    componentDidMount()
    {
        if(this.props.onRef)
        {
            this.props.onRef(this);
        }
    }

    hide = () => {
        this.setState({
            visible: false,
        })
        this.props.that.setState({
            clickRow:{}
        })
    }

    selectHosp = (e) =>{
        this.props.form.setFieldsValue({loc:undefined,bed:undefined})
        this.setState({
            hospID:e,
        },()=>{
            this.handlDeviceBasicData()
        })
    }

    selectLoc = (e) =>{
        this.props.form.setFieldsValue({bed:undefined})
        this.setState({
            locID:e,
        },()=>{
            this.handlDeviceBasicData()
        })
    }


    handlDeviceBasicData = () => {
        let { page2, pageSize2 } = this.state;
        let data = {
            params: [{
                locID:this.state.locID,
                hospID:this.state.hospID,
            }],
        }
        $http.post('urlS', this, {
            code: "04210003",
            data: data,
            success: function (res) {
               if(res.errorCode == 0){
                    this.setState({
                        hospitalArr:res.result.hospitalArr,
                        locArr:res.result.locInfoObj,
                        bedArr:res.result.bedArr,
                        deviceTypeArr:res.result.deviceTypeArr,
                    })
               }
            }
        })
    }

    selectBed = (e) =>{
        this.setState({
            bedID:e,
        })
    }

        //打开消息框
    showModal = () => {
        this.setState({
            visible: true,
        })
        this.handlDeviceBasicData()
    }

    addDevice = () =>{
        const formData = this.props.form.getFieldsValue();
		this.props.form.validateFields((err, value) => {
            if (err) {
                this.setState({
                    clickFlag: false,
                    disabledAll: false
                });
            }else{
                let data = {
                    params: [{
                        ID:this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.id:""):"",
                        deviceNo: formData.deviceNo?formData.deviceNo:"",
                        deviceType: formData.deviceType?formData.deviceType:"",
                        deviceStatus: formData.status?formData.status:"",
                        deviceDesc:formData.deviceDesc?formData.deviceDesc:"",
                        IP:formData.IP?formData.IP:"",
                        MAC:formData.MAC?formData.MAC:"",
                        size:formData.size?formData.size:"",
                        resolution:formData.resolution?formData.resolution:"",
                        startDate:formData.startDate? Moment(formData.startDate).format('YYYY-MM-DD') : null,
                        warrantyPeriod:formData.warrantyPeriod?formData.warrantyPeriod:"",
                        locID:formData.loc?formData.loc:"",
                        status:formData.status?formData.status:"",
                        useStatus:formData.useStatus?formData.useStatus:"",
                        bedID:formData.bed?formData.bed:"",
                        hospCode:formData.hospital?formData.hospital:"",
                        //deviceDesc:"",useStatus
                    }]
                }
                $http.post('urlS', this, {
                    code: "04210001",
                    data: data,
                    success: function (res) {
                        if(res.errorCode==0){
                            message.success("保存成功")
                        }
                        this.hide()
                        this.props.that.handlDeviceData()
                    }
                })
            }
        })
    }

    handleDateTimeChange = (flag, time, datetimeString) => {
        this.setState({ [flag]: datetimeString, renderFlag: !this.state.renderFlag });
    }
    

    render () {
        const { getFieldDecorator } = this.props.form;

        let deviceTypeArr = [];
        this.state.deviceTypeArr?this.state.deviceTypeArr.map((item) => {
            deviceTypeArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""

        let hospitalArr = [];
        this.state.hospitalArr?this.state.hospitalArr.map((item) => {
            hospitalArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""

        let locArr = [];
        this.state.locArr?this.state.locArr.map((item) => {
            locArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""

        let bedArr = [];
        this.state.bedArr?this.state.bedArr.map((item) => {
            bedArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""

        return  (
            <Modal
                className="addDevice"
                title="设备信息"
                visible={this.state.visible}
                destroyOnClose
                maskClosable={false}
                onCancel={this.hide}
                footer={null}
                width="800px"
                height="400px"
            >
                 <Form>
                        <Row style={{ margin: '23px 0 0 0' }}>
                            <Col span={8} >
                                <FormItem {...formItemLayout} label="设备编号">
                                    {getFieldDecorator('deviceNo', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.deviceNo:""):"",
                                        rules: [{ required: true, message: '请填写设变编号' }],
                                    })(
                                        <Input allowClear={true} placeholder="请输入"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8} >
                                <FormItem {...formItemLayout} label="设备描述">
                                    {getFieldDecorator('deviceDesc', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.deviceDesc:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input allowClear={true} placeholder="请输入"/>
                                    )}
                                </FormItem>
                            </Col>
                            
                            <Col span={8} >
                                <FormItem {...formItemLayout} label="设备类型">
                                    {getFieldDecorator('deviceType', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.typeCode:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Select
                                            style={{ width: '100%' }}
                                            allowClear={true}
                                            optionFilterProp="role"
                                            showSearch={true}
                                        >
                                            {deviceTypeArr}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>

                            <Col span={8} >
                                <FormItem {...formItemLayout} label="MAC地址">
                                    {getFieldDecorator('MAC', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.MAC:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input allowClear={true} placeholder="请输入"/>
                                    )}
                                </FormItem>
                            </Col>

                            <Col span={8} >
                                <FormItem {...formItemLayout} label="IP地址">
                                    {getFieldDecorator('IP', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.IP:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input allowClear={true} placeholder="请输入"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                            <FormItem {...formItemLayout} label="设备尺寸">
                                    {getFieldDecorator('size', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.size:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input allowClear={true} placeholder="请输入"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8} >
                            <FormItem {...formItemLayout} label="设备分辨率">
                                    {getFieldDecorator('resolution', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.resolution:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input allowClear={true} placeholder="请输入"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8} >
                            <FormItem {...formItemLayout} label="使用日期">
                                    {getFieldDecorator('startDate', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow.startDate?Moment(this.props.that.state.clickRow.startDate, 'YYYY-MM-DD'):Moment(new Date(),'YYYY-MM-DD')):Moment(new Date(),'YYYY-MM-DD'),
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <DatePicker
                                        onChange={this.handleDateTimeChange.bind(this, "stDate")}
                                        value={this.props.that?(this.props.that.state.clickRow.startDate?Moment(this.props.that.state.clickRow.startDate, 'YYYY-MM-DD'):Moment(new Date(),'YYYY-MM-DD')):Moment(new Date(),'YYYY-MM-DD')}
                                        style={{ width: '100%' }}
                                        >
                                        </DatePicker>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8} >
                            <FormItem {...formItemLayout} label="保质期限">
                                    {getFieldDecorator('warrantyPeriod', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.warrantyPeriod:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input allowClear={true} placeholder="请输入"/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8} >
                                <FormItem {...formItemLayout} label="设备状态">
                                    {getFieldDecorator('status', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.status:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Select
                                            style={{ width: '100%' }}
                                            allowClear={true}
                                            optionFilterProp="role"
                                            showSearch={true}
                                        >
                                                <Option value="Y" key="Y">可用</Option>
                                                <Option value="N" key="N">报废</Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            {/* <Col span={8} >
                                <FormItem {...formItemLayout} label="使用状态">
                                    {getFieldDecorator('useStatus', {
                                        //initialValue: params && params.healBureauID ? String(params.healBureauID) : undefined,
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Select
                                            style={{ width: '100%' }}
                                            allowClear={true}
                                            optionFilterProp="role"
                                            showSearch={true}
                                        >
                                                <Option value="Y" key="Y">可用</Option>
                                                <Option value="N" key="N">空闲</Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col> */}
                        </Row>
                        <div style={{ width: '100%', height: '10px', background: '#f0f2f5' }}></div>
                        <Row>
                            <p style={{alignContent:'center'}}>绑定设置</p>
                            <Col span={8} >
                                <FormItem {...formItemLayout} label="医院">
                                    {getFieldDecorator('hospital', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.hospCode:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Select
                                            style={{ width: '100%' }}
                                            allowClear={true}
                                            optionFilterProp="role"
                                            showSearch={true}
                                            onChange={this.selectHosp}
                                            disabled={this.props.that?(this.props.that.state.clickRow.status=="N"?true:false):false}
                                        >
                                            {hospitalArr}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>

                            <Col span={8} >
                                <FormItem {...formItemLayoutSelect} label="科室">
                                    {getFieldDecorator('loc', {
                                       initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.locCode:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Select
                                            style={{ width: '100%' }}
                                            allowClear={true}
                                            optionFilterProp="role"
                                            showSearch={true}
                                            onChange={this.selectLoc}
                                            disabled={this.props.that?(this.props.that.state.clickRow.status=="N"?true:false):false}
                                        >
                                            {locArr}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>

                            <Col span={8} >
                                <FormItem {...formItemLayoutSelect} label="床号">
                                    {getFieldDecorator('bed', {
                                        initialValue: this.props.that?(this.props.that.state.clickRow?this.props.that.state.clickRow.bedID:""):"",
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Select
                                            style={{ width: '100%' }}
                                            allowClear={true}
                                            optionFilterProp="role"
                                            showSearch={true}
                                            onChange={this.selectBed}
                                            disabled={this.props.that?(this.props.that.state.clickRow.status=="N"?true:false):false}
                                        >
                                            {bedArr}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <div style={{marginLeft:"40%"}}>
                            <Button type="primary"  style={{ marginLeft:20 ,marginRight:20}}  onClick={this.hide}>取消</Button>
                            <Button type="primary"  onClick={this.addDevice}>确定</Button>
                        </div>
                    </Form>
            </Modal>
        )
    }

}
export default Form.create()(AddDevice);