import React, { Component } from 'react';
import { connect } from 'react-redux';
import DocumentTitle from 'react-document-title';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';
import PlayMusic from '../components/playMusic/index';
import { onPlay, getPlayFlag } from '../common/common';

import * as Service from '../services/index';

let flag = false;
@connect(() => ({}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      playFlag: getPlayFlag(),

      list: [],
      showList: [],
      rankingList: [],
      loading: false,

      value: '',
    };
  }
  componentWillMount = () => {};
  componentDidMount = () => {
    this.getSchoolList();
  };
  componentWillUnmount = () => {};
  //请求学校列表
  getSchoolList = async () => {
    this.setState({
      loading: true,
    });
    const { rc, data, msg } = await Service.getList();
    if (!rc) {
      const arr = data.list ? data.list : [];

      this.setState({
        loading: false,
        list: data.list,
        showList: data.list,
        rankingList: arr,
      });

      // window.sessionStorage.setItem('schoolArr', JSON.stringify(ARR));
    }
  };

  //模糊查询
  search = (list, keyWord) => {
    //字符串方法indexOf
    var len = list.length;
    var arr = [];
    for (var i = 0; i < len; i++) {
      //如果字符串中不包含目标字符会返回-1
      if (list[i].schoolName.indexOf(keyWord) >= 0) {
        arr.push(list[i]);
      }
    }
    return arr;
  };

  //选择学校
  onClickSchool = item => {
    window.sessionStorage.setItem('selectSchool', JSON.stringify(item));
    router.push('detail');
  };

  //输入学校
  onChange = e => {
    let val = e.target.value;
    const { list } = this.state;
    if (!flag) {
      //do something...
      if (val) {
        const showList = this.search(list, val);
        this.setState({
          showList,
        });
      } else {
        this.setState({
          showList: list,
        });
      }
    }
  };

  compositionStart = () => {
    flag = true;
  };

  compositionEnd = e => {
    flag = false;

    this.onChange(e);
  };

  //render学校列表
  renderList = () => {
    const { loading, showList, rankingList } = this.state;
    // console.log('-=====', showList, rankingList);
    if (loading) {
      // return (
      //   <div className={styles.list_c}>
      //     <div className={styles.noData}>加载中···</div>
      //   </div>
      // );
      return <div></div>;
    }

    if (showList.length <= 0) {
      return (
        <div className={styles.list_c}>
          <div className={styles.noData}>暂无数据</div>
        </div>
      );
    }

    return (
      <div className={styles.list_c}>
        {showList.map(item => {
          return (
            <div key={item.schoolCode} className={styles.tr}>
              {item.schoolName}
              <div
                className={styles.btn}
                onClick={() => {
                  this.onClickSchool(item);
                }}
              >
                选择
              </div>
            </div>
          );
        })}
      </div>
    );
  };

  //render前三名学校
  renderRanking = () => {
    const { loading, showList, rankingList } = this.state;
    //console.log('-=====', showList, rankingList);
    if (rankingList.length <= 0) {
      return <div className={styles.top}></div>;
    }

    return (
      <div className={styles.top}>
        <div
          className={styles.td}
          onClick={() => {
            this.onClickSchool(rankingList[1]);
          }}
        >
          <div>{rankingList[1] && rankingList[1].schoolName}</div>
          <span>{rankingList[1] && rankingList[1].catName}</span>
        </div>
        <div
          className={styles.td}
          onClick={() => {
            this.onClickSchool(rankingList[0]);
          }}
        >
          <div>{rankingList[0] && rankingList[0].schoolName}</div>
          <span>{rankingList[0].catName && rankingList[0].catName}</span>
        </div>
        <div
          className={styles.td}
          onClick={() => {
            this.onClickSchool(rankingList[2]);
          }}
        >
          <div>{rankingList[2] && rankingList[2].schoolName}</div>
          <span>{rankingList[2] && rankingList[2].catName}</span>
        </div>
      </div>
    );
  };

  render() {
    const { playFlag, value } = this.state;
    return (
      <DocumentTitle title="校宠开饭啦">
        <div className={styles.body}>
          <div>{value}</div>
          <PlayMusic
            play={playFlag}
            onPlay={() => {
              onPlay(playFlag, flag => {
                this.setState({
                  playFlag: flag,
                });
              });
            }}
          ></PlayMusic>

          {this.renderRanking()}
          <div className={styles.list}>
            <input
              type="text"
              placeholder="输入大学"
              onChange={this.onChange}
              onCompositionStart={this.compositionStart.bind(this)}
              // onCompositionUpdate={this.handleComposition.bind(this)}
              onCompositionEnd={this.compositionEnd.bind(this)}
            />
            {this.renderList()}
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;