import React, { Component } from 'react';
import { HeaderBar, Popup } from '@common';
import AddressPopup from '@common/addressPopup/index';
import BindPhone from '@common/bindPhone/index';
import ConfirmPhone from '@common/confirmPhone/index';
import TreasureTeam from './team';
import { http } from '@/utils';
import './index.scss';

class MyTreasure extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isEnd: false,
      isEmpty: false,
      seconds: 3,
      teams: [],
      bindInfo: {
        email: 'a',
        wechat_nickname: 'b',
        qq_nickname: 'c',
        sina_nickname: 'd',
      }, // 绑定手机号冲突信息
    };
  }

  componentDidMount() {
    const { isEnd, bindInfo } = this.state;
    if(isEnd) {
      this.startCountDown();
    }
    this.fetchMyTreasure();
    this.fetchActivityStatus();
    // 绑定地址--宝箱
    Popup({
      title: '绑定手机号',
      content: <BindPhone desc={<>
        <p className="phone-treasure__desc">恭喜您获得 奖品名称（现金）</p>
        <p className="phone-treasure__notice">为了您的账户安全，请于2019年12月31日前绑定手机号，过期将失效</p>
      </>} />
    });
  }

  handleToBindPhone = () => {

  }

  handleToConfirmPhone = () => {
    this.confrimInstance = Popup({
      title: '绑定确认',
      content: <ConfirmPhone bindInfo={bindInfo} />
    });
  }

  handleToBindAddress = () => {
    this.addressInstance = Popup({
      title: '收货信息',
      skip: 'year',
      content: <AddressPopup 
        skip="year" 
        tip={
          <>
          <p className="address-treasure__desc">恭喜您获得 奖品名称奖品名称奖品名称</p>
          <p className="address-treasure__notice">请及时填写/确认收货信息，活动结束后统一邮寄</p>
        </>
        }
        handleToHide={() => this.addressInstance.close()}
      />
    });
  }

  fetchMyTreasure = () => {
    http.get(`${API.home}/sys/treasure/my`).then(res => {
      const { code, data } = res.data;
      if(code === 200) {
        this.rule = data.rule;
        if(Array.isArray(data.team) && data.team.length > 0) {
          const teams = data.team.map(item => {
            return Object.assign({}, item, {
              members: item.member
            });
          });
          this.setState({
            isEmpty: false,
            teams,
          });
        }else{
          this.setState({
            isEmpty: true,
          });
        }
      }
    });
  }

  fetchActivityStatus = () => {
    http.get(`${API.home}/activity/stage`).then(res => {
      const { code, data } = res.data;
      if(code === 200) {

        // treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
        this.setState({
          isEnd: data.treasure_stage === 0
        });
      }
    });
  }

  startCountDown = () => {
    const { history } = this.props;
    let { seconds } = this.state;
    if(this.timer) {
      clearInterval(this.timer);
    }
    this.setState({
      seconds: seconds--
    });
    this.timer = setInterval(() => {
      this.setState({
        seconds: seconds--
      });
      if(seconds === 0) {
        this.setState({
          seconds: 0
        });
        clearInterval(this.timer);
        history.push('/year/yearIndex');
      }
    }, 1000);
  }

  render() {
    const { isEnd, isEmpty, seconds, teams } = this.state;
    return (
      <div data-skip="treasure">
        <HeaderBar title="我的宝箱" arrow={true} />
        {
          isEnd &&
          <p className="activity-end__desc">
            活动已结束<br/>
            {seconds}s后将自动返回首页
          </p>
        }
        {
          (!isEnd && isEmpty) &&
          <>
            <i className="team-empty__icon"></i>
            <p className="team-empty__desc">您当前还没有宝箱哦~</p>
            <p className="team-empty__desc">快去组队邀请好友一起开宝箱吧！</p>
            <button className="team-empty__button">组队开宝箱</button>
          </>
        }
        {
          (!isEnd && !isEmpty) && 
          <div className="treasure-content">
            {
              teams.map((item, index) => (
                <TreasureTeam 
                  data={item} 
                  key={index} 
                  handleToBindPhone={this.handleToBindPhone}
                  handleToBindAddress={this.handleToBindAddress}
                />
              ))
            }
          </div>
        }
      </div>
    )
  }
}

export default MyTreasure;