import React, { Component } from 'react';
import { Row, Col, Table, Select, Icon, Divider, Popconfirm, Radio, Button, message } from 'antd'
import { $http } from '../../containers/config/https';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx'; // 公共table组件
import './style/concern.less';
import ConcernFrom from './ConcernModal.jsx';

let user;
const Option = Select.Option;

export default class NurseConcern extends Component {
    constructor(props) {
        super(props);
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        this.state = {
            hospID: user.hospID,
            hospital: [],
            value: 'N',
            concernType: '0',
            deptType: 'N',
            tableData: [],
            total: 0,
            page: 1,
            pageSize: 10,
            sortColumn: 'desc',
            concernInfo: {},
            flag: "",
            title: "",
        }
    }

    componentDidMount() {
        this.getHospital();
        this.initData();
        this.handleQuery();
    }

    initData() {
        this.columns = [
            {
                title: '序号',
                dataIndex: 'key',
                key: '1',
                width: '3%',
                align: 'center',

            }, {
                title: '需关注类型',
                dataIndex: 'transType',
                key: '2',
                width: '5%',
                align: 'center',
            }, {
                title: '人员类型',
                dataIndex: 'transUserType',
                key: '3',
                width: '5%',
                align: 'center',
            }, {
                title: '需处理情况',
                dataIndex: 'transSituation',
                key: '4',
                width: '7%',
                align: 'center',
            }, {
                title: '需处理情况代码',
                dataIndex: 'transSituationCode',
                key: '5',
                width: '10%',
                align: 'center',
            }, {
                title: '启用',
                dataIndex: 'transStatusDesc',
                key: '6',
                width: '5%',
                align: 'center',
            }, {
                title: '提示顺序',
                dataIndex: 'transSeqNo',
                key: '7',
                width: '5%',
                align: 'center',
            }, {
                title: '急诊留观是否显示',
                dataIndex: 'transEmergencyFlag',
                key: '8',
                width: '10%',
                align: 'center',
            }, {
                title: '屏蔽科室',
                dataIndex: 'transShieldLoc',
                key: '9',
                width: '10%',
                align: 'center',
                render: (text, record) => (
                    record.transShieldLoc.length > 1 ?
                        <Select defaultValue={record.transShieldLoc[0].descripts} style={{ width: '100%' }}>
                            {
                                record.transShieldLoc.map((item) => {
                                    return (
                                        <Option disabled key={item.id}>
                                            {item.descripts}
                                        </Option>
                                    )
                                })
                            }
                        </Select> : record.transShieldLoc[0] ? record.transShieldLoc[0].descripts : ""
                )
            }, {
                title: '屏蔽医嘱大类项目',
                dataIndex: 'transShieldCat',
                key: '10',
                width: '10%',
                align: 'center',
                render: (text, record) => (
                    record.transShieldCat.length > 1 ?
                        <Select defaultValue={record.transShieldCat[0].descripts} style={{ width: '100%' }}>
                            {
                                record.transShieldCat.map((item) => {
                                    return (
                                        <Option disabled key={item.id}>
                                            {item.descripts}
                                        </Option>
                                    )
                                })
                            }
                        </Select> : record.transShieldCat[0] ? record.transShieldCat[0].descripts : ""
                )
            }, {
                title: '屏蔽医嘱子类项目',
                dataIndex: 'transShieldOrdCat',
                key: '11',
                width: '10%',
                align: 'center',
                render: (text, record) => (
                    record.transShieldOrdCat.length > 1 ?
                        <Select defaultValue={record.transShieldOrdCat[0].descripts} style={{ width: '100%' }}>
                            {
                                record.transShieldOrdCat.map((item) => {
                                    return (
                                        <Option disabled key={item.id}>
                                            {item.descripts}
                                        </Option>
                                    )
                                })
                            }
                        </Select> : record.transShieldOrdCat[0] ? record.transShieldOrdCat[0].descripts : ""
                )
            }, {
                title: '屏蔽医嘱项目',
                dataIndex: 'transShieldMed',
                key: '12',
                width: '10%',
                align: 'center',
                render: (text, record) => (
                    record.transShieldMed.length > 1 ?
                        <Select defaultValue={record.transShieldMed[0].descripts} style={{ width: '100%' }}>
                            {
                                record.transShieldMed.map((item) => {
                                    return (
                                        <Option disabled key={item.id}>
                                            {item.descripts}
                                        </Option>
                                    )
                                })
                            }
                        </Select> : record.transShieldMed[0] ? record.transShieldMed[0].descripts : ""
                )
            }, {
                title: '是否控制',
                dataIndex: 'transControlFlag',
                key: '13',
                width: '5%',
                align: 'center',
            }, {
                title: '操作',
                dataIndex: 'operation',
                key: '14',
                width: '10%',
                align: 'center',
                render: (text, record) => {
                    return (
                        <span>
                            <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
                            <span className='span' onClick={this.editRightData.bind(this, record)}>编辑</span>
                            <Divider type="vertical" />
                            <Icon type="delete" style={{ color: 'rgba(240,65,52,1)' }}></Icon>
                            <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={this.handleRightDel.bind(this, record)} >
                                <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
                            </Popconfirm>
                        </span>
                    )
                }
            }
        ]

    }

    getHospital = () => {
        let data = {
            params: [{
                hospID: user.hospID,
                logonGroupID: user.groupID,
                logonHospID: user.hospID,
            }]
        };

        $http.post('urlDeault', this, {
            code: "01040001",
            data: data,
            success: (res) => {
                if (+res.errorCode === 0) {
                    this.setState({ hospital: res.depDoctor, hospID: user.hospID })
                } else {
                    message.error('保存失败' + res.errorMessage);
                }
            }
        })
    }

    handleQuery = () => {
        let data = {
            params: [{
                hospID: this.state.hospID,
                deptType: this.state.deptType,
                concernType: this.state.concernType,
                power: 'list'
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: this.state.page,
                sortColumn: this.state.sortColumn,
                sortOrder: 'asc'
            }]
        };
        $http.post('urlS', this, {
            code: '04050008',
            data: data,
            success: (res) => {
                // console.dir(res);
                if (res.errorCode === "0") {
                    for (let index = 0; index < res.result.Data.length; index++) {
                        res.result.Data[index].key = index + 1;
                    }
                    this.setState({
                        total: res.result.TotalCount,
                        tableData: res.result.Data,
                    });
                } else {
                    this.setState({
                        total: 0,
                        tableData: []
                    });
                }
            }
        });
        this.commonChild.handleLoading();
    }

    onSelectChange = (value) => {
        this.setState({ hospID: value != undefined ? value : '' });
    }

    concernTypeChange = (value) => {
        this.setState({
            concernType: value
        }, () => {
            this.handleQuery();
        });
    }

    // 调用公共组件的连接事件
    onRef = (ref) => {
        this.child = ref
    }
    handleOnRef = (ref) => {
        this.commonChild = ref
    }

    // 提供修改page和pageSize的回调函数
    compilePage(page, pageSize) {
        // 修改page，或者pageSize
        this.setState({ page: page, pageSize: pageSize }, () => {
            // 重新调用查询方法
            this.handleQuery();
        })
    }

    // 重置信息
    resetRuleInfo() {
        this.setState({ concernInfo: {} })
    }

    editRightData(record) {
        // 初始化数据
        this.setState({
            concernInfo: record,
            flag: 'edit',
            title: '编辑'
        }, () => {
            // 打开抽屉
            this.child.showDrawer();
        });

    }

    handleRightDel(record) {
        let data = {
            "params": [{
                transID: record.transID,
                updateUserID: user.userID
            }]
        };
        $http.post('urlADS', this, {
            code: '04050011',
            data: data,
            success: function (res) {
                if (res.errorCode === '0') {
                    message.success(`删除成功`);
                    this.handleQuery();
                }
            }
        })
    }

    //新增配置
    handleAdd = () => {
        // 打开抽屉
        this.child.showDrawer();
        // 初始化数据
        this.setState({ flag: 'add', title: '新增' })
    }

    radioChange = (e) => {
        this.setState({
            deptType: e.target.value,
        }, () => {
            this.handleQuery();
        });
    };

    render() {

        // 组件所需参数
        const param = {
            // 表头配置
            columns: this.columns,
            // 表格数据
            data: this.state.tableData,
            // 数据总条数
            total: this.state.total,
            // 数据页数
            page: this.state.page,
            // 表格的宽度
            x: 900
        }

        return (
            <div>
                <div>
                    <Row >
                        <Col span={5}
                        >
                            <div className="select-hosp">
                                <Select style={{ width: 300, margin: '5px 10px' }} defaultValue={user.hospID + ""} onChange={this.onSelectChange} allowClear>
                                    {
                                        this.state.hospital.map((item) => {
                                            return (
                                                <Option key={item.id} value={item.id + ""} title={item.descriptsSPCode} >{item.descripts}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            </div>
                        </Col>
                        <Col span={5}>
                            <div className="concernType">
                                <span>需关注类型 </span>
                                <Select
                                    style={{ width: 200 }}
                                    defaultValue={this.state.concernType}
                                    onChange={this.concernTypeChange}
                                >
                                    <Option key="0" value="0">全部</Option>
                                    <Option key="D" value="D">出院配置</Option>
                                    <Option key="T" value="T">转科配置</Option>
                                </Select>
                            </div>
                        </Col>
                        <Col span={3}>
                            <div className="concernType">
                                <Radio.Group onChange={this.radioChange} value={this.state.deptType} >
                                    <Radio value='D'>医生</Radio>
                                    <Radio value='N'>护士</Radio>
                                </Radio.Group>
                            </div>
                        </Col>
                        <Col span={2}>
                            <div className="concernType">
                                <Button onClick={this.handleQuery} style={{ background: 'rgba(255,255,255,1)' }}>查询</Button>
                            </div>
                        </Col>
                        <Col span={6} style={{ textAlign: 'right' }}>
                            <div className="concernType">
                                <Button icon="plus" onClick={this.handleAdd} style={{ background: 'rgba(247,128,93,1)', color: '#fff' }}>新增</Button>
                            </div>
                        </Col>
                    </Row>
                </div>
                <div style={{ padding: 24 }}>
                    {/* handelThis将夫组件的属性与方法给子组件访问 */}
                    <PubilcTablePagination param={param} handelThis={this} onRef={this.handleOnRef} />
                </div>
                <ConcernFrom onRef={this.onRef} handelThis={this} concernInfo={this.state.concernInfo} hospID={this.state.hospID} flag={this.state.flag} title={this.state.title} />
            </div>
        )
    }
}