/**
 * 
 * 录入治疗申请单
 */
import React from 'react';
import {
    Modal, Row, Col, Select, Card, Radio, Input, Button, Tree, Icon, Tag, Table,
    Divider, message, DatePicker, TimePicker
} from 'antd';
import { Util, dayFormat, hourFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import ReadCard from 'components/readcard/ReadCard';
import store from 'store';
import '../style/index.less';
import moment from 'moment';

const Option = Select.Option;
const confirm = Modal.confirm;
const Search = Input.Search;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

class ShowEnterTreatmentModal extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var date = new Date()
        this.state = {
            userData: userData,
            radioValue: '1',
            ids: [],
            dataSource: [],
            bookScheduleID: [],
            startDate: moment(date).format(dayFormat),
            endDate: moment(date).format(dayFormat),
            startTime: moment(date).format(hourFormat),
            endTime: moment(date).format(hourFormat),
        }
    }
    componentWillReceiveProps(nextProp) {
        if (nextProp.isShow === true) {
            var date = new Date()
            this.setState({
                cureAppIDs: nextProp.cureAppIDs,
            }, () => {
                this.initData()
                this.loadData()
            })
        } else if (this.props.isShow === false) {
            this.clearInput()
        }
    }

    initData() {
        this.columns = [
            {
                title: '项目名称',
                dataIndex: 'appOrder',
                width: 250,
                align: 'left',
            }, {
                title: '项目单价',
                dataIndex: 'ordSingleAmt',
                width: 150,
                align: 'right',
            }, {
                title: '项目数量',
                dataIndex: 'orderQty',
                width: 150,
                align: 'right',
            }]
    }

    loadData() {
        var params = {
            params: [{
                cureAppID: this.state.cureAppIDs
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040197",
            data: params,
            success: function (res) {
                if (res.errorCode === '0') {
                    var code = []
                    var data = res.result.data
                    if (!Util.isEmpty(data)) {
                        for (var i = 0; i < data.length; i++) {
                            code.push({
                                ...data[i],
                                planLabel: '治疗计划',
                                noteLabel: '治疗计划'
                            })
                        }
                    }
                    this.setState({
                        dataSource: code,
                        rowIds: !Util.isEmpty(data) ? data[0].ID : ''
                    })
                }
            }
        });
    }

    closeModal(name) {
        let { onHide } = this.props;
        onHide && onHide();
    }

    clearInput() {
        this.setState({
            curePlan: undefined,
            note: undefined
        })
    }

    //点击行，渲染当前行样式 
    setRowClassName = (record) => {
        return record.ID === this.state.rowIds ? 'clickRowStyle' : '';
    }

    //点击行，渲染当前行样式
    onClickRow = (record) => {
        return {
            onClick: () => {
                this.setState({
                    rowIds: record.ID
                }, () => {
                })
            }
        };
    }

    onChangeCommonText(id, name, e) {
        var { dataSource } = this.state;
        if (!Util.isEmpty(dataSource)) {
            for (var i = 0; i < dataSource.length; i++) {
                if (id == dataSource[i].ID) {
                    this.state.dataSource[i][name] = e.target.value
                    this.setState({})
                }
            }
        }
    }

    onSubmit() {
        var { dataSource } = this.state;
        var { onSubmit } = this.props;
        onSubmit && onSubmit(dataSource)
    }

    render() {
        var { dataSource } = this.state;
        var dataOption = []
        dataSource && dataSource.map((item, index) => {
            dataOption.push(<div>{this.state.rowIds == item.ID ? <div key={index} value={item.ID}>
                {item.planLabel}：<TextArea rows={3} placeholder='请输入治疗计划' value={item.curePlan}
                    onChange={this.onChangeCommonText.bind(this, item.ID, 'curePlan')} />
                {item.noteLabel}：<TextArea rows={3} placeholder='请输入治疗目标' value={item.cureNote}
                    onChange={this.onChangeCommonText.bind(this, item.ID, 'cureNote')} />
            </div> : null}</div>)
        })

        return <div className='show-application-modal'>
            <Modal className='enter-treat-modal'
                title={'治疗申请单'}
                maskClosable={false}
                visible={this.props.isShow}
                onOk={this.onSubmit.bind(this)}
                okText='保存'
                cancelText='取消'
                onCancel={this.closeModal.bind(this)}>
                <div>
                    <Card title='治疗项目列表'>
                        <Table columns={this.columns}
                            dataSource={this.state.dataSource}
                            bordered
                            onRow={this.onClickRow}
                            rowClassName={this.setRowClassName}
                            rowKey={(data) => {
                                return data.ID
                            }}
                            scroll={{ y: '30vh' }}
                            pagination={false}></Table>
                    </Card>

                    <Card style={{ marginTop: 5 }} title={<span>治疗申请信息</span>}>
                        {dataOption}
                    </Card>
                </div>
            </Modal>
        </div>
    }
}

export default ShowEnterTreatmentModal;