import React, { Component } from 'react';
import { http } from '@/utils';
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import CourseList from './courseList/index';
import LuckDraw from './luckDraw/index';
import ReserveCourse from './ReserveCourse/index';
import ListHeader from './listHeader/index';
import './index.scss'
import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile"


class BlessingPreheat extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isRule: false,
      isCourse: false,
      inviteVisible: false,
      joinLotteryVisible: false,
      timelineShareVisible: false,
      isFormal: false, // 1正式 0 预热
    }
  }

  componentDidMount() {
    this.fetchUserBlessing();
  }

  fetchUserBlessing() {
    http.get(`${API.home}/sys/user/blessing`).then(res => {
      const { code, data } = res.data;
      if(code === 200) {
        this.setState({
          isFormal: data.is_activity
        });
      }
    });
  }

  handleToHide = (key) => {
    let obj = {}
    obj[key] = false
    this.setState({
      ...obj
    })
  }

  onCopy = () => {
    Toast.info('复制成功', 2,null,false)
  }

  render() {
    const {isRule, isCourse, inviteVisible} = this.state
    return (
      <div id={'blessing-preheat'}>
        {/* 幸运大抽奖--预热 */}
        <ListHeader text="幸运大抽奖" styles={{margin: '0 0 15px'}} />
        <LuckDraw></LuckDraw>

        {/*定金--只在预热期间显示*/}
        <ListHeader text="预付1元定金，最高可省100元" styles={{margin: '0 0 15px'}} />
        <ReserveCourse/>


        {/* 精品课程特惠专区 */}
        <ListHeader text="精品课程特惠专区" styles={{margin: '0 0 15px'}} />
        <CourseList></CourseList>
        {
          isRule &&
          <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
        }
        {
          isCourse &&
          <CoursePopup handleToHide={() => this.handleToHide('isCourse')}/>
        }
        <Popup visible={inviteVisible}
               title={'扫码邀请好友注册+10点福气值'}
               className={'invite-popup'}
        >
          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
          <CopyToClipboard
            text={'kkk'}
            onCopy={this.onCopy}
          >
            <button>一键复制网址</button>
          </CopyToClipboard>
        </Popup>
        <Popup visible={this.state.joinLotteryVisible}
               title={'你已成功参与本时段抽奖'}
               className={'join-lottery'}
        >
          <div className="text">
            <div className="code">抽奖码为：99999999</div>
            <div className="time">本时段的中奖结果将在xx:xx公布</div>
            <div className="hint">你可关注‘七月在线’服务号第一时间获得中奖信息。</div>
            <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" className='qr-code' alt=""/>
          </div>

          <button onClick={() => {this.setState({joinLottery: false})}}>知道了</button>
        </Popup>
        <Popup title={'微信扫码分享到微信朋友圈'}
               visible={this.state.timelineShareVisible}
               className={'timeline-share'}
        >
          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
        </Popup>
      </div>
    )
  }
}

export default BlessingPreheat
