// 配药确认
import React from 'react';
import {Row, Col, Card, Input, Button, Steps, List, message, Popover } from 'antd';
import store from 'store';
import { $http } from 'containers/config/https';
import './style/outpha.less';
import notarize from 'assets/images/notarize.png';
let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};

const Step = Steps.Step;
let timer = null;

export default class ConfirmDispensing extends React.Component {

    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            userData,
            mainInfo: [], // 配药单主信息
            stkInfo: [], // 医嘱信息
            dispensingNumber: undefined, // 配药单号
            preDispNo: undefined, // 工号
            rankingList: [], // 配药排行榜
            buttonDis: false, // 确认配药是否置灰
        };
        this.myRef1 = React.createRef();
        this.myRef2 = React.createRef();
    }

    componentDidMount() {
        this.getInitData();
        let {userData} = this.state;
        this.getRankingListData()
        userData.language == 'EN' ? this.getMainTableColumns() : "";
        timer = setInterval(() => {
            this.getRankingListData()
        }, 30000);
    }

    componentWillUnmount() {
        // 组件销毁前将静止让setState修改state的状态
        clearInterval(timer);
        this.setState = (state,callback)=>{ return; }
    }

    // 初始化接口
    getInitData = () => {
        let {userData} = this.state;
        let data = {
			params: [{}]
		}
		$http.post('urlS', this, {
			code: '02030069',
			data: data,
			success: function (res) {
                if (+res.errorCode === 0) {
                    let defalutCurUserFlag = res.result&&res.result.defalutCurUserFlag ? res.result.defalutCurUserFlag : "";
                    if (defalutCurUserFlag === "Y") {
                        this.setState({preDispNo: userData&&userData.userCode ? userData.userCode : ""});
                    }
                }
			}
		})
    }

    // 获取数据列表columns
    getMainTableColumns = () => {
        let {userData} = this.state;
        let data = {
			params: [{
                compontName: "PharmaceuticalConfirmation",
                reactCode: ['PharmaceuticalConfirmation'],
            }]
		}
		$http.post('urlS', this, {
			code: '01040073',
			data: data,
			success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        localeProvider: userData.language == 'EN' ? res.result.language.EN : res.result.language.CN
                    })
                }
			}
		})
    }

	//国际化
	setMessage = (name, message, defaultTitle) => {
		return this.state.localeProvider&&this.state.localeProvider[name] ? this.state.localeProvider[name][message] : defaultTitle
	}

    // 查询
    handleQuery = (e) => {
        let data = {
            params: [{
                preDispNo: e.target.value ? e.target.value : this.state.dispensingNumber
            }]
        }
        $http.post('urlS', this, {
            code: "02030032",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let stkInfo = res.result[0] && res.result[0].stkInfo ? JSON.parse(JSON.stringify(res.result[0].stkInfo)) : [];
                    this.setState({
                        mainInfo: res.result[0] && res.result[0].mainInfo ? res.result[0].mainInfo : [],
                        stkInfo,
                        buttonDis: false,
                    }, () => {
                        this.myRef2.current.focus();
                    })
                }
            }
        })
    }

    // 取配药排行榜
    getRankingListData = () => {
        let data = {
            params: []
        }
        $http.post('urlS', this, {
            code: "02030033",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({rankingList: res.result[0] && res.result[0].rows ? res.result[0].rows : []})
                }
            }
        })
    }
    
    // 配药确认
    handleConfirmDispensing = (e) => {
        let data = {
            params: [
                {
                    preDispNo: this.state.dispensingNumber, // 配药单号
                    userCode: e.target.value ? e.target.value : this.state.preDispNo, // 用户工号
                }
            ]
        }
        $http.post('urlS', this, {
            code: "02030034",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        mainInfo: [], // 配药单主信息
                        stkInfo: [], // 医嘱信息
                        dispensingNumber: undefined, // 配药单号
                        buttonDis: true, // 确认配药是否置灰
                    }, () => {
                        this.myRef1.current.focus();
                    });
                    message.success("确认配药成功")
                    this.getRankingListData();
                    this.getInitData();
                }
            }
        })
    }

    // 查询条件 --- 配药单号
    handleDispensingNumber = (e) => {
        this.setState({ dispensingNumber: e.target.value });
    }

    // 工号
    handlePreDispNo = (e) => {
        this.setState({ preDispNo: e.target.value });
    }

    render() {
        let {mainInfo, stkInfo, dispensingNumber, rankingList, buttonDis, preDispNo} = this.state;
        let mainInfoObj = mainInfo&&mainInfo.length > 0 ? mainInfo[0] : {};
        let detailData = stkInfo[0]&&stkInfo[0].rows.length > 0 ? stkInfo[0].rows : [];
        return (
            <div className="confirm-dispensing">
                <Row>
                    <Col span={16}>
                        <Card
                            size="small"
                            title={<div className="card-title-left-icon"><div></div>{this.setMessage("PharmaceuticalConfirmationdispensingConfirmation", "descripts", "配药确认")}</div>}
                            // extra={<a href="#">More</a>}
                        >
                            <div style={{height: store.getState().tableHeight.y + 180 + 'px', overflow: 'auto', padding: '12px'}}>
                                <Row>
                                    <Input autoFocus ref={this.myRef1} placeholder={this.setMessage("PharmaceuticalConfirmationorderNum", "descripts", "配药单号(Enter)")} style={{width: '200px'}} value={dispensingNumber} onChange={this.handleDispensingNumber} onPressEnter={this.handleQuery} />
                                    <Button style={{margin: '0 20px'}} onClick={this.handleQuery}>{this.setMessage("PharmaceuticalConfirmationsearch", "descripts", "查询")}</Button>
                                    <span style={{display: mainInfo&&mainInfo.length > 0 ? 'inline-block' : 'none'}}>
                                        <Input ref={this.myRef2} placeholder={this.setMessage("PharmaceuticalConfirmationconfirmNum", "descripts", "配药确认人工号(Enter)")} style={{width: '200px', margin: '0 20px'}} value={preDispNo} onChange={this.handlePreDispNo} onPressEnter={this.handleConfirmDispensing} />
                                        <Button onClick={this.handleConfirmDispensing} type="primary" style={{width: '100px'}} disabled={buttonDis}>{this.setMessage("PharmaceuticalConfirmationconfirmPharmaceuticals", "descripts", "确认配药")}</Button>
                                    </span>
                                </Row>
                                <div style={{marginTop: '100px', padding: '0 10%', display: mainInfo&&mainInfo.length > 0 ? 'none' : 'block'}}>
                                        <Steps labelPlacement="vertical">
                                            <Step title={this.setMessage("PharmaceuticalConfirmationqueryDetail", "descripts", "查询处方明细")} />
                                            <Step title={this.setMessage("PharmaceuticalConfirmationcheckDetail", "descripts", "核对药品明细")} />
                                            <Step title={this.setMessage("PharmaceuticalConfirmationenterNumToConfirmation", "descripts", "输入工号进行确认")} />
                                            <Step title={this.setMessage("PharmaceuticalConfirmationdispendingSucc", "descripts", "配药确认成功")} />
                                        </Steps>
                                </div>
                                <div style={{marginTop: '24px',display: mainInfo&&mainInfo.length > 0 ? 'block' : 'none', border: '1px solid #e8e8e8'}}>
                                    <div style={{borderBottom: '1px solid #ccc', position: 'relative'}}>
                                        <div style={{position: 'absolute', right: 0, top: '-20px', display: buttonDis ? 'block' : 'none'}}>
                                            <img src={notarize} style={{width: '80px', height: '80px'}} />
                                        </div>
                                        <h1 style={{textAlign: 'center', position: 'relative', fontSize: '24px', margin: '12px 0'}}>
                                            {user.hospDesc}{this.setMessage("PharmaceuticalConfirmationhospDesc", "descripts", "配药单")}
                                        </h1>
                                        <div style={{padding: '0 48px 12px', fontSize: '14px'}}>
                                            <Row style={{marginBottom: '4px'}}>
                                                <Col span={6}>
                                                    {this.setMessage("PharmaceuticalConfirmationpreDispNo", "descripts", "配药单号：")}{mainInfoObj.preDispNo}
                                                </Col>
                                                <Col span={6}>
                                                    {this.setMessage("PharmaceuticalConfirmationprtDate", "descripts", "卡号：")}{mainInfoObj.patCardNo}
                                                </Col>
                                                <Col span={6}>
                                                    {this.setMessage("PharmaceuticalConfirmationdate", "descripts", "日期：")}{mainInfoObj.prtDate}
                                                </Col>
                                            </Row>
                                            <Row>
                                                <Col span={6}>
                                                    {this.setMessage("PharmaceuticalConfirmationpatName", "descripts", "患者：")}{mainInfoObj.patName}
                                                </Col>
                                                <Col span={6}>
                                                    {this.setMessage("PharmaceuticalConfirmationpatSexDesc", "descripts", "性别：")}{mainInfoObj.patSexDesc}
                                                </Col>
                                                <Col span={6}>
                                                    {this.setMessage("PharmaceuticalConfirmationpatAge", "descripts", "年龄：")}{mainInfoObj.patAge}
                                                </Col>
                                                <Col span={6}>
                                                    {this.setMessage("PharmaceuticalConfirmationpatWeight", "descripts", "体重：")}{mainInfoObj.patWeight}
                                                </Col>
                                            </Row>
                                        </div>
                                    </div>
                                    <div style={{padding: '12px 24px', height: store.getState().tableHeight.y - 22 + 'px', overflow: 'auto'}} className="pr-style">
                                        <h1 style={{fontSize: '20px'}}>Rp:</h1>
                                        <ul style={{fontSize: '16px', padding: '0 24px'}}>
                                            {detailData&&detailData.map((item, index) => {
                                                return (
                                                    <li key={index}>
                                                        <Row>
                                                            <span style={{marginRight: '50px'}}>{index + 1}、{item.stockDesc}</span>
                                                            <span>{item.stockSpec + '*' + (item.qty + item.baseUnitDesc)}</span>
                                                        </Row>
                                                        {item.ordInfo[0]&&item.ordInfo[0].rows.length > 0&&item.ordInfo[0].rows.map((child, childIndex) => {
                                                            return <Row key={childIndex} style={{marginLeft: '24px', fontSize: '14px'}}>{this.setMessage("PharmaceuticalConfirmationusage", "descripts", "用法：")}{child.ordDoseUnitDesc+ ' ' + child.ordFreqDesc+ ' ' + child.ordUsageDesc+ ' ' + child.ordDurationDesc}<span style={{marginLeft: '20px'}}>{child.ordPrescNo}</span></Row>
                                                        })}
                                                    </li>
                                                )
                                            })}
                                        </ul>
                                        <div style={{textAlign: 'center', color: 'rgba(0, 0, 0, 0.4)', marginTop: '100px'}}>-- {this.setMessage("PharmaceuticalConfirmationblank", "descripts", "以下空白")} --</div>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <div style={{paddingLeft: '6px', position: 'relative'}}>
                            <Card
                                size="small"
                                title={<div className="card-title-left-icon"><div></div>{this.setMessage("PharmaceuticalConfirmationdispensingRankings", "descripts", "配药排行榜")}</div>}
                                className="card-title-bg"
                            >
                                <div style={{height: store.getState().tableHeight.y + 180 + 'px', overflow: 'auto', padding: '12px'}}>
                                    <List
                                        itemLayout="horizontal"
                                        // header={<h1 style={{fontSize: '24px'}}>配药排行榜</h1>}
                                        dataSource={rankingList}
                                        renderItem={(item, index) => (
                                            <List.Item key={index} style={{fontSize: '18px'}}>
                                                <span className="circle">{index + 1}</span>
                                                <span style={{margin: '0 10px 0 25px'}}>{item.patName}</span>
                                                {'(' + item.prescNum + ')'}
                                            </List.Item>
                                        )}
                                    />
                                </div>
                            </Card>
                            <div style={{width: '6px', background: 'rgba(240, 242, 245, 1)', position: 'absolute', top: 0, left: 0, height: '100%'}}></div>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}