import React, {Component} from 'react'
import fCss from "./friendCircle.scss"
import Panel from "../../common/panel/panel";
import SearchPanel from '../../common/searchPanel/searchPanel';
import FriendItem from "./item/item";
import _ from 'lodash';
import SearchDate from '../../common/searchDate/searchDate'
import getSearchTime from "../../../utils/getSearchTime";
import Nothing from "../nothing/nothing";
import {Load} from 'karaui'

export default class FriendCircle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageInfo: {},
      result: [],
      load:true,
    }
  }

  componentDidMount() {
    const {kw, pageNum, searchTime} = this.props;

    if (kw) {
      this.search(kw, pageNum, searchTime.start, searchTime.end)
    }
  }


  componentWillReceiveProps(next) {
    const {kw, clearSearchCount, pageNum} = this.props;
    const {searchTime} = next
    //单纯的搜索
    if (kw && kw !== next.kw && pageNum === next.pageNum) {
      this.setState({
        result: []
      })
      this.search(next.kw, next.pageNum, searchTime.start, searchTime.end)
      clearSearchCount()
    } else if (kw && pageNum !== next.pageNum) {
      //滚动加载
      this.search(next.kw, next.pageNum, searchTime.start, searchTime.end)
    }
  }

  //根据时间查询
  searchByTime = (type, s, e, label) => {
    const {startTime, endTime} = getSearchTime(type, s, e)
    const {kw, pageNum, changeSearchTime} = this.props;
    // 切换时间后 全局pageNum 重置为1，如果是第一页切换时间 这里触发重新搜索，如果不是第一页切换时间componentWillReceiveProps触发搜索
    pageNum === 1 && this.search(kw, 1, startTime, endTime);
    // console.log('set time',type,s,e,startTime,endTime)
    changeSearchTime({type,label,start:startTime,end:endTime})
  }

  search = (kw, pageNum, from = '', to = '') => {
    const {httpAgent, language} = this.props
    this.lastKeyWord = kw
    const pageInfo = {
      pageNo: pageNum,
      pageSize: 20

    }
    const body = {
      keywords: kw,
      from,
      to,
      pageInfo,
      language: language === 'en' ? 'en' : 'cn',
      isHighlight: true,
      platform: 'web'
    }
    httpAgent.post('/search/global/moment/list', body, kw).then(res => {
      if (res && res.pageInfo.result && res.resultCode === '000000' && this.lastKeyWord === res.backParams) {
        this.setState({
          pageInfo: res.pageInfo,
          result: pageNum === 1 ? res.pageInfo.result : _.concat(this.state.result, res.pageInfo.result),
          load:false
        }, () => {
          //渲染滚动条
          this.props.getScroll();
        })
      }
    })
  }


  getItem = (result) => {
    const {history, closeSearchModal} = this.props;
    const li = result.map((v) => {
      return <FriendItem key={v.id} data={v} history={history} closeSearchModal={closeSearchModal}/>
    })
    return <ul className={fCss["friend-content"]}>
      {li}
    </ul>
  }


  render() {
    const {lang, searchTime} = this.props
    const {count, millis, pageCount, pageNo, pageSize, resultCode, resultMessage} = this.state.pageInfo;
    const {result,load} = this.state;
    const selectDate = <SearchDate chooseTime={this.searchByTime} searchTime={searchTime} lang={lang}/>;
    return (
      !load ? count > 0 ?
        <SearchPanel num={count} selectDate={selectDate} time={millis} lang={lang}>
          <Panel title={`${lang.group}${count > 99 ? "99+" : count}(${lang.item})`} isLast lang={lang}>
            {this.getItem(result)}
          </Panel>
        </SearchPanel> : <Nothing lang={lang}/> : <Load/>
    )
  }

}
