import * as React from 'react';
import { Props, State } from './type';
import * as Styled from './index.style';
import {get, post} from '../utils/request';
import {rem} from '../style/function.style';
import {showMessage} from '../common/toast/toast';
import { getBountyData4Show } from '../utils/bountyFormat'
import { redirectToLogin } from '../utils/login'
import { LofterTitle } from '../lofterTitle'
import { genSpmLink } from '../utils/statistics'
import throttle  from '../utils/throttle';
const textMap = {
  'has-own':'已领取',
  'empty-stock':'已抢完 '
}
export class LofterBounty extends React.Component<Props, State> {
  static defaultProps = new Props();
  state = new State();
  componentDidMount(){
    console.log(this.props.bounties);

    this.props.bounties && this.props.bounties.forEach(item=>{
      return this.state.btnStatusMap.set(item.id,'')
    })
  }
  private render1Column(bounty, index,styleColor,fontColor) {
    const bountyshow = getBountyData4Show(bounty)
    let statusType = this.state.btnStatusMap.get(bountyshow.id)
    const text = statusType ? textMap[statusType] : `领 取`
    return (
      <Styled.Item1Bounty
        key={index}
        className={index % 3 === 2 && 'num-3th'}
        onClick={() => {}}
        styleColor={styleColor}
        fontColor={fontColor}
      >
        <div className="wrap">
          <div className="lpart">
            <div className="top">
              <div className="facevalue"><em>¥</em>{bountyshow.preferential}</div>
              <h4 className="ttl"><span>津贴</span>{bountyshow.name}</h4>
            </div>
            <div className="validterm">有效期:{bountyshow.startTime}至{bountyshow.endTime}</div>
            <div className="desc">{bountyshow.description}</div>
          </div>
          <div className="rpart">
            <a className={`getbtn ${statusType? 'unable' : ''}`}
              href="javascript:void(0);"
              onClick={this.getBountyThrottle.bind(this, bountyshow.id)}
            >
              {text}
            </a>
            <div className="doorsill">{bountyshow.doorsill}</div>
          </div>
        </div>
      </Styled.Item1Bounty>
    )
  }

  private render2Column(bounty, index,styleColor,fontColor) {
    const bountyshow = getBountyData4Show(bounty)
    let statusType = this.state.btnStatusMap.get(bountyshow.id)
    const text = statusType ? textMap[statusType] : `领取`
    return (
      <Styled.Item2Bounty
        key={index}
        className={index % 2 === 1 && 'num-2th'}
        styleColor={styleColor}
        fontColor={fontColor}
      >
        <div className="wrap">
          <div className="part">
            <div className="facevalue"><em>¥</em>{bountyshow.preferential}</div>
            <div className="doorsill">{bountyshow.doorsill}</div>
          </div>
          <div className="title">{bountyshow.name}</div>
          <div className="bottom">
            <div
              className={`getbtn ${statusType? 'unable' : ''}`}
              onClick={this.getBountyThrottle.bind(this, bountyshow.id)}
            >
              {text}
            </div>
          </div>
        </div>
      </Styled.Item2Bounty>
    )
  }

  private render3Column(bounty, index,styleColor,fontColor) {
    const bountyshow = getBountyData4Show(bounty)
    let statusType = this.state.btnStatusMap.get(bountyshow.id)
    const text = statusType ? textMap[statusType] : `领取`
    return (
      <Styled.Item3Bounty
        key={index}
        className={index % 3 === 2 && 'num-3th'}
        styleColor={styleColor}
        fontColor={fontColor}
      >
        <div className="wrap">
          <div className="facevalue"><em>¥</em>{bountyshow.preferential}</div>
          <div className="doorsill">{bountyshow.doorsill}</div>
          <div className="title">{bountyshow.name}</div>
          <div className="bottom">
            <div className={`getbtn ${statusType? 'unable' : ''}`} onClick={this.getBountyThrottle.bind(this, bountyshow.id)}>{text}</div>
          </div>
        </div>
      </Styled.Item3Bounty>
    )
  }
  private setBtnStatus(bountyId,status){
    this.setState((preState)=>{
      preState.btnStatusMap.set(bountyId,status)
      return {
        btnStatusMap:preState.btnStatusMap
      }
    })
  }
  private getBounty(bountyId, e){
    if(!!this.state.btnStatusMap.get(bountyId)){
      return
    }
    e.stopPropagation();
    console.log(bountyId);
    const params = {
      bountyId: bountyId
    }
    get('//www.lofter.com/market/bounty/fetch.json', params).then(resp => {
      if (resp.code === 401) {
        redirectToLogin()
      } else if (resp.code === 200) {
        this.setBtnStatus(bountyId,'has-own')

        showMessage({text:'领取成功～o(*≧▽≦)o'});
      } else {
        if(resp.code === -506){ // 领完
          this.setBtnStatus(bountyId,'empty-stock')
        }
        showMessage({text:`${resp.msg}～(°ー°〃)`})
      }
    }).catch(error => {
      showMessage({text:'出了点小错，请重试～(°ー°〃) '})
    })
  }

  private getBountyThrottle = throttle(this.getBounty,1000)

  public render() {
    // console.log('render', this.props, this.state);
    const {style,title,styleColor,fontColor,bounties=[], type, isEdit, marginTop} = this.props;

    return (
      <Styled.Container style={style} className={marginTop > 0 && 'f-before'}>
        <Styled.Inner style={{marginTop: `${marginTop}rem`}}>
        {
          title &&
          <LofterTitle title={title}/>
        }
        <Styled.ColumnBox
          onTouchStart={() => {}}
          onClick={() => {}}
        >
          {bounties.map((bounty, index) => (
            this[`render${type}Column`](bounty, index,styleColor,fontColor)
          ))}
        </Styled.ColumnBox>
        {
          (!bounties || bounties && bounties.length == 0 )&& isEdit && <div>lofter津贴模块</div>
        }
        </Styled.Inner>
      </Styled.Container>
    )
  }
}