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: <ConfirmPhone 
        bindInfo={bindInfo} 
        tip={<p className="confirm-treasure__desc">该手机号已绑定以下账号，继续绑定将解除以下绑定状态</p>} 
      />
    });
  }

  handleToBindPhone = () => {

  }

  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,
          });
        }
      }
    });
  }

  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}
                />
              ))
            }
            {/* <TreasureTeam data={{
              is_captain: 0,
              status: 1,
              is_open: 1,
              members:[
                {
                  uid:1,
                  head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/moon_my.jpg",
                  is_open:1,
                  is_captain:1,
                  prize_name:"dfefawefwe"
                },
                {
                  uid:22,
                  head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/app/156274320700059253.png",
                  is_open:1,
                  is_captain:0,
                  prize_name:"带份饭问"
                }
              ]
            }}></TreasureTeam> */}
          </div>
        }
      </div>
    )
  }
}

export default MyTreasure;