/*
 * @Description: 这里输入文件功能
 * @Author: zhoupeng
 * @Date: 2020-05-06 16:11:26
 * @LastEditTime: 2020-07-07 09:38:15
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ActivityIndicator, Carousel, Toast } from 'antd-mobile';

import { getQueryVariable } from '../../utils/helper';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import * as Service from './services/index';

const goImg = require('./asserts/go.png');
const diskImg = require('./asserts/disk.png');
const shareImg = require('./asserts/share.png');
const titleImg = require('./asserts/prizeTitle.png');

const smileImg = require('./asserts/smile.png');
const ruleTitleImg = require('./asserts/ruleTitle.png');
const ruleButtonImg = require('./asserts/rule.png');
const PRIZR_ARR = [
  {
    id: 1,
    title: '谢谢参与',
    detail: smileImg,
    detailType: 1, //1表示图片 2表示金额
  },
  {
    id: 2,
    title: '代金券',
    detail: '1',
    detailType: 2, //1表示图片 2表示金额
  },
  {
    id: 3,
    title: '谢谢参与',
    detail: smileImg,
    detailType: 1, //1表示图片 2表示金额
  },
  {
    id: 4,
    title: '代金券',
    detail: '100',
    detailType: 2, //1表示图片 2表示金额
  },
  {
    id: 5,
    title: '代金券',
    detail: '10',
    detailType: 2, //1表示图片 2表示金额
  },
  {
    id: 6,
    title: '代金券',
    detail: '50',
    detailType: 2, //1表示图片 2表示金额
  },
  {
    id: 7,
    title: '谢谢参与',
    detail: smileImg,
    detailType: 1, //1表示图片 2表示金额
  },
  {
    id: 8,
    title: '代金券',
    detail: '10',
    detailType: 2, //1表示图片 2表示金额
  },
  {
    id: 9,
    title: '代金券',
    detail: '20',
    detailType: 2, //1表示图片 2表示金额
  },
  {
    id: 10,
    title: '代金券',
    detail: '5',
    detailType: 2, //1表示图片 2表示金额
  },
];

window.initData = function(obj) {
  alert(obj);
  console.log(obj);
  // let tokenObj = JSON.parse(obj);
  // if (window.callback != undefined) {
  //   window.sessionStorage.setItem('token', tokenObj && tokenObj.token ? tokenObj.token : '');
  // }
};

window.setCallback = function(callback) {
  window.callback = callback;
};

@connect(({ test }) => ({ test }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalShow: false,
      totalNum: '-',
      usedNum: '-',
      list: [],
      drawFlag: false,
      drawStart: false,
      drawrResult: null,
      result: {
        prizeName: null,
        facePrice: null,
        prizeCode: null,
      },
    };
  }

  componentWillMount = () => {
    document.title = '抽奖';
    window.setCallback(this);
    var token = getQueryVariable('token');
    window.sessionStorage.setItem('token', token);
    var club = getQueryVariable('club');
    window.sessionStorage.setItem('club', club);
  };

  componentDidMount = () => {
    this.getLotteryNum();
    this.getLotteryList();
  };

  //获取初始化数据
  getLotteryNum = async () => {
    const { rc, data, msg } = await Service.getLotteryNum();
    if (!rc) {
      this.setState({
        totalNum: data.totalNum ? data.totalNum : 0,
        usedNum: data.usedNum ? data.usedNum : 0,
      });
    }
  };
  getLotteryList = async () => {
    const { rc, data, msg } = await Service.getLotteryList();
    if (!rc) {
      this.setState({
        list: data ? data : [],
      });
    }
  };

  //抽奖
  lottery = async () => {
    console.log('=================================================================');
    const _this = this;
    const { drawFlag, result, usedNum, totalNum } = _this.state;
    if (usedNum === totalNum) {
      Toast.info('没有抽奖次数啦~~');
      return;
    }
    if (drawFlag) {
      return;
    }
    _this.setState({
      drawFlag: true,
      drawStart: true,
      drawrResult: null,
    });
    const { rc, data, msg } = await Service.lottery();
    if (!rc) {
      _this.setState({
        result: data
          ? data
          : {
              prizeName: null,
              facePrice: null,
              prizeCode: null,
            },
      });
      _this.getLotteryNum();
    }
    setTimeout(function() {
      _this.lotteryEnd();
    }, 3000);
  };

  lotteryEnd = () => {
    const _this = this;
    const { result } = _this.state;
    _this.setState({
      drawStart: false,
      drawrResult: result.prizeCode ? result.prizeCode : null,
    });
    setTimeout(function() {
      if (result.facePrice === 0) {
        Toast.info(result.prizeName);
      } else if (result.prizeName) {
        Toast.info('恭喜获得' + result.prizeName);
      }
      _this.setState({
        drawFlag: false,
      });
    }, 8000);
    _this.getLotteryList();
  };

  showModal = () => {
    // alert(1);
    this.setState({
      modalShow: true,
    });
  };
  hideModal = () => {
    this.setState({
      modalShow: false,
    });
  };

  //分享朋友圈
  share = async () => {
    try {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        window.webkit.messageHandlers.shareToWXSceneTimeline.postMessage({});
      } else {
        window.js.shareWxCircle();
      }

      const { rc, data, msg } = await Service.share();
      if (!rc) {
        this.getLotteryNum();
      } else {
        Toast.info(msg, 2);
      }
    } catch (e) {
      alert(JSON.stringify(e));
    }
  };

  render() {
    const { modalShow, totalNum, usedNum, list, drawStart, drawrResult } = this.state;
    return (
      <div className={styles.lotteryContent}>
        <img className={styles.modalButton} src={ruleButtonImg} onClick={this.showModal}></img>
        {modalShow ? (
          <div className={styles.modalContainer} onClick={this.hideModal}>
            <div
              className={styles.modalContent}
              onClick={e => {
                e.stopPropagation();
              }}
            >
              <img className={styles.modalTitle} src={ruleTitleImg}></img>
              <div className={styles.modalDetail}>
                <span>1.活动时间：即日起开始，奖品抽完即止。</span>
                <span>
                  2.活动说明：会员在活动期间将活动链接首次分享至朋友圈即可获得一次抽奖机会。另外每完成一只犬只的鼻纹采集登记，则额外叠加一次抽奖机会，抽奖次数无上限限制。
                </span>
                <span>3.活动对象：仅限有效状态会员，如注销等异常状态将不能参与。</span>
                <span>
                  4.活动奖品：业务办理消费代金券，数量有限，可用于会员办理会员及繁殖业务时使用。代金券有效期自发放日起半年内有效，不可转让，详细使用规则以代金券说明为准。
                </span>
                <span>
                  5.活动提示：凡参与本次活动会员，即视为接受活动所有规则，且须遵循相关法律声明及其他关于活动的相关规定。通过不当途径参加本活动的行为，一经发现将终止该会员参加本次活动并取消其获奖资格。
                  本次活动最终解释权归宠爱王国（北京）网络科技有限公司所有。
                </span>
                <span>6.上述活动与Apple inc.无关。</span>
              </div>
            </div>
          </div>
        ) : null}

        <div className={styles.scrollContent}>
          <div className={styles.secondContent}>
            <div className={styles.goContent} onClick={this.lottery}>
              <img src={goImg} alt="指针"></img>
            </div>
            <div
              className={`${styles.diskContainer} ${drawStart ? styles.go_draw : null} ${
                drawrResult === 1
                  ? styles.go_draw_1
                  : drawrResult === 2
                  ? styles.go_draw_2
                  : drawrResult === 3
                  ? styles.go_draw_3
                  : drawrResult === 4
                  ? styles.go_draw_4
                  : drawrResult === 5
                  ? styles.go_draw_5
                  : drawrResult === 6
                  ? styles.go_draw_6
                  : drawrResult === 7
                  ? styles.go_draw_7
                  : drawrResult === 8
                  ? styles.go_draw_8
                  : drawrResult === 9
                  ? styles.go_draw_9
                  : drawrResult === 10
                  ? styles.go_draw_10
                  : null
              }`}
            >
              <div className={styles.diskContent}>
                {PRIZR_ARR.map(({ id, title, detailType, detail }) => {
                  if (detailType === 1) {
                    return (
                      <div key={id.toString()} className={styles.itemContent}>
                        <div>{title}</div>
                        <img className={styles.smileImg} src={detail} alt="券"></img>
                      </div>
                    );
                  } else if (detailType === 2) {
                    return (
                      <div key={id.toString()} className={styles.itemContent}>
                        <div>{title}</div>
                        <div className={styles.moneyContent}>
                          <span className={styles.spanLabel}>¥</span>
                          <span className={styles.spanMoney}>{detail}</span>
                        </div>
                      </div>
                    );
                  }
                  return null;
                })}
              </div>
            </div>
          </div>
          <div className={styles.thirdContent}>
            <div className={styles.title}>
              <span>
                抽奖次数 ({usedNum}/{totalNum})
              </span>
            </div>
            <div className={styles.shareContent}>
              <img src={shareImg} onClick={this.share}></img>
            </div>
            <div className={styles.detailContent}>
              <img className={styles.detailContentImg} src={titleImg}></img>
              {list && list.length > 0 ? (
                list.map(item => {
                  return (
                    <div className={styles.detailItem}>
                      <div className={styles.dateText}>
                        {item && item.createDate ? item.createDate.split(' ')[0] : ''}
                      </div>
                      <div className={styles.nameText}>
                        {item && item.memberName ? item.memberName : ''}
                      </div>
                      <div className={styles.detailText}>
                        {item && item.couponName ? item.couponName : ''}
                      </div>
                    </div>
                  );
                })
              ) : (
                <div className={styles.detailItem}>
                  <div className={styles.dateText}></div>
                  <div className={styles.nameText}>暂无数据</div>
                  <div className={styles.detailText}></div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Index;