/**
 * descripts：  疼痛评分 用于急诊预检分级
*/
import React, { Component } from 'react';
import { Modal, Form, Card, Row, Radio, Col, Select, DatePicker, TimePicker, Input, Steps } from 'antd';
import './style/index.less';
import Moment from 'moment';
import { $http } from '../../../containers/config/https';
import { Util } from 'tools/index';

let userData = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
const { Step } = Steps;
const formItemSelect = {
    labelCol: { span: 9 },
    wrapperCol: { span: 10 }
}
const formItemDate = {
    labelCol: { span: 7 },
    wrapperCol: { span: 15 }
}
const formItemTime = {
    labelCol: { span: 8 },
    wrapperCol: { span: 15 }
}
const formItemInputLayout = {    // label 和input宽度
    labelCol: { span: 10 },
    wrapperCol: { span: 10 },
};
const PainScoreModel = Form.create()(
    class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                endangeredFlag: false,      //濒危
                neverWaitFlag: false,       //不能等
                emergencyCaseFlag: false,   //急症
                vitalSignsFlag: false,      //生命体征
                emergencySourceFlag: false, //急诊资源
                painScore: 0,               //疼痛评分
                traumaRateData: [],         //配置数据
                painScoreData: [],          //疼痛评分配置数据
                current: 0,
                patPainRate: {},
                patRange: [],                //疼痛范围下拉框
                painScoreSaved: false,          //点击过保存
            }
        }

        componentDidMount() {
            // this.loadColumn();
            this.props.onRef(this)
            this.loadData();
        }
        // UNSAFE_componentWillReceiveProps(nextProps) {
        //     if (nextProps.visible) {
        //         this.loadFormData();
        //     }
        // }

        //查询列头数据
        loadData = () => {
            const typeAry = ['PainScore', 'PainRange']
            let data = {
                params: [{
                    typeAry: typeAry
                }]
            }
            $http.post('urlS', this, {
                code: "04140007",
                data: data,
                success: (res) => {
                    if (+res.errorCode === 0) {
                        this.setState({
                            painScoreData: res.result.Data[0].PainScore,
                            patRange: res.result.Data[1].PainRange
                        }
                        )
                    }
                }
            })
        }

        //根据评分记录ID查询详细评分数据
        loadFormData = () => {
            let data = {
                params: [{
                    power: 'PainGrade',
                    patPainGradeID: this.props.patPainGradeID
                }]
            }
            $http.post('urlS', this, {
                code: "04140008",
                data: data,
                success: (res) => {
                    if (+res.errorCode === 0) {
                        this.setState({
                            patPainRate: res.result.PainGrade,
                            current: res.result.PainGrade.patExponent,
                        }
                        )
                    }
                }
            })
        }
        //点击保存
        save = () => {
            const formData = this.props.form.getFieldsValue();
            let painScoreInfo = {
                params: [{
                    patID: this.props.patID,
                    patPainGradeID: this.props.patPainGradeID,
                    patRangeID: formData.patRangeID,
                    patPainDate: Util.isEmpty(formData.patPainDate) ? '' : Moment(formData.patPainDate).utcOffset(480).format('YYYY-MM-DD'),
                    patPainTime: Util.isEmpty(formData.patPainTime) ? '' : Moment(formData.patPainTime).format('HH:mm:ss'),
                    patExponent: formData.patExponent,
                    updateUserID: userData.userID,
                }]
            }
            console.log(formData, "------>", painScoreInfo)
            this.props.handleOk({ painScoreInfo: painScoreInfo, painScore: false, painScoreSaved: true },this.state.painScore);
        }

        handleOk = (e) => {
            this.save();
        };
        
        onChange = current => {
            // console.log('onChange:', current);
            this.setState({
                current: current,
                painScore: this.state.painScoreData[current].value,
            }
                , () => {
                    this.props.form.setFieldsValue({
                        patExponent: this.state.painScoreData[current].value,
                    })
                }
            );
        };
        //图片修改
        handlePainImg = (score, index) => {
            event.preventDefault();
            this.setState({
                painScore: score,
                current: index,
            }
                , () => {
                    this.props.form.setFieldsValue({
                        patExponent: score,
                    })
                }
            )
        }
        //点击取消
        HandleCancel = () => {
            this.props.form.resetFields(); // 清空表单
            this.setState({
                current: 0,
                painScore: 0
            });
            this.props.handleOk({ painScoreInfo: {}, painScore: false });
        }

        render() {
            const { getFieldDecorator } = this.props.form;
            let patPainRate = this.state.patPainRate
            return (
                <Modal
                    title="创伤评级"
                    width='900px'
                    visible={this.props.visible}
                    onOk={this.handleOk}
                    onCancel={this.HandleCancel}
                    maskClosable={false}
                >
                    <Form layout='vertical' className='Preliminary-form'>
                        <Row>
                            <Col span={5}>
                                <Form.Item label="疼痛范围:" {...formItemSelect}>
                                    {getFieldDecorator('patRangeID', {
                                        initialValue: patPainRate.hasOwnProperty('patRangeID') ? patPainRate.patRangeID : undefined,
                                    })(
                                        <Select
                                            placeholder="请选择范围"
                                            style={{ width: '100px', marginTop: '2px' }}
                                        >
                                            {this.state.patRange.map((item, index) => {
                                                return (
                                                    <Select.Option
                                                        key={item.id}
                                                    >
                                                        {item.descripts}
                                                    </Select.Option>
                                                )
                                            })}
                                        </Select>
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={7}>
                                <Form.Item label="疼痛日期：" {...formItemDate}>
                                    {getFieldDecorator('patPainDate', {
                                        initialValue: Util.isEmpty(patPainRate) ? Moment(Moment().format('L'), 'YYYY-MM-DD') : Moment(patPainRate.patPainDate, 'YYYY-MM-DD'),
                                    })(
                                        <DatePicker />
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label="疼痛时间：" {...formItemTime}>
                                    {getFieldDecorator('patPainTime', {
                                        initialValue: Util.isEmpty(patPainRate) ? Moment(new Date(), 'HH:mm:ss') : Moment(patPainRate.patPainTime, 'HH:mm:ss'),
                                    })(
                                        <TimePicker />
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={5}>
                                <Form.Item label="疼痛指数：" {...formItemInputLayout}>
                                    {getFieldDecorator('patExponent', {
                                        initialValue: Util.isEmpty(patPainRate) ? this.state.painScore : patPainRate.patExponent,
                                        getValueFromEvent: (event) => {
                                            return event.target.value.replace(/[^0-9]/g, '')
                                        },
                                    })(
                                        <Input />
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                    <Card title='疼痛评分量表' className='PainScore-Card'>
                        <Row>
                            1、数字评分法（VAS）
                        </Row>
                        <Row>
                            <Steps
                                progressDot
                                labelPlacement='vertical'
                                current={this.state.current}
                                onChange={this.onChange}>
                                {this.state.painScoreData.map((item, index) => {
                                    return (
                                        <Step title={item.value} />
                                    )
                                })
                                }
                            </Steps>
                        </Row>
                        <Row>
                            2、面部表情法（FACE）
                        </Row>
                        <Row>
                            {this.state.painScoreData.map((item, index) => {
                                const tip = item.descripts + "(" + item.value + ")"
                                return (
                                    <div style={{ float: 'left' }} key={index + ""}>
                                        <img src={require("./style/image/" + item.code + ".png")}
                                            onClick={this.handlePainImg.bind(this, item.value, index)}
                                        />
                                        <br />
                                        <label style={{ padding: '40px' }}>{tip}</label>
                                    </div>
                                )
                            })}
                        </Row>
                    </Card>
                </Modal>
            )
        }
    }
)
export default PainScoreModel