/**
 * 
 * 医嘱项列表
 */
import React from 'react';
import {
    Card, Tabs, Icon, Divider,
} from 'antd';
import { Util } from 'tools/index';
import CommonOrderListPage from './component/CommonOrderListPage';
import BasicInformationTabPane from './component/BasicInformationTabPane';
import CheckBodyPartsTabPane from './component/CheckBodyPartsTabPane';
import OLAssociatedCharges from './component/OLAssociatedCharges.jsx'; // 关联收费项
import OLAssociatedHospital from './component/OLAssociatedHospital.jsx'; // 关联医院
import MutuallyExclusiveOrders from './component/MutuallyExclusiveOrders.jsx'; // 关联互斥医嘱
import OLExecutiveDepartments from './component/OLExecutiveDepartments.jsx'; // 执行科室
import OLDoseConversionUnit from './component/OLDoseConversionUnit.jsx'; // 剂量转换单位
import OLSpecimensDoctorAdvice from './component/OLSpecimensDoctorAdvice.jsx'; // 医嘱标本
import MedAllergy from './component/MedAllergy.jsx'; // 关联过敏源
import OtherName from './component/OtherName.jsx'; // 关联别名
import ExtCode from './component/ExtCode.jsx'; // 关联外部代码
import MedItemPropConfig from './component/MedItemPropConfig.jsx'; // 参数配置
import './style/index.less';

const TabPane = Tabs.TabPane;
class OrderListTabs extends React.Component {
    constructor(props) {
        super(props)
        var userData = JSON.parse(sessionStorage.getItem('userData'))
        this.state = {
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 10,
            userData: userData,
        }
    }

    //获取公共的medID
    loadCommonMedId(data) {
        this.setState({
            medID: data
        }, () => {
            if (this.state.activeTab == '5') {
                this.onBodyPart.reloadSource()
            }
        })
    }

    loadDetailMsg(data) {
        this.setState({
            detailData: data
        })
    }

    changeTabs(e) {
        this.setState({
            activeTab: e
        }, () => {
        })
    }

    loadLeftData() {
        this.refs.loadData(1)
    }

    //清除基本信息的编辑信息
    clearInput() {
        this.setState({
            detailData: {},
            medID: ''
        })
        this.refs.clearInput()
    }

    onRefBody = (ref) => {
        this.onBodyPart = ref
    }

    render() {
        let { medID } = this.state;
        let rowDataDom = (
            <div style={{ color: '#1999db', fontWeight: '700', fontSize: '14px', height: '32px', lineHeight: '32px' }}>
                【当前已选择医嘱项】
                {medID && medID.medCode ? medID.medCode : '--'}
                <Divider type="vertical" style={{ color: '#1999db' }} />
                {medID && medID.medDesc ? medID.medDesc : '--'}
                <Divider type="vertical" style={{ color: '#1999db' }} />
                {medID && medID.subCatDesc ? medID.subCatDesc : '--'}
                <Divider type="vertical" style={{ color: '#1999db' }} />
                {medID && medID.statusDesc ? medID.statusDesc : '--'}
            </div>
        )
        return <div className='outpatient-station-body' style={{ height: '100%' }}>
            <Card style={{ width: '35%', float: 'left' }} className='outpatient-station-card' title='医嘱项列表'>
                <CommonOrderListPage ref={ref => this.refs = ref} loadCommonMedId={this.loadCommonMedId.bind(this)}
                    loadDetailMsg={this.loadDetailMsg.bind(this)}></CommonOrderListPage>
            </Card>

            <Card style={{ width: '64.8%', float: 'right' }} title={this.state.medID ? '编辑医嘱项' : '添加医嘱项'}>
                <Tabs type="card" className='patient-tab-body' size='small' onChange={this.changeTabs.bind(this)}>
                    <TabPane tab={<span><Icon type='medicine-box' />基本信息</span>} key="1">
                        <BasicInformationTabPane params={this.state.medID} loadLeftData={this.loadLeftData.bind(this)}
                            clearInput={this.clearInput.bind(this)}
                            detailData={this.state.detailData}></BasicInformationTabPane>
                    </TabPane>
                    <TabPane tab={<span><Icon type='warning' />关联收费项</span>} key="2">
                        {rowDataDom}
                        <OLAssociatedCharges medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span><Icon className={this.state.activeTab == '3' ? 'medicine-box' : 'medicine-box-disable'} />关联医院</span>} key="3">
                        {rowDataDom}
                        <OLAssociatedHospital medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span><Icon type='file-search' />项目执行科室</span>} key="4">
                        {rowDataDom}
                        <OLExecutiveDepartments medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span><Icon type='exception' />检查部位</span>} key="5">
                        {rowDataDom}
                        {!Util.isEmpty(this.state.medID) ? <CheckBodyPartsTabPane onRef={this.onRefBody} medData={this.state.medID} /> : null}
                    </TabPane>
                    <TabPane tab={<span><Icon type='usergroup-add' />剂量单位转换</span>} key="6">
                        {rowDataDom}
                        <OLDoseConversionUnit medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span><Icon className={this.state.activeTab == '7' ? 'patient-table' : 'patient-table-disable'} />医嘱标本</span>} key="7">
                        {rowDataDom}
                        <OLSpecimensDoctorAdvice medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span>关联过敏源</span>} key="8">
                        {rowDataDom}
                        <MedAllergy medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span>关联别名</span>} key="9">
                        {rowDataDom}
                        <OtherName medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span>外部代码</span>} key="10">
                        {rowDataDom}
                        <ExtCode medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span>互斥医嘱</span>} key="11">
                        {rowDataDom}
                        <MutuallyExclusiveOrders medData={this.state.medID} />
                    </TabPane>
                    <TabPane tab={<span>参数配置</span>} key="12">
                        {rowDataDom}
                        <MedItemPropConfig medData={this.state.medID} />
                    </TabPane>
                </Tabs>
            </Card>
        </div>
    }

}
export default OrderListTabs;