// 角色收费权限维护
import React from 'react';
import store from '../../store';
import {
    Table, Input, Row, Col, Button, Pagination, Spin, Select, Switch, message, Transfer
} from 'antd';
import { $http } from '../../containers/config/https';
import './style/style.less'

const { Option } = Select;

export default class GroupChargeLocConfig extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            // 主菜单列表数据
            data: [],
            // 抽屉显示
            visible: false,
            //多选框
            selectedTableRowKeys: [],
            selectedRowKeys: [],
            //输入条件
            configLocID: '',
            groupID: "",
            //科室下拉框
            locList: [],
            //科室转移数据
            targetLocData: [],
            locData: [],
            mockData: [],
            targetKeys: [],
            // 主菜单分页数据
            total: 0,
            page: 1,
            pageSize: 10,
            flag: '',
            title: '',
            check: false,
            // 是否显示loading
            showLoading: true,
            // 表格loading
            loading: false,
            rowId:''
        };
        this.columns = [
            {
                title: '登录科室',
                dataIndex: 'descripts',
                align: "center",
                width: "150px",
            }

        ];
    }


    //生命周期函数
    componentWillMount() {
        let sessionInfo = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        this.setState({
            configLocID: "",
            groupID: this.props.groupID
        })
    }


    componentDidMount() {
        this.props.onRef(this);
        // 初始化列表数据
        this.handleLogonLocQuery();
        this.handleLocData();
        // 初始化设置table的高度以及表体的高度
        //document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 'px';
        // 数据异步请求，请求成功之后setState
        this.setState({
            showLoading: false
        })
    }
    componentWillUnmount() {
        this.setState = (state, callback) => { return; };
        // 组件销毁前清除监听
        //window.removeEventListener('resize', this.handelHeight);
    }



    //条件元素的改变
    onSelectTableChange = (selectedRowKeys) => {
        this.setState({ selectedTableRowKeys: selectedRowKeys }, () => {
            this.giveDataFar();
        });
    }
    giveDataFar=()=>{
        let {rowId ,targetKeys } = this.state;
        this.props.getSubLocData(rowId,targetKeys)
    }



    handleChange = (targetKeys) => {
        this.setState({ targetKeys: targetKeys }, () => {
            this.giveDataFar();
        });
    }


    //transfer使用执行科室数据
    handleLocData = () => {
        let { configLocID } = this.state;
        let sessionInfo = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        let data = {}
        data = {
            params: [{
                hospID: sessionInfo.hospID,
                configLocID: configLocID,
            }]
        }
        $http.post('urlS', this, {
            code: '05100088',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                   
                    this.setState({ mockData: res.rectLoc, targetKeys: res.locChoseInfo }, () => {
                        this.giveDataFar();
                    });
                    
                }
            }

        })
    }



    //登陆科室的列表
    handleLogonLocQuery = () => {
        let { groupID } = this.state;
        let sessionInfo = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        let data = {}
        data = {
            params: [{ hospID: sessionInfo.hospID,
                       groupID: groupID
                    }]
        }
        $http.post('urlS', this, {
            code: '05100087',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.LogonLocInfo) {
                    this.setState({ data: res.LogonLocInfo})
                }

            }
        })
    }

    // table行样式
    setRowClassName = (record) => {
        if(record.id != this.state.rowId){ return record.configFlag ==="Y" ? 'redClass' : '';}else{return record.id === this.state.rowId ? 'blueClass' : '';}
    }

   // 设置行属性
	onClickRow = (record) => {
		return {
			// 单击行选中
			onClick: () => {
            // 保存行数据以及唯一值
            if(record.id!==this.state.rowId){
                this.setState({rowId: record.id,configLocID: record.configLocID}, () => {
                this.handleLocData();})
                }else{
                this.setState({rowId:"",configLocID: ""}, () => {
                this.handleLocData();})
            }
            
            }
           
	}
    }
    

    render() {
        const { selectedTableRowKeys } = this.state;
        {/*const setRowClassName = this.setRowClassName*/}
        {/*const rowSelection = {
          selectedRowKeys,
          onChange: this.onSelectChange,
          onSelect: this.onSelect
        }*/}
       {/*} const rowTableSelection = {
            selectedTableRowKeys,
            onChange: this.onSelectTableChange,
        }*/}
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                <div>
                    <Row><Col><font color="blue">注：红色是已经存在的数据，蓝色在编辑状态即将会保存的的数据。编辑和取消编辑都为双击。</font></Col></Row>
                    <Row style={{ marginTop: '30px' }}>
                        <Col style={{ display: "inline-block" }} span={4}> <Table
                            style={{ height: '400px', width: "200px", display: "inline-block" }}
                            dataSource={this.state.data}
                            columns={this.columns}
                            rowClassName={this.setRowClassName}
                            scroll={{ y: '400px' }}
                            /*rowSelection={rowTableSelection}*/
                            pagination={false}
                            bordered
                            loading={this.state.loading}
                            className='TableA'
                            onRow={this.onClickRow} />
                        </Col>
                        <Col style={{ display: "inline-block" }} span={20}>
                            <Transfer
                                style={{ display: "inline-block", marginLeft: '100px', marginTop: '20px' }}
                                dataSource={this.state.mockData}
                                showSearch
                                listStyle={{
                                    width: '200px',
                                    height: '400px',
                                }}
                                titles={['选择科室', '执行科室']}
                                operations={['添加', '移除']}
                                targetKeys={this.state.targetKeys}
                                onChange={this.handleChange}
                                render={item => `${item.descripts}`}
                                footer={this.renderFooter}
                            />
                        </Col>
                    </Row>
                </div>
            </Spin>
        );
    }
}
