


import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Select, Radio,StdForm ,Search,Icon,AmosAlert} from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd';
import moment from 'moment';
import InputTable from './InputTable';
import { SingleTable } from 'amos-pro';
const FormItem = Form.Item;
const Option = Select.Option;

const tableList1 = [
    { id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } 
];

const tableList2 = [
    { id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
    { id: '1', name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
    
];

const data = [

    
  
    { id: "1", name: '失控' },
    { id: "2", name: '受控' }
  
  ];
    const checkInputColumns = (_this) => {
        return [
          {
            title: '换流站',
            dataIndex: 'name',
            key: 'name',
            width: '10%',
            query: true,          
           
          },
          {
            title: '一级',
            dataIndex: 'sex',
            key: 'sex',
            width: '9%',
            query: true,
            required: true, //是否是默认显示的          
            render: (text,record) => {
                return  <p className="yi">{text}</p> ;
              
            }
           

           
          },
          {
            title: '二级',
            dataIndex: 'age',
            key: 'age',
            width: '10%',
            query: true,
            required: true, //是否是默认显示的
            render: (text,record) => {
                return  <p className="er">{text}</p> ;
              
            }
            
          },
          {
            title: '三级',
            dataIndex: 'address',
            key: 'address',
            width: '10%',
            query: true,
            required: true, //是否是默认显示的
            render: (text,record) => {
                return  <p className="san">{text}</p> ;
              
            }
          },
          {
            title: '四级',
            dataIndex: 'id',
            key: 'id',
            query: true,
            required: true, //是否是默认显示的        
            width: '10%',
            render: (text,record) => {
                return  <p className="si">{text}</p> ;
              
            }
          },
          {
            title: '小计',
            dataIndex: 'age1',
            key: 'age1',
            query: true,
         
            st: 'text', //搜索的类型
            width: '10%'
          }
      
        ];
      };
      
/**
 * 风险管控详情
 */

class RiskControlTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
        dataList: [], //表格数据集合
        size: 'small', //表格大小
        current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
        pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量
        totals: 0, //所有数据总和
        reload() {},
        maxHeight: 650,
        name:"",
        startTime: moment().format('YYYY-MM-DD'),
        endTime: moment().add(1, "years").format('YYYY-MM-DD'),
        grade:""
      };
  }

  componentWillMount = () => {
    
    this.setState({ dataList:tableList1});
    this.setState({ totals:13});
  };

  componentDidMount = () => {
  
  };

  componentWillReceiveProps = (nextProps) => {
      debugger
    if (nextProps.refresh){
        this.setState({ name:"" });
   
        this.setState({ startTime: moment().format('YYYY-MM-DD')});
   
        this.setState({ endTime:moment().add(1, "years").format('YYYY-MM-DD') });
   
        this.setState({ grade: "" });
     

    }
  }


 /**
   * 获取表格刷新方法
   */
  reload = r => {
    this.setState(
      {
        reload: () => {
          r();
        }
      },
      r()
    );
  };
  
  //搜索
  onIconClick1 = () => {

    this.setState({ dataList:tableList2});
    this.setState({ totals:5});
  }







  fillCheckInputTable = param => {
   
  };


  onChange1 = (e, value) => {
    debugger
    this.setState({ name:value });

  }
  onChange = (key, value) => {
      debugger
    if(key==='startTime'){
        this.setState({ startTime: moment(value).format('YYYY-MM-DD')});
    }else if(key==='endTime'){
        this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
    }else{
        this.setState({ grade: value });
    }
   
  }
 

//   renderEndTime(type) {
//       debugger
//     const { endTime,startTime} = this.state;


//     if(type==="1"&&startTime===""){

//      return  <DatePicker
//      format="YYYY-MM-DD"
//      className="input_item_select"             
//      onChange={ e => this.onChange('startTime', e) }
//    /> ;


//     }else if(type==="1"&&startTime!=""){

//         return  <DatePicker
//         format="YYYY-MM-DD"
//         value={moment(startTime)}
//         className="input_item_select"             
//         onChange={ e => this.onChange('startTime', e) }
//       /> ;

//     }

//     if(type==="2"&&endTime===""){

//         return  <DatePicker
//         format="YYYY-MM-DD"
//         className="input_item_select"             
//         onChange={ e => this.onChange('endTime', e) }
//       /> ;
   
   
//        }else if(type==="2"&&endTime!=""){
   
//            return  ;
   
//        }

//   }











  render() {
   
    const { dataList,totals ,name,grade,endTime,startTime} = this.state;
    debugger
    return (
      <div className="souh" >
          <div className="sou">
            <div className="inputxq1">
            <StdForm >
            <Search   value={name} className="input_item_select" icon={<Icon icon='search'  onClick={ this.onIconClick1} />}   onChange={ this.onChange1}  />
           
            </StdForm>
            </div>
           <div className="inputxq">
           <StdForm >
           <Select
                data={data}
                value={grade}
                renderOption={item => <Option value={item.id}>{item.name}</Option>}
                onChange={(value4) => { this.onChange('grade', value4); }}
                />
          </StdForm>
           </div>




            <div className="inputxq"> 
            <StdForm label="日期">
               <DatePicker
              format="YYYY-MM-DD"
              className="input_item_select"            
              value={moment(startTime)}
              onChange={ e => this.onChange('startTime', e) }            
              allowClear={false}        
            />  
            
         
            
                    
             </StdForm>
            </div>
            <div className="inputxq">
            <StdForm label="至">       
             <DatePicker
              value={moment(endTime)}
              format="YYYY-MM-DD"
              className="input_item_select"
              onChange={  e => this.onChange('endTime', e)}    
              allowClear={false}        
            />   


             </StdForm>
            </div>
           
         
        
          </div>
          <div className="inputxqtable">

                  <InputTable
                  columns={checkInputColumns(this)}
                  callBack={this.reload}
                  dataSource={dataList}
                  totals={totals}
                  getTableDataAction={this.fillCheckInputTable}
                  
                />
           </div>
      </div>
    );
  }
}



export default RiskControlTable;

















