import * as React from 'react';
import { Props, State } from './type';
import {getLoginInstance} from 'snail-login';
import {getLogInstance} from 'snail-log';
import {jsonp} from '../utils/request';
import {showMessage} from '../common/toast/toast';
import * as Styled from './style';
import {handlePathQuery} from '../utils/snailTargetHandler';
const isOnline = location.host === 'du.163.com'

export class SnailRecommend extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();
  page = 1;
  isLogined = false;

  componentDidMount(){
    const {isEdit} = this.props;
    if(isEdit || !isOnline){
      this.getData();
    }else{
      const login = getLoginInstance();
      login.isLogined().then(userInfo => {
        if(userInfo){
          this.isLogined = true;
        }
        this.getData();
      })
    }
  }
  async getData(sendLog: boolean = false){
    if(sendLog && !this.props.isEdit){
      const log = getLogInstance();
      log.sendLog('acttemplate1-8');
    }
    if(this.isLogined){
      //登录用户拉猜你喜欢数据
      try {
        const response = await jsonp('https://du.163.com/api/recommend/rsBook.jsonp', {
          limit: 6
        })
        if(response.code === 0){
          this.setState({
            books: response.books
          })
        }else{
          showMessage(response.msg);
        }
      } catch (error) {
        console.log('Get rsBook failed: ', error);
      }
    }else{
      //非登录用户拉排行榜数据
      try {
        const response = await jsonp('https://du.163.com/api/bookstore/module/more.jsonp', {
          moduleId: 1001,
          entryId: 409,
          page: this.page,
          pageSize: 6,
          simple: true
        })
        if(response.code === 0){
          this.page++;
          this.setState({
            books: response.moreEntries.map(item => item.book)
          })
        }else{
          showMessage(response.msg);
        }
      } catch (error) {
        console.log('Get rank failed: ', error);
      }
    }
  }
  bookClickHandler(book, index){
    // console.log('book click', book);
    const {pos, isEdit} = this.props;
    let data = {
      path: 'bookdetail',
      query: {
        bookId: book.strBookId
      },
      logPointId: 'acttemplate1-9',
      logQuery : {
        category: 'acttemplate',
        pos,
        bookId: book.strBookId,
        pos2: undefined,
      },
      isEdit
    }
    if(typeof index === 'number'){
      data.logQuery.pos2 = index; 
    }
    handlePathQuery(data);
  }
  render() {
    const {style, backgroundColor, titleColor, descColor, divider} = this.props;
    const {books} = this.state;
    return (
      <Styled.Container style={{backgroundColor, ...style}}>
        <Styled.Title style={{ color: titleColor }}>
          猜你喜欢
          <div className="link" style={{ color: descColor }} onTouchStart={() => {}} onClick={this.getData.bind(this, true)}>
            换一换
          </div>
        </Styled.Title>
        {
          books &&
          <Styled.ListBook>
            {books.map((book, index) => (
              <Styled.ItemBook 
                key={book.strBookId} 
                className={index % 3 === 2 && 'num-3th'}
                onTouchStart={() => {}} 
                onClick={this.bookClickHandler.bind(this, book, index)}
              >
                <img src={book.imageUrl} alt="书籍封面" className="cover"/>
                <div className="title" style={{ color: titleColor }}>{book.title}</div>
              </Styled.ItemBook>
            ))}
          </Styled.ListBook>
        }
        {books && divider && <Styled.Divider />}
      </Styled.Container>
    )
  }
}