import React, { Component } from 'react';
import './index.scss';
import { Toast } from 'antd-mobile';
import { http } from '@/utils';
import CommonContainer from './../../common/commonContainer/index'

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }

  componentDidMount() {
    http.get(`${API.home}/sys/get_live_info`).then(res => {
      const { code, data, msg } = res.data;
      if (code === 200) {
        this.setState({
          list: data
        })
      } else {
        Toast.info(msg);
      }
    });
  }
  // 预约直播
  subscribe = (id) => {
    // TODO 检查是否已登录
    // this.checkLogin();
    http.get(`${API['base-api']}/sys/createLiveQrcode/${id}`).then(res => {
      let { errno, data, msg } = res.data;
      if (errno === 200) {
        // this.livingUrl = data.url;
        // this.isSubscribe = true;
        // TODO 显示二维码地址 并且传递给二维码的图片/地址
      } else {
        Toast.info(msg);
      }
    });
  }
  // 已预约 给提示
  tip = () => {
    Toast.info('你已预约该直播');
  }
  // 去直播间
  toLivingRoom = (id) => {
    // TODO 检查是否已登录
    // this.checkLogin();
    window.location.href = `${window.location.protocol}//www.julyedu.com/live/m_room/${id}`
  }
  // 查看回放
  checkVideo = (url) => {
    // TODO 检查是否已登录
    // this.checkLogin();
    // TODO 这里需要课程ID
    const vCourseId = url.split('/')[0];
    history.push(`/play/video?id=${vCourseId}`)
  }

  render() {
    const { list } = this.state;
    return (
      <div className='live__container'>
        <CommonContainer title='大咖直播'>
          <ul className='live__list'>
            {
              list.length && (
                list.map((item, index) => {
                  return <li key={index} className='live_room_item'>
                    <img className='user__avatar' src={item.avatar} alt="" />
                    <div className='live__info'>
                      <div className="theme">
                        <span>主题：</span>
                        <p>{item.title}</p>
                      </div>
                      <div className="info__item">
                        <span>时间：</span>
                        <p>{item.date}</p>
                      </div>
                      <div className="info__item">
                        <span>讲师：</span>
                        <p>{item.teacher}</p>
                      </div>
                      {
                        item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 0 && (
                          <span onClick={this.subscribe(item.live_id)} className="order__btn">立即预约</span>
                        )
                      }
                      {
                        item.on_live == 0 && item.is_end == 0 && item.is_subscribe == 1 && (
                          <span onClick={this.tip} className="order__btn subscribed">已预约</span>
                        )
                      }
                      {
                        item.on_live == 1 && item.is_end == 0 && (
                          <span onClick={this.toLivingRoom(item.room_url)} className="order__btn living">正在直播</span>
                        )
                      }
                      {
                        item.is_end == 1 && item.transcribe_url != '' && (
                          <span onClick={this.checkVideo(item.transcribe_url)} className="order__btn check__video">查看回放</span>
                        )
                      }

                    </div>
                  </li>
                })
              )
            }
          </ul>
        </CommonContainer>
      </div>
    )
  }
}
