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

import bg from '../assets/index/bg01.jpg';
import icon02 from '../assets/icon02.jpg';
import icon02_cku from '../assets/icon02_cku.jpg';
import icon02_csv from '../assets/icon02_csv.jpg';
import icon03 from '../assets/icon03.jpg';
import icon03_cku from '../assets/icon03_cku.jpg';
import icon03_csv from '../assets/icon03_csv.jpg';

@connect(({ index }) => ({ index }))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.tabRef = null;
  }
  componentWillMount = () => {
    const { wxOpenFlag } = this.props.index;
    if (!wxOpenFlag) {
      this.props.dispatch({
        type: 'index/getConfig',
        payload: {},
        callback: () => {
          this.props.dispatch({
            type: 'index/updateState',
            payload: {
              wxOpenFlag: true,
            },
          });
          wx.updateAppMessageShareData({
            title: '2020年度中国宠物产业文化发展颁奖云盛典正式开启', // 分享标题
            desc: 'cku、csv、品牌获奖名单公布', // 分享描述
            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: `${window.location.origin}${bg}`, // 分享图标
            success: function() {
              // 设置成功
              console.log('updateAppMessageShareData设置成功');
            },
          });
          wx.updateTimelineShareData({
            title: '2020年度中国宠物产业文化发展颁奖云盛典正式开启', // 分享标题
            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: `${window.location.origin}${bg}`, // 分享图标
            success: function() {
              // 设置成功
              console.log('updateTimelineShareData设置成功');
            },
          });
        },
      });
    } else {
      wx.ready(function() {
        wx.updateAppMessageShareData({
          title: '2020年度中国宠物产业文化发展颁奖云盛典正式开启', // 分享标题
          desc: 'cku、csv、品牌获奖名单公布', // 分享描述
          link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: `${window.location.origin}${bg}`, // 分享图标
          success: function() {
            // 设置成功
            console.log('updateAppMessageShareData设置成功');
          },
        });
        wx.updateTimelineShareData({
          title: '2020年度中国宠物产业文化发展颁奖云盛典正式开启', // 分享标题
          link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: `${window.location.origin}${bg}`, // 分享图标
          success: function() {
            // 设置成功
            console.log('updateTimelineShareData设置成功');
          },
        });
      });
    }
    this.props.dispatch({
      type: 'index/getList',
      payload: {},
    });
  };
  componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll, true);
    const { top } = this.props.index;
    window.scrollTo(0, top);
  };
  componentWillUnmount = () => {
    window.removeEventListener('scroll', this.handleScroll, true);
    const { top } = this.scollPostion();
    this.props.dispatch({
      type: 'index/updateState',
      payload: {
        top,
      },
    });
  };

  scollPostion = () => {
    var t, l, w, h;
    if (document.documentElement && document.documentElement.scrollTop) {
      t = document.documentElement.scrollTop;
      l = document.documentElement.scrollLeft;
      w = document.documentElement.scrollWidth;
      h = document.documentElement.scrollHeight;
    } else if (document.body) {
      t = document.body.scrollTop;
      l = document.body.scrollLeft;
      w = document.body.scrollWidth;
      h = document.body.scrollHeight;
    }
    return {
      top: t,
      left: l,
      width: w,
      height: h,
    };
  };

  handleScroll = event => {
    if (this.tabRef) {
      const { top } = this.tabRef.getBoundingClientRect();
      const { tabFlag } = this.props.index;
      if (top < 0) {
        if (tabFlag) {
          return;
        }
        this.props.dispatch({
          type: 'index/updateState',
          payload: {
            tabFlag: true,
          },
        });
      } else {
        if (!tabFlag) {
          return;
        }
        this.props.dispatch({
          type: 'index/updateState',
          payload: {
            tabFlag: false,
          },
        });
      }
    }
  };

  onChangeTab = index => {
    this.props.dispatch({
      type: 'index/updateState',
      payload: {
        tabTIndex: index,
        tabBIndex: 0,
        classifys: [],
      },
    });
    this.props.dispatch({
      type: 'index/getList',
      payload: {},
    });
    const { tabFlag } = this.props.index;
    if (this.tabRef && tabFlag) {
      this.tabRef.scrollIntoView();
    }
  };

  onChangeTabB = index => {
    this.props.dispatch({
      type: 'index/updateState',
      payload: {
        tabBIndex: index,
      },
    });
    this.props.dispatch({
      type: 'index/getList',
      payload: {},
    });
    const { tabFlag } = this.props.index;
    if (this.tabRef && tabFlag) {
      this.tabRef.scrollIntoView();
    }
  };

  onGoVideo = id => {
    router.push(`/awards/video?id=${id}`);
  };

  onGoDetail = winnerId => {
    router.push(`/awards/detail?winnerId=${winnerId}`);
  };

  render() {
    const { tab, tabFlag, tabTIndex, tabBIndex, wxOpenFlag, classifys, awards } = this.props.index;
    return (
      <DocumentTitle title="2020年度中国宠物产业文化发展">
        <div className={styles.body}>
          <div className={styles.top_bg}></div>
          <div className={styles.ce_bg}></div>
          <div className={styles.bo_bg}></div>
          {wxOpenFlag ? (
            <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>
          ) : null}
          <div className={styles.body_c}>
            <div className={styles.tite_1}></div>
            <div className={styles.box_1} onClick={this.onGoVideo.bind(this, '01')}>
              <img src="/awards/media/h01.jpg" alt="封面" />
            </div>

            <div className={styles.tite_2}></div>

            <Carousel dots={false} slideWidth={0.7146667} infinite>
              <div className={styles.box_2} onClick={this.onGoVideo.bind(this, '02')}>
                <img src="/awards/media/h02.jpg" alt="封面" />
              </div>
              <div className={styles.box_2} onClick={this.onGoVideo.bind(this, '03')}>
                <img src="/awards/media/h03.jpg" alt="封面" />
              </div>
              <div className={styles.box_2} onClick={this.onGoVideo.bind(this, '04')}>
                <img src="/awards/media/h04.jpg" alt="封面" />
              </div>
              <div className={styles.box_2} onClick={this.onGoVideo.bind(this, '05')}>
                <img src="/awards/media/h05.jpg" alt="封面" />
              </div>
              <div className={styles.box_2} onClick={this.onGoVideo.bind(this, '06')}>
                <img src="/awards/media/h06.jpg" alt="封面" />
              </div>
            </Carousel>

            <div className={styles.tite_3}></div>
            <div
              className={`${styles.tab_p} ${classifys.length > 1 ? styles.tab_p_h : ''}`}
              ref={tabP => (this.tabRef = tabP)}
            >
              <div className={`${styles.tab} ${tabFlag ? styles.tab_a : ''}`}>
                <div className={styles.tab_t}>
                  {tab.length > 0
                    ? tab.map((item, index) => (
                        <div
                          key={item.organization}
                          className={`${styles.tab_t_i} ${
                            tabTIndex === index ? styles.tab_t_a : ''
                          }`}
                          onClick={this.onChangeTab.bind(this, index)}
                        >
                          {item.tabName}
                        </div>
                      ))
                    : null}
                </div>
                {classifys.length > 1 ? (
                  <div className={styles.tab_b}>
                    {classifys.map((item, index) => (
                      <div
                        key={item.classifyId}
                        className={`${styles.tab_b_i} ${tabBIndex === index ? styles.tab_b_a : ''}`}
                        onClick={this.onChangeTabB.bind(this, index)}
                      >
                        {item.classifyName}
                      </div>
                    ))}
                  </div>
                ) : null}
              </div>
            </div>
            <div className={styles.tab_body}>
              {awards.length > 0
                ? awards.map((item, index) => [
                    <div key={`${item.awardId}_t`} className={styles.tab_body_t}>
                      <span>{item.awardName}</span>
                    </div>,
                    <div
                      key={`${item.awardId}_t_d}`}
                      className={`${styles.tab_body_t_d} ${
                        item.winners && item.winners.length === 1 ? styles.tab_body_t_d_n : ''
                      }`}
                    >
                      （排名不分先后）
                    </div>,
                    <div
                      key={`${item.awardId}_b`}
                      className={`${styles.tab_body_l} ${
                        item.winners && item.winners.length === 1
                          ? item.winnerType === '0'
                            ? styles.tab_body_l_2
                            : styles.tab_body_l_3
                          : item.winnerType === '0'
                          ? styles.tab_body_l_1
                          : ''
                      }`}
                    >
                      {item.winners && item.winners.length > 0
                        ? item.winners.map((item1, index1) => (
                            <div
                              key={item1.winnerId}
                              className={styles.tab_body_i}
                              onClick={() => {
                                if (item1.detailFlag) {
                                  this.onGoDetail(item1.winnerId);
                                }
                              }}
                            >
                              <img
                                src={
                                  item1.mianImageUrl ||
                                  (item.winnerType === '0'
                                    ? tabTIndex === 0
                                      ? icon02_cku
                                      : tabTIndex === 1
                                      ? icon02_csv
                                      : icon02
                                    : tabTIndex === 0
                                    ? icon03_cku
                                    : tabTIndex === 1
                                    ? icon03_csv
                                    : icon03)
                                }
                                alt="图片"
                              />
                              <span>{item1.winnerName}</span>
                              <div
                                className={`${styles.tab_body_btn} ${
                                  item1.detailFlag ? '' : styles.disabled
                                }`}
                              >
                                查看
                              </div>
                            </div>
                          ))
                        : null}
                    </div>,
                  ])
                : null}
            </div>
          </div>
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;