import React, { Component } from 'react';
import './team.scss'
import { getParam, http, SendMessageToApp, browser } from "@/utils"
import { Toast } from 'antd-mobile';
import {withRouter} from 'react-router-dom';

class TeamInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      is_my_team: true, // 是否有自己的队伍
      prize_info: {
        name: '',
        stage_no: 0,
      },
      info: {
        removable: 0,
        total: 0
      },
      member: [],
      removable_data: [],
    }
  }

  componentDidMount() {
    this.getTeamInfo();
  }

  getTeamInfo = () => {
    http.get(`${API.home}/sys/treasure/teamInfo`).then(res => {
      const { code, data, msg } = res.data;
      if (code === 200) {
        const { prize_info, is_my_team, info, member, removable_data } = data;
        this.setState({
          prize_info,
          is_my_team,
          info,
          member: this.format(member),
          removable_data
        })
      } else {
        Toast.info(msg);
      }
    })
  }

  // 跳转到我的宝箱页
  toYearTreasure = (close) => {
    let search = '';
    if(close) {
      const {removable_data} = this.state;
      let current = removable_data[0];
      search = `?team_num=${current.team_num}&owner_uid=${current.captain_uid}`;
    }
    this.props.history.push(`/year/yearTreasure${search}`);
  }

  format = (list) => {
    let len = list.length;
    for(let i=0;i<5-len;i++) {
      list.push({
        head_img: '',
        user_name: '',
        nobody: true,
      })
    }
    return list;
  }

  render() {
    const { prize_info: { name, stage_no }, is_my_team, info: {removable, total}, member } = this.state;
    // 显示文案控制
    let Text = '';
    if(total === 0) {
      Text = `我的宝箱`;
    } else if (removable === 0) {
      Text = `共${total}个宝箱`;
    } else {
      Text = `共${total}个宝箱/${removable}个未拆`;
    }

    return (
      <div className='team_info__container'>
        <div className='team__member'>
          <ul className='member__list'>
            {
              member && member.length > 0 && (
                member.map((item, index) => {
                  return <li key={index} className='member__item'>
                    <div className='avatar__container'>
                      {
                        item.nobody ? (
                          <img className='head__image' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" alt=""/>
                        ) : (
                          <img className='head__image' src={item.head_img} alt=""/>
                        )
                      }
                      {
                        index === 0 ? (
                          <img className='caption__flag' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/caption.png" alt=""/>
                        ) : (null)
                      }
                      <div className='shadow'></div>
                    </div>
                    <div className={`member__join ${item.nobody ? '' : 'join'}`}></div>
                  </li>
                })
              )
            }
          </ul>

          <div className='box__number'>
            <img onClick={() => this.toYearTreasure(true)} src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png" alt="" />
            <p onClick={() => this.toYearTreasure(false)} className='box__text'>
              {Text}
            </p>
            <img className='position__arrow' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/arrow_jinzhan.png" alt=""/>
            {
              removable > 0 && (
                <div className='position__number'>{removable}</div>
              )
            }
          </div>
        </div>
        <div className='invite__btn'>
          {
            is_my_team ? ('继续组队') : ('组队开宝箱')
          }
        </div>
        {
          stage_no && name && <p className='stage_prize'>{`第${stage_no}次必中${name}`}</p>
        }
      </div>
    )
  }
}
export default withRouter(TeamInfo)
