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 DangerControlTable 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) => {
  
  }


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

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


  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: "" });
    
   

  }
}




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

  }
  onChange = (key, value) => {
    
    if(key==='name'){
        this.setState({ name:value });
    }else 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 });
    }
   
  }
 

  render() {
   
    const { dataList,totals ,name,grade,endTime,startTime} = this.state;
    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"
              value={moment(startTime)}
              className="input_item_select"
              onChange={(value2) => { this.onChange('startTime', value2); }}
              allowClear={false}  
            />           
             </StdForm>
            </div>
            <div className="inputxq">
            <StdForm label="至">
            <DatePicker
             value={moment(endTime)}
              format="YYYY-MM-DD"
              className="input_item_select"
              onChange={(value3) => { this.onChange('endTime', value3); }}
              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 DangerControlTable;
