/**
 *智能终端设备

 */
import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox, Tabs,
    DatePicker, Button, Popconfirm, Icon, Divider, message, Modal,
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import CommonPagination from 'components/pagination/index';
import store from 'store';
import moment from 'moment';
import '../style/index.less';

const { RangePicker } = DatePicker;
const Option = Select.Option;
const Search = Input.Search;
const TabPane = Tabs.TabPane;

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

    componentDidMount() {
        this.initData()
        this.loadData(1)
        this.loadCompanyData()//获取厂商信息
    }

    initData() {
        this.columns = [
            {
                title: '设备厂商',
                dataIndex: 'companyDesc',
                width: 100,
                align: 'left',
            },
            {
                title: '设备类型',
                dataIndex: 'deviceTypeDesc',
                width: 100,
                align: 'left',
            },
            {
                title: '设备型号',
                dataIndex: 'deviceModel',
                width: 100,
                align: 'left',
            },
            {
                title: '设备编号',
                dataIndex: 'SN',
                width: 100,
                align: 'left',
            },
            {
                title: '绑定时间',
                dataIndex: 'createDate',
                width: 100,
                align: 'left',
                render: (text, data) => {
                    return <span>{data.createDate}&nbsp;&nbsp;{data.createTime}</span>
                }
            },
            {
                title: '操作',
                dataIndex: 'opertion',
                width: 100,
                align: 'center',
                render: (text, data, index) => {
                    return <span>
                        <Popconfirm title="确定解除绑定吗?" onConfirm={this.handleDel.bind(this, data, index)} >
                            <span className='span' style={{ color: 'rgba(240,65,52,1)' }}>解除绑定</span>
                        </Popconfirm><Divider type="vertical" />
                        <span style={{ cursor: "pointer", color: '#1890ff' }}
                            onClick={this.handleEditMsg.bind(this, data)}>编辑</span>
                    </span>
                }
            },
        ]
    }

    loadData() {
        var params = {
            params: [{
                patID: this.state.patID,
            }]
        }
        $http.post('urlS', this, {
            code: "03070125",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        dataSource: res.result.data
                    })
                }
            }
        })
    }

    handleDel(data) {
        var params = {
            params: [{
                userID: this.state.userData.userID,
                patDeviceID: data.patDeviceID,
                active: 'N'
            }]
        }
        $http.post('urlS', this, {
            code: "03070127",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('解绑成功！')
                    this.loadData(1)
                }
            }
        })
    }

    handleEditMsg(data) {
        this.setState({
            patDeviceID: data.patDeviceID,
            SN: data.SN,
            companyID: String(data.companyID),
            deviceTypeID: String(data.deviceTypeID),
            deviceModelID: String(data.deviceModelID),
            editStatus: true
        }, () => {
            this.loadCompanyData()
            this.loadEquipmentType()
            this.loadEquipmentNum()
        })
    }

    //获取厂商信息
    loadCompanyData() {
        var params = {
            params: [{}]
        }
        $http.post('urlS', this, {
            code: "03070128",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        companyMsg: res.result
                    })
                }
            }
        })
    }

    changeSelectCompany(name, e) {
        this.setState({
            [name]: e,
            equipmentMsg: [],
            equipmentNumMsg: [],
            deviceTypeID: undefined,
            deviceModelID: undefined
        }, () => {
            this.loadEquipmentType()//获取设备类型
        })
    }

    loadEquipmentType() {
        var params = {
            params: [{
                companyID: this.state.companyID
            }]
        }
        $http.post('urlS', this, {
            code: "03070129",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        equipmentMsg: res.result
                    })
                }
            }
        })
    }

    changeSelectDeviceType(name, e) {
        this.setState({
            [name]: e,
            equipmentNumMsg: [],
            deviceModelID: undefined
        }, () => {
            this.loadEquipmentNum()//获取设备型号
        })
    }

    loadEquipmentNum() {
        var params = {
            params: [{
                companyID: this.state.companyID,
                deviceTypeID: this.state.deviceTypeID,
            }]
        }
        $http.post('urlS', this, {
            code: "03070130",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    this.setState({
                        equipmentNumMsg: res.result
                    })
                }
            }
        })
    }

    handleCannel() {
        this.setState({
            deviceTypeID: undefined,
            deviceModelID: undefined,
            companyID: undefined,
            SN: undefined,
            editStatus: false,
            equipmentMsg: [],
            equipmentNumMsg: [],
        })
    }

    //保存
    handleSaveDeviceMsg() {
        var params = {
            params: [{
                patID: this.state.patID,
                deviceModelID: this.state.deviceModelID,
                SN: this.state.SN,
                hospID: this.state.userData.hospID,
                userID: this.state.userData.userID,
                patDeviceID: this.state.editStatus == true ? this.state.patDeviceID : undefined
            }]
        }
        $http.post('urlS', this, {
            code: this.state.editStatus == true ? '03070127' : "03070126",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    message.success('保存成功！')
                    this.setState({
                        editStatus: false
                    }, () => {
                        this.loadData(1)
                        this.handleCannel()
                    })
                }
            }
        })
    }

    render() {
        //设备厂商
        var companyMsgOption = []
        this.state.companyMsg && this.state.companyMsg.map((item, index) => {
            companyMsgOption.push(<Option key={index} value={String(item.id)} code={item.code} name={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //设备类型
        var equipmentMsgOption = []
        this.state.equipmentMsg && this.state.equipmentMsg.map((item, index) => {
            equipmentMsgOption.push(<Option key={index} value={String(item.id)} code={item.code} name={item.descriptsSPCode}>{item.descripts}</Option>)
        })
        //设备型号
        var equipmentNumMsgOption = []
        this.state.equipmentNumMsg && this.state.equipmentNumMsg.map((item, index) => {
            equipmentNumMsgOption.push(<Option key={index} value={String(item.id)} code={item.code} name={item.descriptsSPCode}>{item.descripts}</Option>)
        })

        return <div className='information-basic-body'
            style={{ background: '#F0F2F5' }}>
            <Card title={<span><span className='imformation-label-left'></span>添加绑定设备</span>}
                style={{ height: '15%' }}>
                <Row style={{ lineHeight: '70px' }}>
                    <Col span={5}>
                        <span><span className='shuld-choose-btn'>*</span>设备厂商：</span>
                        <Select style={{ width: '70%' }} allowClear showSearch placeholder='请选择设备厂商'
                            filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            } onChange={this.changeSelectCompany.bind(this, 'companyID')}
                            value={this.state.companyID}
                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                            {companyMsgOption}
                        </Select>
                    </Col>
                    <Col span={5}>
                        <span><span className='shuld-choose-btn'>*</span>设备类型：</span>
                        <Select style={{ width: '70%' }} allowClear showSearch placeholder='请选择设备类型'
                            filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            } onChange={this.changeSelectDeviceType.bind(this, 'deviceTypeID')}
                            value={this.state.deviceTypeID}
                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                            {equipmentMsgOption}
                        </Select>
                    </Col>
                    <Col span={5}>
                        <span><span className='shuld-choose-btn'>*</span>设备型号：</span>
                        <Select style={{ width: '70%' }} allowClear showSearch placeholder='请选择设备型号'
                            filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.code.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                || option.props.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            } onChange={Util.handleSelectChange.bind(this, 'deviceModelID')}
                            value={this.state.deviceModelID}
                            getPopupContainer={triggerNode => triggerNode.parentNode}>
                            {equipmentNumMsgOption}
                        </Select>
                    </Col>
                    <Col span={5}>
                        <span><span className='shuld-choose-btn'>*</span>设备编码：</span>
                        <Input style={{ width: '70%' }} value={this.state.SN}
                            onChange={Util.commonInputChange.bind(this, 'SN')} />
                    </Col>
                    <Col span={4}>
                        <Button onClick={this.handleCannel.bind(this)}>取消</Button>
                        <Button style={{ marginLeft: 10 }} type='primary'
                            onClick={this.handleSaveDeviceMsg.bind(this)}>保存</Button>
                    </Col>
                </Row>
            </Card>
            <Card title={<span><span className='imformation-label-left'></span>已绑定设备</span>}
                style={{ height: '84.5%', marginTop: 5 }}>

                <Table columns={this.columns} style={{ textAlign: 'center' }}
                    dataSource={this.state.dataSource}
                    scroll={{ y: store.getState().tableHeight.y - 100 }}
                    rowKey={(data) => {
                        return data.patDeviceID
                    }}
                    pagination={false} bordered>

                </Table>
            </Card>
        </div>
    }

}

export default SmartTerminalTabpane;
