import React from 'react';
import { Table, Radio,Input, Tabs, Button, message,Checkbox,Select} from 'antd';
import { $http } from '../../../containers/config/https';
import store from 'store';
import CommonPagination from 'components/pagination/index';
import './style/style.less'

const { Search } = Input;
let userData = {}
class OperationLeave extends React.Component{
    constructor(props) {
        super(props);
        userData = sessionStorage.userData ? JSON.parse(sessionStorage.userData) : {};
        this.state = {
            visible: false,//弹框显示状
            admID:"",
            TitleArr:[],
            OperationCategory:[],
            OperationCategorySel:{},
            typeArr:[],
            UserArr:[],
            type:"title",
            clickRow:"",
            saveOperationLeavel:[],
            columnsUser:[],
            name:"",
            userCount:0,
            titleCount:0,
            total:0,
            page: "1",
            pageSize: "50",
        }
    }

    componentDidMount() {
        this.getDetailTableColumns();
        this.getDetailTableColumn(); 
        this.getDetailColumn();
    }

    loadLeavelBasic = () =>{
        let data = {
            params: [{
                hospID:userData.hospID,
                name:this.state.name,
                type:this.state.type,
            }],
            pagination: [{
                pageSize: this.state.pageSize,
                currentPage: this.state.page,
            }]
        }
        $http.post('urlS', this, {
            code: '04160012',
            data: data,
            success: function (res) {
                console.log(res)
                if (+res.errorCode === 0) {
                    this.setState({
                        TitleArr:res.result.TitleArr,
                        OperationCategory:res.result.OperationCategory,
                        typeArr:res.result.typeArr,
                        UserArr:res.result.UserArr,
                        userCount:res.result.userCount,
                        titleCount:res.result.titleCount,
                        total:res.result.titleCount,
                    })
                }
            }
        })
    }

     // 获取明系列表头数据
     getDetailTableColumns = () => {
        let data = {
            params: [{
                reactCode: ['OperationLeavel'],
                compontName: 'OperationLeavel',
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    var columns = []
                    columns = res.result.C
                    if (userData.language == 'EN') {
						for (let i = 0; i < columns.length; i++) {
							columns[i].title = columns[i].enDescripts
						}
                    }
                    for (var ci = 0; ci < columns.length; ci++) {
                        if (columns[ci].dataIndex == 'Operat') {
                            var diagColumns = [];
                            diagColumns.push({
                                title: userData.language != 'EN' ? userData.language != 'EN' ? columns[ci].title : columns[ci].enDescripts : columns[ci].enDescripts,
                                dataIndex: columns[ci].dataIndex,
                               //width: width,
                                align: 'center',
                                render: (text, data, index) => {
                                    return  <Checkbox checked={this.state.OperationCategorySel[data.id]?this.state.OperationCategorySel[data.id].enable=="N":false}  onChange={this.changeState.bind(this,index,data)}  > </Checkbox>
                                }
                            })
                            columns[ci] = diagColumns[0]
                        }
                    }
                    this.setState({
                        //ENObj: res.result.language.EN,
                        //CNObj: res.result.language.CN,
                        column: columns,
                        //tableWidth: res.totalWidth,
                    }, () => {
                        this.loadLeavelBasic();
                    })
                }
            }
        })
    }

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

    // 获取明系列表头数据
    getDetailTableColumn = () => {
        let data = {
            params: [{
                reactCode: ['OpeartionLeavelTitle'],
                compontName: 'OpeartionLeavelTitle',
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    var columns = []
                    console.log(res)
                    columns = res.result.C
                    if (userData.language == 'EN') {
						for (let i = 0; i < columns.length; i++) {
							columns[i].title = columns[i].enDescripts
						}
                    }
                    this.setState({
                        //ENObj: res.result.language.EN,
                        //CNObj: res.result.language.CN,
                        columns: columns,
                        //tableWidth: res.totalWidth,
                    }, () => {
                        this.loadLeavelBasic()
                    })
                }
            }
        })
    }


    getDetailColumn = () => {
        let data = {
            params: [{
                reactCode: ['OpeationLeavelName'],
                compontName: 'OpeationLeavelName',
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    var columns = []
                    console.log(res)
                    columns = res.result.C
                    if (userData.language == 'EN') {
						for (let i = 0; i < columns.length; i++) {
							columns[i].title = columns[i].enDescripts
						}
                    }
                    this.setState({
                        //ENObj: res.result.language.EN,
                        //CNObj: res.result.language.CN,
                        columnsUser: columns,
                        //tableWidth: res.totalWidth,
                    }, () => {
                        this.loadLeavelBasic()
                    })
                }
            }
        })
    }

    changeState(index,item){
        
        // var OperationCategorySel = this.state.OperationCategorySel
        // var leavelObj = {}
        // var saveOperationLeavel = this.state.saveOperationLeavel
        // if(OperationCategorySel.indexOf(item.id) == -1){
        //     leavelObj.categoryID = item.categoryID
        //     leavelObj.type =this.state.type
        //     leavelObj.id = this.clickRow.id
        //     leavelObj.opera = "Y"
        // }else{
        //     leavelObj.contrastID=OperationCategorySel[index].id
        //     leavelObj.opera = "N"
        //     OperationCategorySel.remove()
        // }
        var OperationCategorySel = this.state.OperationCategorySel
        if(JSON.stringify(OperationCategorySel) !== "{}"){
            if(OperationCategorySel[item.id].enable=="Y"){
                OperationCategorySel[item.id].enable="N"
            }else{
                OperationCategorySel[item.id].enable="Y"
            }
        }else{
            OperationCategorySel[item.id].enable=="N"
        }
        //console.log(OperationCategorySel)
        this.setState({
            OperationCategorySel:OperationCategorySel
        })
    }


    onRow = (record) => {
        var that = this
        return {
          onClick: () => {
            this.setState({
                clickRow:record
            },()=>{
                let data = {
                    params: [{
                        type:this.state.type,
                        ID:record.id,
                    }]
                }
                $http.post('urlS', this, {
                    code: '04160011',
                    data: data,
                    success: function (res) {
                        console.log(res)
                        if (+res.errorCode === 0) {
                            this.setState({
                                OperationCategorySel:res.result.OperationLeave,
                            }) 
                        }
                    }
                })
            })
          }
          
        };
    }

    handleChange = (value) =>{
      var total = this.state.titleCount
      if (value == "user"){
        total = this.state.userCount
      }
      this.setState({
          type:value,
          total:total,
          page:1,
          pageSize:10,
      })
    }

    SelectSome = (e) =>{
       this.setState({
           name:e.target.value
       },()=>{
           this.loadLeavelBasic()
       })
    }

    saveOperationLeavel = () =>{
        if(this.state.clickRow=""){
            message.warning('请选择一个 人/职称!');
			return; 
        }
        let data = {
            params: [{
                OperationCategorySel:this.state.OperationCategorySel,
                type:this.state.type,
            }]
        }
        $http.post('urlS', this, {
            code: '04160016',
            data: data,
            success: function (res) {
                console.log(res)
                if (+res.errorCode === 0) {
                    message.success("保存成功")
                    return ;
                }
            }
        })
    }

    setRowClassName = (record) => {
        return record.id === this.state.clickRow.id ? 'clickRowStyle' : '';
    }

    render(){
          return(
            <div style={{overflow: 'hidden',height:"100%" }} className="scheduleCol">
                <div style={{padding:'5px',marginLeft:'20px',height:'45px'}}>
                    <div style={{marginLeft:'7px',float:'left'}}>
                        类型：<Select defaultValue="title" style={{ width: 120 }} onChange={this.handleChange}>
                            <Option value="title">职称</Option>
                            <Option value="user">用户</Option>
                        </Select>
                    </div>
                    <div style={{marginLeft:'15px',width:'250px',float:'left'}}>
                        搜索：<Input style={{width:'200px'}}  placeholder="填写名称/职称 -回车查询" onPressEnter={this.SelectSome} />
                        {/* <Search
                            placeholder="填写名称/职称"
                            enterButton="查询"
                            size="small"
                            onSearch={this.SelectSome}
                        /> */}
                    </div>
                    <div style={{marginLeft:'15px',float:'left'}}>
                        <Button type="primary" onClick={this.saveOperationLeavel}>保存</Button>
                    </div>   
                </div>
                <div style={{ width: '100%', height: '10px', background: '#f0f2f5' }}></div>

                <div className="operationLeave" style={{ float:"left", width: '25%',height:"100%"}}>
                    <div style={{ width: '100%', height: 'calc(100% - 100px)', overflow: 'hidden' }} >
                        <Table
                            style={{ width: '100%', "padding": "5px",height:"100%" }}
                            dataSource={this.state.type=="user"?this.state.UserArr:this.state.TitleArr}
                            columns={this.state.type=="user"?this.state.columnsUser:this.state.columns}
                            onRow={this.onRow}
                            rowClassName={this.setRowClassName}
                            bordered
                            pagination={false}
                            scroll={{ y: store.getState().tableHeight.y + 'px', x: this.state.tableWidth }}
                        />
                    </div>
                    <div style={{ width: '100%', height: '45px', overflow: 'hidden' }}>
                        <CommonPagination
                            size='large'
                            current={this.state.page}
                            total={this.state.total}
                            search='search'
                            onShowSizeChange={this.changePageSize.bind(this)}
                            complete={true}
                            dataSource={this.state.type=="user"?this.state.UserArr:this.state.TitleArr}
                            onChange={this.onChange.bind(this)}
                            scroll={{ y: store.getState().tableHeight.y + 'px' }}
                        />
                    </div>
                </div>

                <div style={{float:"left", width: '40%'}}>
                    <Table
                        style={{ "padding":"5px", height: (store.getState().tableHeight.y - 230) }}
                        dataSource={this.state.OperationCategory}
                        columns={this.state.column}
                        rowClassName="editable-row"
                        pagination={false}
                        scroll={{ y: store.getState().tableHeight.y + 'px', x: this.state.tableWidth }}
                    />

                    
              </div>

            </div>
          )
      }

}export default OperationLeave