 // 角色收费支付方式权限维护
import React from 'react';
import store from '../../store';
import {
    Table, Row, Col, Button, Pagination,Spin,Select,Input
  } from 'antd';
import { $http } from '../../containers/config/https';
const {Option} = Select
export default  class GroupChargePaywayConfig extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: {},
            // 主菜单列表数据
            data: [],
            // 抽屉显示
            visible: false,
            groupID:"",
            //支付方式数组
            paymodeNumList:[],
            total: 0,
            page: 1,
            pageSize: 10,
            flag: '',
            title: '',
            check:false,
            // 是否显示loading
            showLoading: true,
            // 表格loading
            loading:false
        };
        this.columns = [
           
            {
                title: '支付方式',
                dataIndex: 'payWay',
                width: '70px',
                align: "center"
            },
            {
                title: '挂号支付方式顺序',
                dataIndex: 'regPayMode',
                align: "center",
                width: "150px",
                render: (text,record,index) => (
                    <Select
                    showSearch
                    placeholder="请输入"
                    optionFilterProp="children"
                    style={{ width: '70px' }}
                    value={record.regPayMode}
                    onChange={this.onChangeRegPayMode.bind(this,record,index)}
                    /*filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/
                >
                    {this.state.paymodeNumList}
                </Select>
                    
                )
            },
            {
                title: '门诊预交金支付方式顺序',
                dataIndex: 'accDepositPayMode',
                align: "center",
                width: "150px",
                render: (text,record,index) => (
                    <Select
                    showSearch
                    placeholder="请输入"
                    optionFilterProp="children"
                    style={{ width: '70px' }}
                    value={record.accDepositPayMode}
                    onChange={this.onChangeAccDepositPayMode.bind(this,record,index)}
                    /*filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/
                >
                    {this.state.paymodeNumList}
                </Select>
                    
                )
            },
            {
                title: '门诊收费支付方式顺序',
                dataIndex: 'opChargePayMode',
                align: "center",
                width: "150px",
                render: (text,record,index) => (
                    <Select
                    showSearch
                    placeholder="请输入"
                    optionFilterProp="children"
                    style={{ width: '70px' }}
                    value={record.opChargePayMode}
                    onChange={this.onChangeOpChargePayMode.bind(this,record,index)}
                    /*filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/
                >
                   {this.state.paymodeNumList}
                </Select>
                    
                )
            },
            {
                title: '住院预交金支付方式顺序',
                dataIndex: 'preDepositPayMode',
                align: "center",
                width: "150px",
                render: (text,record,index) => (
                    <Select
                    showSearch
                    placeholder="请输入"
                    optionFilterProp="children"
                    style={{ width: '70px' }}
                    value={record.preDepositPayMode}
                    onChange={this.onChangePreDepositPayMode.bind(this,record,index)}
                    /*filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/
                >
                   {this.state.paymodeNumList}
                </Select>
                    
                )
            },
            {
                title: '住院收费支付方式顺序',
                dataIndex: 'ipChargePayMode',
                align: "center",
                width: "150px",
                render: (text,record,index) => (
                    <Select
                    showSearch
                    placeholder="请输入"
                    optionFilterProp="children"
                    style={{ width: '70px' }}
                    value={record.ipChargePayMode}
                    onChange={this.onChangeIpChargePayMode.bind(this,record,index)}
                    /*filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}*/
                >
                    {this.state.paymodeNumList}
                </Select>
                    
                )
            },

        ];
       
    }
   

    //生命周期函数
    componentWillMount(){
    let sessionInfo = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
    this.setState({ 
       locID:sessionInfo.locID,
       groupID: this.props.groupID
    })}
    
    componentDidMount() {
        this.props.onRef(this);
        // 初始化列表数据
        this.handleQuery();
        this.handlePaymodeNumList();
        // 初始化设置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);
    }
    
    
    //支付方式数量的下拉框
    handlePaymodeNumList = () => {
        let data = {}
        data = {
        params: [{
        }]
         }
        $http.post('urlS', this, {
            code: '05100033',
            data:data ,
            success: function (res) {
                if (+res.errorCode === 0 && res.payMode) {
                let tempList =this.state.paymodeNumList
                for (var i = 0; i < res.payMode.length+1; i++) {
                    tempList.push(<Option key={i} alias={i}>{i}</Option>)
                }
                this.setState({
                    paymodeNumList: tempList
                })
                 } 
            }
        })
    
    }   

    //改变table里的下拉框
    onChangeRegPayMode= (record,index,value) => {
        let regPayMode=""
        if(value==0){
            regPayMode=""
        }else{
            regPayMode=value
        }
        var tableDataTmp=[]
        tableDataTmp=this.state.data
        tableDataTmp[index].regPayMode=regPayMode
        this.setState({data:tableDataTmp},()=>{this.giveDataFar();})
      }
     
    onChangeAccDepositPayMode= (record,index,value) => {
        let accDepositPayMode=""
        if(+value===0){
            accDepositPayMode=""
        }else{
            accDepositPayMode=value
        }
        var tableDataTmp=[]
        tableDataTmp=this.state.data
        tableDataTmp[index].accDepositPayMode=accDepositPayMode
        this.setState({data:tableDataTmp},()=>{this.giveDataFar();})
      }

    onChangeIpChargePayMode= (record,index,value) => {
        let ipChargePayMode=""
        if(+value===0){
            ipChargePayMode=""
        }else{
            ipChargePayMode=value
        }
        var tableDataTmp=[]
        tableDataTmp=this.state.data
        tableDataTmp[index].ipChargePayMode=ipChargePayMode
        this.setState({data:tableDataTmp},()=>{this.giveDataFar();})
      }

    onChangeOpChargePayMode= (record,index,value) => {
        let opChargePayMode=""
        if(+value===0){
            opChargePayMode=""
        }else{
            opChargePayMode=value
        }
        var tableDataTmp=[]
        tableDataTmp=this.state.data
        tableDataTmp[index].opChargePayMode=opChargePayMode
        this.setState({data:tableDataTmp},()=>{this.giveDataFar();})
      }

    onChangePreDepositPayMode= (record,index,value) => {
        let preDepositPayMode=""
        if(+value===0){
            preDepositPayMode=""
        }else{
            preDepositPayMode=value
        }
        var tableDataTmp=[]
        tableDataTmp=this.state.data
        tableDataTmp[index].preDepositPayMode=preDepositPayMode
        this.setState({data:tableDataTmp},()=>{this.giveDataFar();})
      }

    giveDataFar=()=>{
        let { data } = this.state;
        this.props.getSubPaywayData(data)
    }
    // 页码改变的回调，参数是改变后的页码及每页条数
    onChange = (page, pageSize)=> {
        this.setState({page: page, pageSize: pageSize}, () => {
            // 重新调用查询方法
            this.handleQuery();
        });
    }


    // 查询
    handleQuery = () => {
        let {groupID, page, pageSize} = this.state;
        let sessionInfo = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        let data1 = {}
        data1= {
                params: [{
                    groupID:groupID,
                    hospID:sessionInfo.hospID
                }],
                pagination:[{
                    pageSize: pageSize,
                    currentPage: page,
                    sortColumn: "Code",
                    sortOrder: "asc"
                }]
            }
        $http.post('urlS', this, {
          code: '05100030',
          data: data1,
          success: function (res) {
            if (+res.errorCode === 0 && res.groupConfigPayMode) {
              for(var i = 0; i < res.groupConfigPayMode.length; i++) {
                res.groupConfigPayMode[i].key = i;
              }
              console.log('子类查询')
              this.setState({data: res.groupConfigPayMode, total: res.groupConfigPayMode.length, loading:false},()=>{this.giveDataFar();})
            } 
          }
        })
    }
    render() {
        return (
            <Spin tip="加载中..." spinning={this.state.showLoading}>
                    <div style={{padding: 24,marginBottom: 24 }}>
                        
                            <Row><Col><font color="blue">注支付方式顺序：0或空为不用此支付方式，1为默认支付方式，其他为非默认支付方式，以从序号排序</font></Col> </Row>
                            <Row> 
                                <Col span={15}><Table
                                    style={{height: store.getState().tableHeight.y + 45 + 'px',width:"1100px",display:"inline-block"}}
                                    dataSource={this.state.data}
                                    columns={this.columns}
                                    rowClassName="editable-row"
                                    //rowSelection={rowSelection}
                                    pagination={false}
                                    scroll={{ x: 1000, y: store.getState().tableHeight.y }}
                                    bordered
                                    loading={this.state.loading}
                                    />
                                </Col>       
                            </Row>
                            {/*<Pagination
                                size="small"
                                showQuickJumper
                                showSizeChanger
                                defaultCurrent={1}
                                total={this.state.total}
                                onChange={this.onChange}
                                onShowSizeChange={this.onShowSizeChange}
                            style={{textAlign: "left", marginTop: '13px'}}/>*/}   
                    </div>
            </Spin>
        );
    }
  }
  