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

import FirstImage from '../assets/index/1@2x.jpg';
import SecondImage from '../assets/index/2@2x.jpg';
import ThirdImage from '../assets/index/3@2x.jpg';
import FourthImage from '../assets/index/4@2x.jpg';

import Example1 from '../assets/index/image11.png';
import Example2 from '../assets/index/image12.png';
import Example3 from '../assets/index/image13.png';
import Example4 from '../assets/index/image14.png';
import Example5 from '../assets/index/image21.png';
import Example6 from '../assets/index/image22.png';
import Example7 from '../assets/index/image23.png';
import Example8 from '../assets/index/image24.png';
import Example9 from '../assets/index/image25.png';
import Example10 from '../assets/index/image26.png';
import Example11 from '../assets/index/image31.png';
import Example12 from '../assets/index/image32.png';

import Phoneicon from '../assets/index/phoneicon@2x.png';
import Handicon from '../assets/index/handicon.png';
import BottomButton from '../assets/index/bottomButton@2x.png';

//刷新URL
//测试
// const URL =
//   'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdbe8735cfb396c1e&redirect_uri=http%3A%2F%2Fmarketing.test.chongaibao.com%2F%23%2F.%2FcatAppraisals%2Findex&response_type=code&scope=snsapi_base&state=STATE#wechat_redirec';

//生产
const URL =
  'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdbe8735cfb396c1e&redirect_uri=http%3A%2F%2Fmarketing.chongaibao.com%2F%23%2F.%2FcatAppraisals%2Findex&response_type=code&scope=snsapi_base&state=STATE#wechat_redirec';

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split('&');
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split('=');
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
}

@connect(() => ({}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false,
      imgSrc: '',
    };
  }
  onClose = () => {
    this.setState({
      imgShow: false,
    });
  };
  imgShow = (e, a) => {
    const imgShowArr = [
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/7d1f847d80b44dcbb200ce3acb98888d',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/b106ab4b1b7b40c7a9f77716256addaa',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/116953e13dc34e30bff78391aa9834a0',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/52c59c175f574c9baab035b93fc99b7c',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/298b1ab887ec4217bc36190d96efca1f',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/bcd2856a59cb438bb33a63e30c393b8e',
      'http://newpetpassport.chongaibao.com/newpetpassportpro/pub/upload/image/ab32dd2a4ca94c19b398cb3981065dc1',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/2d440ae022f44457bfd8a53a34be636d',

      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/60cff8c0f8a64e36b0fcbb17b80ecf0a',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/e0c04eed25ae4403b1110b743633aa90',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/80bcee2721e04cbd8d399a829be82329',
      'http://newpetpassport.chongaibao.com:80/newpetpassportpro/pub/upload/image/72596d67822249c7a01446450124d4d8',
    ];

    wx.previewImage({
      current: imgShowArr[e * 1], // 当前显示图片的http链接
      urls: imgShowArr, // 需要预览的图片http链接列表
    });
  };
  componentWillMount = () => {};
  componentDidMount = () => {
    console.log('home page');
    var code = getQueryVariable('code');
    if (code) {
      GetSignature();
    } else {
      window.location.href = URL;
    }
  };

  goToListPage() {
    router.push('/catAppraisals/info');
  }

  render() {
    return (
      <div className={styles.body}>
        <div className={styles.index_container}>
          <div className={styles.index_imgWrap}>
            <img src={FirstImage} />
            <div className={styles.index_phoneWrap}>
              <img className={styles.index_Phoneicon} src={Phoneicon} alt="" />
              <span> 业务咨询: 屠先生 </span>
              <a href="tel:010-53977052">010-53977071</a>
              <a href="tel:13521275087">13958050988</a>
            </div>
          </div>
          <div className={styles.index_imgWrap}>
            <img src={SecondImage} />
            <img src={ThirdImage} />
          </div>
          <div className={styles.index_exampleWrap}>
            <div className={styles.index_pictureExample}>
              <p className={styles.index_pictureExample_title}>
                附件一：线上猫只鉴定展示基本动作（头部）
              </p>
              <div className={styles.index_pictureWrap}>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example1} alt="" onClick={this.imgShow.bind(this, 0)} />
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example2} alt="" onClick={this.imgShow.bind(this, 1)} />
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example3} alt="" onClick={this.imgShow.bind(this, 2)} />
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example4} alt="" onClick={this.imgShow.bind(this, 3)} />
                </div>
              </div>
              <div className={styles.index_pictureWrap}>
                <div className={styles.index_pictureWrap_item}>
                  <p className={styles.textInfo}>正面</p>
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <p className={styles.textInfo}>左侧面</p>
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <p className={styles.textInfo}>右侧面</p>
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <p className={styles.textInfo}>背面</p>
                </div>
              </div>
              <div className={styles.index_pictureWrap}>
                <div className={styles.index_handicon}>
                  <img src={Handicon} alt="" />
                  <p className={`${styles.textInfo} ${styles.handicon}`}>点击图片可放大查看</p>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.index_exampleWrap}>
            <div className={styles.index_pictureExample}>
              <p className={styles.index_pictureExample_title}>
                附件二：线上猫只鉴定展示基本动作（身体）
              </p>
              <div className={styles.index_pictureWrap}>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example5} onClick={this.imgShow.bind(this, 4)} />
                  <p className={styles.textInfo}>正面</p>
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example6} onClick={this.imgShow.bind(this, 5)} />
                  <p className={styles.textInfo}>侧面</p>
                  <img src={Example7} onClick={this.imgShow.bind(this, 7)} />
                  <p className={styles.textInfo}>前爪垫</p>
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example8} onClick={this.imgShow.bind(this, 6)} />
                  <p className={styles.textInfo}>尾巴(后脚着地)</p>
                  <img src={Example9} onClick={this.imgShow.bind(this, 8)} />
                  <p className={styles.textInfo}>后爪垫</p>
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example10} onClick={this.imgShow.bind(this, 9)} />
                  <p className={styles.textInfo}>腹部</p>
                </div>
              </div>
              <div className={styles.index_pictureWrap}>
                <div className={styles.index_handicon}>
                  <img src={Handicon} alt="" />
                  <p className={`${styles.textInfo} ${styles.handicon}`}>点击图片可放大查看</p>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.index_exampleWrap}>
            <div className={styles.index_pictureExample}>
              <p className={styles.index_pictureExample_title}>
                附件三：线上猫只鉴定展示基本动作（毛发）
              </p>
              <div className={`${styles.index_pictureWrap} ${styles.index_pictureWrap1}`}>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example11} onClick={this.imgShow.bind(this, 10)} />
                  <p className={styles.textInfo}>背部</p>
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example12} onClick={this.imgShow.bind(this, 11)} />
                  <p className={styles.textInfo}>毛质</p>
                </div>
              </div>
              <div className={styles.index_pictureWrap}>
                <div className={styles.index_handicon}>
                  <img src={Handicon} alt="" />
                  <p className={`${styles.textInfo} ${styles.handicon}`}>点击图片可放大查看</p>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.index_imgWrap}>
            <img src={FourthImage} />
          </div>
          <div className={styles.index_floatButton}>
            <img src={BottomButton} onClick={this.goToListPage} />
          </div>
        </div>
        <Modal
          className={styles.imgCon}
          visible={this.state.imgShow}
          transparent
          maskClosable={true}
          onClose={this.onClose}
          footer={[
            {
              text: '关闭',
              onPress: () => {
                console.log('ok');
                this.onClose();
              },
            },
          ]}
          wrapProps={{ onTouchStart: this.onWrapTouchStart }}
        >
          <img style={{ width: '100%' }} src={this.state.imgSrc} alt="" />
        </Modal>
      </div>
    );
  }
}

export default Index;