import React from 'react';
import { Icon, WingBlank, WhiteSpace, } from 'antd-mobile';
import api from './apiConfig';
import { getWebInfo, getMobileInfo } from './utils';
import style from './index.less';
import PropTypes from 'prop-types';

const queryOptions = async() => {
  const gradeList = await getWebInfo({},api.GETGRADELIST);
  const institutionList = await getWebInfo({},api.GETINSTITUTION);
  return {
    gradeList,
    institutionList,
  }
}


export default class Filter extends React.Component{
  stattic 
  constructor(props){
    super(props);
    this.state ={
      formValues: {
        gradeId: "",
      },
      options: {
        gradeList:[],
        institutionList: [],
        majorList:[],
        clazzList: [],
      },
    }
  }

  componentDidMount() {
    this.fetchOptions();
  }

  fetchOptions = async() => {
    const res = await queryOptions();
    if(!res || !res.gradeList || !res.institutionList) return false;

    const gradeList = res.gradeList.map(i=> ({key: i.remark,value: i.id}));
    const institutionList = res.institutionList.map(i=> ({key: i.fullName,value: i.id}));
    this.setState({
      formValues:{
        gradeId: gradeList[0].value
      },
      options: {
        gradeList,
        institutionList,
        majorList:[],
        clazzList: [],
      }
    })
  }

  fetchClazzList = (params={}) => {
    const { options } = this.state;
    getWebInfo(params,api.GETCLAZZLIST).then(res=> {
      if(res && !res.errCode) {
        const clazzList = res.map(i=> ({key: i.fullName,value: i.id}));
        options.clazzList = clazzList;
        this.setState({
          options
        })
      }
    })
  }

  fetchMajorList = (params={}) => {
    const { options } = this.state;
    getWebInfo(params,api.GETMAJOR).then(res=> {
      if(res && !res.errCode) {
        const majorList = res.map(i=> ({key: i.name,value: i.id}));
        options.majorList = majorList;
        this.setState({
          options
        })
      }
    })
  }

  formChange = (key,value) => {
    const { formValues } = this.state;
    formValues[key] = value;

    if(key === 'institutionId') {
      this.fetchMajorList({institutionId:value});
      delete formValues.majorId
      delete formValues.clazzId
    }

    if(key === 'majorId') {
      this.fetchClazzList({institutionId: formValues.institutionId, majorId: value,gradeId: formValues.gradeId});
      delete formValues.clazzId
    }

    this.setState({
      formValues
    })
  }

  inputChange = (e) => {
    const { formValues } = this.state;
    var value = Number(e.targetValue);

    if(isNaN(value)){
      formValues.name = e.target.value;
      if(formValues.studentNo) delete formVlaues.studentNo;
    }
    else{
      formValues.studentNo = value;
      if(formValues.name) delete formVlaues.name;
    }

    this.setState({
      formValues
    })
  }

  generateItem = (keyName,dataList) => {
    const { formValues } = this.state;
    return (
      <div className='optionsBox'>
      {dataList.map(i=> (
        <div className={formValues[keyName] === i.value ? 'cusLabelFocus' : 'cusLabel'}
             key={i.value}
             onTouchStart={() => this.formChange(keyName,i.value)} >{i.key}</div>))
      }
      </div>
    )
  }

  search = () =>{
    const { formValues } = this.state;
    this.props.getPage(formValues);
    this.props.Toggle() && this.props.Toggle();
  }
  
  reset =() => {
    this.setState({
      formValues: {gradeId: this.state.options.gradeList[0].value}
    })
  }
  render(){
    const { gradeList, institutionList, majorList, clazzList } = this.state.options;
    const { institutionId , majorId } = this.state.formValues;
    const { style } = this.props;
    return (
      <div className='siderBar' style={style ? style : null}>
        <div className='searchBox'>
          <input type='text' 
                 ref={node => this.input = node} 
                 id='searchInput' 
                 placeholder='请输入姓名/学号' 
                 value={this.state.inputValue} 
                 onChange={this.inputChange}></input> 
        
          <div id="searchButton" onClick={this.search}><Icon type='search' size='sm'/></div>
        </div>
        <div className='mainContent'>
        <WhiteSpace size='lg'/>
        <WingBlank size='lg'>
          <p style={{color: '#666666'}}>年纪选择</p>
          {this.generateItem('gradeId',gradeList)}
          <p style={{color: '#666666'}}>学院选择</p>
          {this.generateItem('institutionId',institutionList)}
          { institutionId ? (<><p style={{color: '#666666'}}>专业选择</p>
          {this.generateItem('majorId',majorList)}</>) : null}
          { majorId ? <><p style={{color: '#666666'}}>班级选择</p>
          {this.generateItem('clazzId',clazzList)}</> : null }
        </WingBlank>
        </div>
        <div className='buttonBox'>
            <div onTouchStart={this.reset}>重置</div>
            <div onTouchStart={this.search}>确定</div>
        </div>
      </div>
    )
  }
}

Filter.propTypes = {
  getPage: PropTypes.func.isRequired, // 页面刷新方法
  toggle: PropTypes.func, // 收回侧边方法
  style: PropTypes.object, // 外框样式
}
Filter.defaultProps = {
  getPage: () => {}
}