import React, { Component } from 'react';
import QRCode from 'qrcode';
import { http, SendMessageToApp } from '@/utils';
import { Link } from 'react-router-dom';
import { throttle, findIndex } from 'lodash';
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import RecordPopup from './recordPopup/index'
import CourseList from './courseList/index';
import SharePopup from './sharePopup/index';
import LuckDraw from './luckDraw/index';
import CollectBlessing from './collectBlessing/index';
import ReserveCourse from './ReserveCourse/index';
import ListHeader from './listHeader/index';
import LevelTest from './levelTest/index';
import RankList from './rankList/index';
import './index.scss'
import { Popup } from '@/common'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import { Toast } from "antd-mobile"
import Live from './live'
import Banner from './banner'
import { getParam } from '../../utils';


class BlessingPreheat extends Component {
  
  constructor(props) {
    super(props)
    this.navTop = 183;
    this.prevY = 0;
    this.state = {
      isRule: false,
      isCourse: false,
      inviteUrl: '',
      inviteVisible: false,
      joinLotteryVisible: false,
      timelineShareVisible: false,
      showRecordList: false,
      isFormal: false, // 1正式 0 预热
      isServer: false,
      serverUrl: '',
      shareMark: false,
      userInfo: {},
      isSign: false,
      navs: [
        {
          text: '积福气',
          id: 'lucky-value'
        },
        {
          text: '幸运大抽奖',
          id: 'lucky-draw'
        },
        {
          text: '预付定金',
          id: 'deposit'
        },
        {
          text: '精品特惠',
          id: 'best-courses'
        },
        {
          text: 'AI测试',
          id: 'ai-test'
        },
        {
          text: '大咖直播',
          id: 'live'
        },
      ],
      index: 0,
    }
  }

  componentDidMount() {
    this.fetchUserBlessing();
    window.addEventListener('scroll', throttle(this.calcNavActive, 100));
  }

  initNav = (isFormal) => {
    const { navs } = this.state;
    if(isFormal) {
      this.setState({
        navs: navs.filter(item => item.id !== 'deposit')
      });
    }
  }

  fetchMoudleId = (str) => {
    const { navs } = this.state;
    return findIndex(navs, item => item.id === str);
  }

  fetchUserBlessing() {
    // 判断登录未登录 根据this.state.userInfo.isLogin 
    if(getParam('version')) {
      // app 平台
    }else{
      // H5
    }
    const { userInfo } = this.state;
    http.get(`${API.home}/sys/user/blessing`).then(res => {
      const { code, data } = res.data;
      if(code === 200) {
        this.setState({
          isSign: !!data.today_signed,
          isFormal: data.is_activity,
          userInfo: Object.assign({}, userInfo, {
            isLogin: !!data.is_login,
            blessingVal: data.user_blessing_value,
          })
        });
        if(data.is_login === 1) {
          this.handleToSign();
        }
        this.initNav(data.is_activity);
      }
    });
  }

  handleToSign = () => {
    http.post(`${API.home}/sys/add/blessing`, {
      type: 1 // 1：签到；3：分享；4：浏览课程；
    }).then(res => {
      const {code } = res.data;
      if (code === 200) {
        this.setState({
          isSign: true,
        });
        Toast.info('+5点福气值~', 2, null, false);
      }
    });
  }

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

  handleToShow = (key, isLogin = false) => {
    const { history } = this.props;
    if(isLogin) {
      this.toLogin();
    }else {
      let obj = {};
      obj[key] = true;
      this.setState({
        ...obj
      });
    }
  }

  // 邀请好友注册
  handleToShowInvite = () => {
    const { userInfo } = this.state;
    if(userInfo.isLogin) {
      if(!getParam('version')) {
        QRCode.toDataURL('http://m.julyedu.com/invite', {
          width: 120,
          height: 120,
          margin: 1
        })
        .then(url => {
          this.setState({
            inviteUrl: url,
            inviteVisible: true
          });
        })
        .catch(err => {
          console.error(err)
        });
      }else{
        let data = {
          title: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 标题
          desc: '11.11-11.13 AI充电节，预热来袭！重磅好课1折秒，超10万元奖品来就送-七月在线', // 描述
          imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/shareimg.png', // 图片地址
          link: 'https://m.julyedu.com/blessingPreheat' // url
        }
        SendMessageToApp("toShare", data)
      }
    } else {
      this.toLogin();
    }
  }

  handleToShowNotice = () => {
    http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
      const {errno, data} = res.data;
      if (errno === 200) {
        QRCode.toDataURL(data.url, {
          width: 120,
          height: 120,
          margin: 1
        })
        .then(url => {
          this.setState({
            isServer: true,
            serverUrl: url,
          });
        })
        .catch(err => {
          console.error(err)
        });
      }else if(errno === 4030 || errno === 4040) {
        this.toLogin();
      }
    });
  }

  toLogin = () => {
    const { history } = this.props;
    if(!getParam('version')) {
      history.push('/passport');
    }else{
      SendMessageToApp("toLogin");
    }
  }

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

  toSection = (i, e) => {
    const { navs } = this.state;
    e.preventDefault();
    let top = document.querySelector(`#${navs[i].id}`).offsetTop
    this.setState({
      index: i
    });
    window.scrollTo({
      top: top - 60,
      left: 0
    });
  }

  calcNavActive = () => {
    const {navs, index} = this.state
    const y = window.scrollY
    let swipeDirection = y > this.prevY ? 'up' : 'down'
    let _index
    if (swipeDirection === 'up') {
      _index = (index + 1) >= navs.length ? index : index + 1

    } else {
      _index = (index - 1) <= 0 ? 0 : index - 1
    }
    let el = document.querySelector(`#${navs[_index].id}`)
    let nav = document.querySelector('#main-nav')
    if(el) {
      let top = el.offsetTop

      if (y <= this.navTop) {
        nav.classList.remove('fixed')
      } else {
        !nav.classList.contains('fixed') && nav.classList.add('fixed')
      }
  
      if (swipeDirection === 'up') {
        if (y + 30 + 30 >= top) {
          this.setState({
            index: _index
          })
        }
      } else {
        if (y + 30 + 20 <= top) {
          this.setState({
            index: _index
          })
        }
      }
      this.prevY = y
    }
  }

  render() {
    const { 
      navs, 
      userInfo, 
      isRule, 
      isCourse, 
      inviteUrl, 
      inviteVisible, 
      isFormal, 
      isServer, 
      serverUrl, 
      isSign, 
      showRecordList, 
      shareMark,
      index
    } = this.state;
    const {history} = this.props;
    return (
      <div id={'blessing-preheat'}>
        <Banner 
        isFormal={isFormal} 
        navs={navs} 
        toSection={this.toSection}
        index={index}
         />
        {/* 积福气 */}
        <ListHeader id={'lucky-value'} text="积福气，享受更多福利" styles={{margin: '60px 0 15px'}} />
        <Link className="luck-draw__button" to="/blessingRank">福气排行榜></Link>
        <CollectBlessing
          isSign={isSign}
          userInfo={userInfo}
          history={this.props.history}
          toSection={(e) => this.toSection(this.fetchMoudleId('best-courses'), e)}
          handleToShowList={() => this.handleToShow('isCourse')}
          handleToShowInvite={this.handleToShowInvite}
          handleToShowNotice={this.handleToShowNotice}
          handleToShow={this.handleToShow}
          toLogin={this.toLogin}
          handleToShowShare={() => this.handleToShow('shareMark')}
          handleToHideShare={() => this.handleToHide('shareMark')}
        />

        {/* 幸运大抽奖--预热 */}
        <ListHeader id={'lucky-draw'} text="幸运大抽奖" styles={{margin: '30px 0 10px'}} />
        <p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
        <button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
        <LuckDraw />

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

        {/* 精品课程特惠专区 */}
        <ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} />
        <CourseList isFormal={isFormal} isLogin={userInfo.isLogin} toLogin={this.toLogin}/>

        {
          isRule &&
          <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
        }
        {
          isCourse &&
          <CoursePopup toLogin={this.toLogin} history={history} isLogin={userInfo.isLogin} handleToHide={() => this.handleToHide('isCourse')}/>
        }
        {
          showRecordList &&
          <RecordPopup handleToHide={() => this.handleToHide('showRecordList')}/>
        }
        {
          shareMark &&
          <SharePopup />
        }
        <Popup
          visible={inviteVisible}
          title={'扫码邀请好友注册+10点福气值'}
          className={'invite-popup'}
        >
          <img src={inviteUrl} alt="barcode" className="qr-code"/>
          <CopyToClipboard text="http://m.julyedu.com/invite" onCopy={this.onCopy}>
            <button>一键复制网址</button>
          </CopyToClipboard>
        </Popup>
        <Popup
          visible={isServer}
          title="扫码关注“七月在线”服务号"
          className={'invite-popup'}
        >
          <img src={serverUrl} alt="barcode" className="qr-code"/>
        </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>


        <ListHeader id={'ai-test'} text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}} />
        <div className="test__record" onClick={() => this.handleToShow('showRecordList', true)}>
          测试记录>
        </div>
        <LevelTest isLogin={userInfo.isLogin} toLogin={this.toLogin}></LevelTest>


        <RankList></RankList>

        <Live isFormal={isFormal}></Live>
      </div>
    )
  }
}

export default BlessingPreheat;
