import React, { Component } from 'react';
import { Modal, message, Input, Button, Select, Radio, Icon, Table, Col,Tooltip } from 'antd';
import store from 'store';
import CommonPagination from 'components/pagination/index';
import { $http } from '../../../containers/config/https';
import AddDevice from '../DeviceManagement/AddDevice.jsx'
import DeviceBind from '../DeviceManagement/DeviceBind.jsx'

const { Option } = Select;
var user ;
class DeviceManagement extends Component {

    constructor(props) {
        user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        super(props);
        var date = new Date()
        this.state = {
          data:[],
          visible: false,
          size: 'small',
          columns: [],
          search: 'search',
          page: 1,
          pageSize: 10,
          total: 0,
          ENObj: {},
          CNObj: {},
          languageObj: {},
          totalWidth: '',
          hospitalArr:[],
          locArr:[],
          bedArr:[],
          deviceTypeArr:[],
          clickRow:{},
          locID:"",
          hospID:"",
          bedID:"",
          device:"",
          deviceType:"",
          deviceState:"",
          deviceUseState:"",
        };
    }


    componentDidMount() {    
        this.loadColumn()
        this.handlDeviceBasicData()
    }


    handlDeviceBasicData = () => {
        let { page2, pageSize2 } = this.state;
        let data = {
            params: [{
                locID:this.state.locID,
                hospID:this.state.hospID,
            }],
        }
        $http.post('urlS', this, {
            code: "04210003",
            data: data,
            success: function (res) {
               if(res.errorCode == 0){
                    this.setState({
                        hospitalArr:res.result.hospitalArr,
                        locArr:res.result.locInfoObj,
                        bedArr:res.result.bedArr,
                        deviceTypeArr:res.result.deviceTypeArr,
                    })
               }
            }
        })
    }

    //table表格 数据源
    handlDeviceData = () => {
        let { page2, pageSize2 } = this.state;
        let data = {
            params: [{
                locID:this.state.locID,
                hospID:this.state.hospID,
                bedID:this.state.bedID,
                device:this.state.device,
                deviceType:this.state.deviceType,
                deviceState:this.state.deviceState,
                deviceUseState:this.state.deviceUseState
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: this.state.page,
            }]
        }
        $http.post('urlS', this, {
            code: "04210002",
            data: data,
            success: function (res) {
               if(res.errorCode==0){
                   this.setState({
                       data:res.result.DeviceArr,
                       total:res.result.total
                   })
               }
            }
        })
    }

    onRef = ref => {
        this.child = ref;
    }

    //新增
    handlAddInfectiousDictionary = () => {
        this.child.showModal();
    }

    onRec = rec => {
        this.device = rec;
    }

    showDeviceBind = () =>{
        this.device.showModal();
        this.selectLoc("")
    }

    deviceBind (data) {
        this.setState({
            clickRow:data
        },()=>{
            this.showDeviceBind()
        })
    }

    selectHosp = (e) =>{
        this.setState({
            hospID:e,
            locID:"",
            bedID:"",
        },()=>{
            this.handlDeviceBasicData()
        })
    }

    selectLoc = (e) =>{
        this.setState({
            locID:e,
            bedID:"",
        },()=>{
            this.handlDeviceBasicData()
        })
    }

    selectBed = (e) =>{
        this.setState({
            bedID:e,
        })
    }

    selectDevice = (e) =>{
        this.setState({
            device:e.target.value,
        })
    }

    selectDeviceType = (e) =>{
        this.setState({
            deviceType:e,
        })
    }

    selectDeviceState = (e) =>{
        this.setState({
            deviceState:e,
        })
    }

    selectDeviceUseState = (e) =>{
        this.setState({
            deviceUseState:e,
        })
    }

    undeviceBind (e) {
        let data = {
            params: [{
                ID:e?e.id:"",
                locID:"",
                bedID:"",
                hospCode:"",
                //deviceDesc:"",useStatus
            }]
        }
        $http.post('urlS', this, {
            code: "04210001",
            data: data,
            success: function (res) {
                if(res.errorCode==0){
                    message.success("解除绑定成功")
                }
                this.handlDeviceData()
            }
        })
    }



    editDevice (data) {
        this.setState({
            clickRow:data
        },()=>{
            this.handlAddInfectiousDictionary()
        })
    }

    onChange(e, pageSize) {
        this.setState({ page: e, pageSize: pageSize }, () => {
          this.handlDeviceData();
        });
    }
    
      //分页切换
    changePageSize(page, pageSize) {
        this.setState({ pageSize: pageSize, page: page }, () => {
          this.handlDeviceData();
        });
    }


    //DeviceManagement
    //查询列头数据
    loadColumn = () => {
    let data = {
        params: [{
            compontName: 'DeviceManagement',
            type: "C",
            reactCode: ['DeviceManagement'],
        }]
    }
    $http.post('urlDeault', this, {
        code: "01040073",
        data: data,
        success: (res) => {
            console.log(res);
            if (+res.errorCode === 0) {

                var columns = []
                columns = res.result.C

                if (user.language == 'EN') {
                    for (let i = 0; i < columns.length; i++) {
                        columns[i].title = columns[i].enDescripts
                    }        
                }

                if (columns) {
                    for (var ci = 0; ci < columns.length; ci++) {
                        if (columns[ci].dataIndex == 'edit') {
                            var diagColumns = [];
                            diagColumns.push({
                                title: user.language != 'EN' ? user.language != 'EN' ? columns[ci].title : columns[ci].enDescripts : columns[ci].enDescripts,
                                dataIndex: columns[ci].dataIndex,
                                width: columns[ci].width,
                                align: 'center',
                                render: (text, data, index) => {
                                    return (
                                        <div>    
                                            {data.useStatus=="N"?(data.status=="Y"?(<span style={{color:"blue"}} onClick={this.deviceBind.bind(this,data)}>绑定</span>):(<Tooltip title='已报废不能绑定'><span style={{color:'#e6e6e6'}}>绑定</span></Tooltip>)):(<span style={{color:"blue"}} onClick={this.undeviceBind.bind(this,data)}>接触绑定</span>)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{color:"blue"}} onClick={this.editDevice.bind(this,data)} >编辑</span> 
                                        </div>
                                    )
                                }
                            })
                            columns[ci] = diagColumns[0]
                        }
                    }
                }
                this.setState({
                    columns: columns,
                    tableWidth: res.totalWidth,
                    ENObj: res.result.language.EN,
                    CNObj: res.result.language.CN,
                },()=>{
                    this.handlDeviceData()
                })
            }
        }
    })
    }

    render () {

        let deviceTypeArr = [];
        this.state.deviceTypeArr?this.state.deviceTypeArr.map((item) => {
            deviceTypeArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""

        let hospitalArr = [];
        this.state.hospitalArr?this.state.hospitalArr.map((item) => {
            hospitalArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""

        let locArr = [];
        this.state.locArr?this.state.locArr.map((item) => {
            locArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""

        let bedArr = [];
        this.state.bedArr?this.state.bedArr.map((item) => {
            bedArr.push(
            <Option key={item.code} value={item.code} >
              {item.descripts}
            </Option>
          )
        }):""


        return (
            <div className="DeviceManagement"  style={{height:'100%',overflowY:'hidden'}}>
                <div className="SearchCondition" style={{ marginTop:"7px" ,marginBottom:"5px"}}>

                <span>所属医院：</span>
                        <Select  style={{ width: 120 }} allowClear={true} value={this.state.hospID} onChange={this.selectHosp}>
                            {hospitalArr}
                        </Select>

                科室：  <Select style={{ width: 120 }}  allowClear={true} value={this.state.locID} onChange={this.selectLoc}>
                            {locArr}
                        </Select>

                床号：  <Select  style={{ width: 120}}  allowClear={true}  value={this.state.bedID} onChange={this.selectBed}>
                            {bedArr}
                        </Select>

                设备：<Input placeholder="请输入编码或描述"  style={{ width: 200 }}  onChange={this.selectDevice}/>,

                设备类型：<Select  style={{ width: 120 }}  allowClear={true}  onChange={this.selectDeviceType}>
                            {deviceTypeArr}
                        </Select>

                设备状态：<Select  style={{ width: 120 }}  allowClear={true} onChange={this.selectDeviceState}>
                    <Option value="Y">可用</Option>
                    <Option value="N">报废</Option>
                </Select>

                使用状态：<Select  style={{ width: 120 }}   allowClear={true} onChange={this.selectDeviceUseState}>
                    <Option value="Y">在用</Option>
                    <Option value="N">空闲</Option>
                </Select>

                <Button type="primary"  style={{ marginLeft:20 ,marginRight:20}} onClick={this.handlDeviceData}>查询</Button>
                <Button type="primary"  onClick={this.handlAddInfectiousDictionary}>添加设备</Button>
                <Button type="primary"  onClick={this.showDeviceBind}>绑定设备</Button>
                </div>
                <div style={{ width: '100%', height: '10px', background: '#f0f2f5' }}></div>
                <div className="DeviceTable" style={{height:'calc(100% - 100px)'}}>
                    <Table
                        style={{ width: '100%', "padding": "5px",height:"100%" }}
                        dataSource={this.state.data}
                        columns={this.state.columns}
                        rowClassName="editable-row"
                        scroll={{ y: 'calc(100% - 60px)' }}
                        bordered
                        pagination={false}
                        //onRow={this.onRow}
                    />
                </div>
                <div style={{ width: '100%', height: '45px', overflow: 'hidden' }}>
                    <CommonPagination
                        size='small'
                        current={this.state.page}
                        total={this.state.total}
                        search='search'
                        onShowSizeChange={this.changePageSize.bind(this)}
                        complete={true}
                        dataSource={this.state.data}
                        onChange={this.onChange.bind(this)}
                        scroll={{ y: store.getState().tableHeight.y + 'px' }}
                    />
                </div>


                <AddDevice
                    onRef={this.onRef}
                    that={this}
                />
                <DeviceBind 
                    onRef={this.onRec}
                    that={this}
                />
            </div>
        )
    }
       


}export default DeviceManagement