/*
 * Creator:     ML
 * CreatDate:   2020-03-09
 * descripts：  快递详情信息显示
 * */
import React from 'react';
import { Form, Row, Col, Input, message, Select, Button, Modal, Table, Pagination, DatePicker, TimePicker, Divider } from 'antd';
import { $http } from 'containers/config/https';
import moment from 'moment';
const FormItem = Form.Item;
const marginRight = {
    marginRight: "38px"
}
const { TextArea } = Input;
const ExpressDeatil = Form.create()(
    class ExpressDeatil extends React.Component {
        constructor(props) {
            super(props)
            var userData = JSON.parse(sessionStorage.getItem('userData'))
            this.state = {
                userData: userData,
                parms: {},//单行信息
                loading: false,//确定按钮 loading
                visible: false,
                birthCity: [],//地市区信息
                birthAreas: [],//地县信息
                birthVillages: [],//地乡信息
                birthHamlets: [],//地村落信息
                params: {},
                rainData:[]
            }
        }
        componentDidMount() {
            this.props.onRefs(this)
        }
        showModal = (titleData) => {
            this.setState({
                visible: true,
                titleData,
            });
            setTimeout(() => {
                if (document.querySelector('.expressDetailDom .ant-input-disabled')) {
                    var x = document.querySelectorAll(".expressDetailDom .ant-input-disabled");
                    for (var i = 0; i < x.length; i++) {
                        x[i].style.cursor = "auto";
                        x[i].style.background = "#fff";
                        x[i].style.border = '0';
                    }
                }
                if (document.querySelector('.expressDetailDom .ant-modal-body')) {
                    document.querySelector(".expressDetailDom .ant-modal-body").style.padding = "12px";
                }
            }, 0)
            this.getRain()
        }
        //获取温控条件下拉框
        getRain=()=>{
            let data = {
                params: [{}],
            }
            $http.post('urlS', this, {
                code: '03010112',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                       this.setState({
                           rainData:res.result
                       })
                    } else {
                       
                    }
                }
            })
        }
        handleCancel = () => {
            this.setState({
                visible: false,
            });
        }
        //国际化
        setMessage(name, message) {
            return this.props.localeProvider ? this.props.localeProvider[name][message] : ''
        }
        //选择日期
        onPanelChange = (mode) => {
            this.setState({
                sendData: moment(mode).format('YYYY-MM-DD'),
            })
        }
        // 截取开始到结束的数据
        range = (start, end) => {
            const result = [];
            for (let i = start; i < end; i++) {
                result.push(i);
            }
            return result;
        }
        render() {
            const { getFieldDecorator } = this.props.form;
            const { titleData } = this.state
             //获取温控条件
             let rainOp = []
             this.state.rainData && this.state.rainData.map(item => {
                rainOp.push(<Option key={item.id} title={item.descripts} role={item.descripts + '^' + item.descriptsSPCode} value={String(item.id)}>{item.descripts}</Option>)
             })
            return (
                <div
                >
                    <Modal
                        className='expressDetailDom'
                        width='1000px'
                        visible={this.state.visible}
                        title={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationCourierDetails ? this.setMessage('PatientRecordInformationCourierDetails', 'descripts') : '快递详细信息'}
                        onOk={this.handleCancel}
                        onCancel={this.handleCancel}
                        footer={null}
                        >
                        <div>
                            <Form>
                            <Row>
                                    <Col span={8}>
                                    
            <span style={{ color: "rgba(0, 0, 0, 0.85)" }}>{this.props.localeProvider && this.props.localeProvider.PatientRecordInformationOrderNumber ? this.setMessage('PatientRecordInformationOrderNumber', 'descripts') : '订单号：'}</span>{titleData && titleData.orderNo && titleData.orderNo ? titleData.orderNo : "--"}
                                    </Col>
                                    <Col span={8}>
            <span style={{ color: "rgba(0, 0, 0, 0.85)" }}>{this.props.localeProvider && this.props.localeProvider.PatientRecordInformationWaybillNumber ? this.setMessage('PatientRecordInformationWaybillNumber', 'descripts') : '运单号：'}</span>{titleData && titleData.expressNo && titleData.expressNo ? titleData.expressNo : "--"}
                                    </Col>
                                    <Col span={8}>
            <span style={{ color: "rgba(0, 0, 0, 0.85)" }}>{this.props.localeProvider && this.props.localeProvider.PatientRecordInformationOrderStatus ? this.setMessage('PatientRecordInformationOrderStatus', 'descripts') : '订单状态：'}</span>{titleData && titleData.orderStatus && titleData.orderStatus ? titleData.orderStatus : "--"}
                                    </Col>
                                </Row>
                                <Divider style={{margin:"12px"}}></Divider>
                                <Row >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationSenderName ? this.setMessage('PatientRecordInformationSenderName', 'descripts') : '寄件人姓名'}>
                                            {getFieldDecorator('sendName', {
                                                initialValue: titleData && titleData.sendName ? titleData.sendName : "--",
                                            })(
                                                <Input disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationMobilePhoneNumber ? this.setMessage('PatientRecordInformationMobilePhoneNumber', 'descripts') : '手机号码'}>
                                            {getFieldDecorator('sendMobile', {
                                                initialValue: titleData && titleData.sendMobile ? titleData.sendMobile : "--",
                                            })(
                                                <Input disabled />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationFixedTelephone ? this.setMessage('PatientRecordInformationFixedTelephone', 'descripts') : '固定电话'}>
                                            {getFieldDecorator('sendPhone', {
                                                initialValue: titleData && titleData.sendPhone ? titleData.sendPhone : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationSenderCompanyName ? this.setMessage('PatientRecordInformationSenderCompanyName', 'descripts') : '寄件方公司名称'}>
                                            {getFieldDecorator('sendConpany', {
                                                initialValue: titleData && titleData.sendConpany ? titleData.sendConpany : "--",
                                            })(
                                                <Input
                                                    title={titleData && titleData.sendConpany ? titleData.sendConpany : ""}
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationSenderCountry ? this.setMessage('PatientRecordInformationSenderCountry', 'descripts') : '寄件人国家'}>
                                            {getFieldDecorator('sendCountryID', {
                                                initialValue: titleData && titleData.patCountryID ? titleData.patCountryID : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationChooseExpress ? this.setMessage('PatientRecordInformationChooseExpress', 'descripts') : '快递服务'}>
                                            {getFieldDecorator('sendexpressID', {
                                                initialValue: titleData && titleData.expressService ? titleData.expressService : "--",

                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationNumberOfPackages ? this.setMessage('PatientRecordInformationNumberOfPackages', 'descripts') : '包裹数量'}>
                                            {getFieldDecorator('prcelQuantity', {
                                                initialValue: titleData && titleData.prcelQuantity ? titleData.prcelQuantity : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationPickUpDate ? this.setMessage('PatientRecordInformationPickUpDate', 'descripts') : '上门取件日期'}>
                                            {getFieldDecorator('sendStartDate', {
                                                initialValue: titleData && titleData.sendStartDate ? titleData.sendStartDate : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationPickUpTime ? this.setMessage('PatientRecordInformationPickUpTime', 'descripts') : '上门取件时间'}>
                                            {getFieldDecorator('sendStartTime', {
                                                initialValue: titleData && titleData.sendStartTime ? titleData.sendStartTime : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationProductCategory ? this.setMessage('PatientRecordInformationProductCategory', 'descripts') : '产品类别'}>
                                            {getFieldDecorator('expressType', {
                                                initialValue: titleData && titleData.expressType ? titleData.expressType : "--",

                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationTemperatureControlConditions ? this.setMessage('PatientRecordInformationTemperatureControlConditions', 'descripts') : '温控条件'}>
                                            {getFieldDecorator('tempRange', {
                                                initialValue: titleData && titleData.tempRangeID ? titleData.tempRange : "--",

                                            })(
                                                // <Input
                                                //     disabled
                                                // />
                                            <Select showSearch allowClear optionFilterProp="role">
                                                {rainOp}
                                            </Select>
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={8} style={{ paddingLeft: "0", paddingRight: "46px" }}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationAddress ? this.setMessage('PatientRecordInformationAddress', 'descripts') : '详细地址'}>
                                            {getFieldDecorator('sendAdress',
                                                {
                                                    initialValue: titleData && titleData.sendAdress ? titleData.sendAdress : "",
                                                })(
                                                    <Input
                                                        title={titleData && titleData.sendAdress ? titleData.sendAdress : ""}
                                                        disabled
                                                    />
                                                )}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Divider style={{margin:"12px"}}></Divider>
                                <Row>
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationTheRecipientName ? this.setMessage('PatientRecordInformationTheRecipientName', 'descripts') : '收件人姓名'}>
                                            {getFieldDecorator('receiveName', {
                                                initialValue: titleData && titleData.receiveName ? titleData.receiveName : "--",
                                            })(
                                                <Input disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationMobilePhoneNumber ? this.setMessage('PatientRecordInformationMobilePhoneNumber', 'descripts') : '手机号码'}>
                                            {getFieldDecorator('receiveMobile', {
                                                initialValue: titleData && titleData.receiveMobile ? titleData.receiveMobile : "--",
                                            })(
                                                <Input disabled />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationFixedTelephone ? this.setMessage('PatientRecordInformationFixedTelephone', 'descripts') : '固定电话'}>
                                            {getFieldDecorator('receivePhone', {
                                                initialValue: titleData && titleData.receivePhone ? titleData.receivePhone : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationRecipientCompanyName ? this.setMessage('PatientRecordInformationRecipientCompanyName', 'descripts') : '收件方公司名称'}>
                                            {getFieldDecorator('receiveConpany', {
                                                initialValue: titleData && titleData.receiveConpany ? titleData.receiveConpany : "--",
                                            })(
                                                <Input
                                                    title={titleData && titleData.receiveConpany ? titleData.receiveConpany : ""}
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationRecipientCountry ? this.setMessage('PatientRecordInformationRecipientCountry', 'descripts') : '收件人国家'}>
                                            {getFieldDecorator('receiveCountry', {
                                                initialValue: titleData && titleData.receiveCountry ? titleData.receiveCountry : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationPaymentMethod ? this.setMessage('PatientRecordInformationPaymentMethod', 'descripts') : '付款方式'}>
                                            {getFieldDecorator('payMethod', {
                                                initialValue: titleData && titleData.payMethod ? titleData.payMethod : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >
                                    <Col span={3} style={marginRight}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationMonthlySettlement ? this.setMessage('PatientRecordInformationMonthlySettlement', 'descripts') : '月结卡号'}>
                                            {getFieldDecorator('custNo', {
                                                initialValue: titleData && titleData.custNo ? titleData.custNo : "--",
                                            })(
                                                <Input
                                                    disabled
                                                />
                                            )}
                                        </FormItem>
                                    </Col >

                                    <Col span={8} style={{ paddingLeft: "0", paddingRight: "46px" }}>
                                        <FormItem label={this.props.localeProvider && this.props.localeProvider.PatientRecordInformationAddress ? this.setMessage('PatientRecordInformationAddress', 'descripts') : '详细地址'}>
                                            {getFieldDecorator('receiveAdress',
                                                {
                                                    initialValue: titleData && titleData.receiveAdress ? titleData.receiveAdress : "--",
                                                })(
                                                    <Input
                                                        title={titleData && titleData.receiveAdress ? titleData.receiveAdress : ""}
                                                        disabled
                                                    />
                                                )}
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </Modal>
                </div>
            )
        }
    })
export default ExpressDeatil

