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

export default 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: [],
    }
  }

  componentDidMount() {
    this.getTeamInfo();
  }

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

  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'>
                    <img className='head__image' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/default-member-avatar.png" alt=""/>
                  </li>
                })
              )
            }
          </ul>

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