import React, { Component } from 'react';
import { connect } from 'react-redux';
import DocumentTitle from 'react-document-title';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';
import wx from 'weixin-js-sdk';

import icon02 from '../assets/icon02.jpg';
import icon03 from '../assets/icon03.jpg';

@connect(({ index, detail }) => ({ index, detail }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shareFlag: false,
    };
  }

  componentWillMount = () => {
    window.scrollTo(0, 0);
    const { winnerId } = this.props.location.query;
    if (winnerId) {
      this.props.dispatch({
        type: 'detail/getDetail',
        payload: {
          winnerId,
        },
        callback: () => {
          const {
            winnerType,
            awardName,
            mianImageUrl,
            winnerName,
            winnerIntroduction,
          } = this.props.detail;
          const { wxOpenFlag } = this.props.index || {};
          if (wxOpenFlag) {
            wx.updateAppMessageShareData({
              title: `${winnerName}荣获：${awardName}`, // 分享标题
              desc: winnerIntroduction, // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                mianImageUrl ||
                (winnerType === '0'
                  ? `${window.location.origin}${icon02}`
                  : `${window.location.origin}${icon03}`), // 分享图标
              success: function() {
                // 设置成功
                console.log('updateAppMessageShareData设置成功');
              },
            });
            wx.updateTimelineShareData({
              title: `${winnerName}荣获：${awardName}`, // 分享标题
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:
                mianImageUrl ||
                (winnerType === '0'
                  ? `${window.location.origin}${icon02}`
                  : `${window.location.origin}${icon03}`), // 分享图标
              success: function() {
                // 设置成功
                console.log('updateTimelineShareData设置成功');
              },
            });
          } else {
            this.props.dispatch({
              type: 'detail/getConfig',
              payload: {},
              callback: () => {
                wx.updateAppMessageShareData({
                  title: `${winnerName}荣获：${awardName}`, // 分享标题
                  desc: winnerIntroduction, // 分享描述
                  link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl:
                    mianImageUrl ||
                    (winnerType === '0'
                      ? `${window.location.origin}${icon02}`
                      : `${window.location.origin}${icon03}`), // 分享图标
                  success: function() {
                    // 设置成功
                    console.log('updateAppMessageShareData设置成功');
                  },
                });
                wx.updateTimelineShareData({
                  title: `${winnerName}荣获：${awardName}`, // 分享标题
                  link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl:
                    mianImageUrl ||
                    (winnerType === '0'
                      ? `${window.location.origin}${icon02}`
                      : `${window.location.origin}${icon03}`), // 分享图标
                  success: function() {
                    // 设置成功
                    console.log('updateTimelineShareData设置成功');
                  },
                });
              },
            });
          }
        },
      });
    }
  };

  componentDidMount = () => {
    this.props.dispatch({
      type: 'detail/clean',
      payload: {},
    });
  };

  previewImage = image => {
    const { childImages } = this.props.detail;
    wx.previewImage({
      current: image, // 当前显示图片的http链接
      urls: childImages, // 需要预览的图片http链接列表
    });
  };

  goHome = () => {
    router.replace('/awards/index');
  };

  onChangeShareFlag = flag => {
    this.setState({
      shareFlag: flag,
    });
  };

  render() {
    const {
      winnerId,
      winnerType,
      awardName,
      mianImageUrl,
      winnerName,
      winnerIntroduction,
      childImages,
      winnerReason,
    } = this.props.detail;
    const { shareFlag } = this.state;
    return (
      <DocumentTitle title={awardName || ''}>
        {winnerId ? (
          <div className={`${styles.body} ${winnerType === '0' ? styles.body_per : ''}`}>
            <div className={styles.top_bg}></div>
            <div className={styles.ce_bg}></div>
            <div className={styles.go_home}>
              <wx-open-launch-weapp
                username="gh_61453ebacbc2"
                path="apps/pages/stroll/index.html?from=awards"
              >
                <script type="text/wxtag-template">
                  <div
                    style={{
                      display: 'block',
                      width: '64px',
                      height: '80px',
                    }}
                  ></div>
                </script>
              </wx-open-launch-weapp>
            </div>
            <div className={styles.body_c}>
              <div className={styles.body_title}>
                <span>{awardName}</span>
              </div>
              <div className={styles.box_1}>
                <div className={styles.box_t}>
                  <img src={mianImageUrl || (winnerType === '0' ? icon02 : icon03)} alt="图片" />
                  <span>{winnerName}</span>
                </div>
                <p>{winnerIntroduction}</p>
              </div>
              {childImages && childImages.length > 0 ? (
                <div>
                  <div className={styles.body_t}>
                    <span>{`${winnerType === '0' ? '获奖者风采' : '获奖机构风采'}`}</span>
                  </div>
                  <div className={styles.box_2}>
                    {childImages.map((item, index) => (
                      <img
                        key={`${index}_`}
                        src={item}
                        alt="图片"
                        onClick={this.previewImage.bind(this, item)}
                      />
                    ))}
                  </div>
                </div>
              ) : null}
              {winnerReason ? (
                <div>
                  <div className={styles.body_t}>
                    <span>评选标准</span>
                  </div>
                  <div className={styles.box_3}>{winnerReason}</div>
                </div>
              ) : null}
            </div>
            <div className={styles.body_b}>
              <div
                className={`${styles.btn} ${styles.btn_l}`}
                onClick={this.onChangeShareFlag.bind(this, true)}
              >
                立即分享
              </div>
              <div onClick={this.goHome.bind(this)} className={styles.btn}>
                返回颁奖首页
              </div>
            </div>
            {shareFlag ? (
              <div
                className={styles.share}
                onClick={this.onChangeShareFlag.bind(this, false)}
              ></div>
            ) : null}
          </div>
        ) : (
          <div className={styles.body}></div>
        )}
      </DocumentTitle>
    );
  }
}

export default Index;