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 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 FifthImage from '../assets/index/5@2x.jpg';

import Example1 from '../assets/index/WechatIMG17.png';
import Example2 from '../assets/index/WechatIMG18.png';
import Example3 from '../assets/index/WechatIMG19.png';
import Example4 from '../assets/index/WechatIMG20.png';

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

import biwenvod from '../assets/index/biwen.mp4';
import wolkvod from '../assets/index/walk.mp4';

import biwenvodbg from '../assets/index/biwenVodBg.jpg';
import walkvodbg from '../assets/index/walkVodBg.jpg';

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

//生产
const URL =
  'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaf5a9e02cc14e220&redirect_uri=http%3A%2F%2Fmarketing.chongaibao.com%2F%23%2F.%2FdogAppraisals%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 = {};
  }
  componentWillMount = () => {
    console.log('home page');
  };
  componentDidMount = () => {
    var code = getQueryVariable('code');
    if (code) {
      GetSignature();
    } else {
      window.location.href = URL;
    }
  };

  goToListPage() {
    router.push('/dogAppraisals/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-53977052</a>
              <a href="tel:13521275087">13521275087</a>
            </div>
          </div>
          <div className={styles.index_imgWrap}>
            <img src={SecondImage} />
            <img src={ThirdImage} />
            <img src={FourthImage} />
          </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="" />
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example2} alt="" />
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example3} alt="" />
                </div>
                <div className={styles.index_pictureWrap_item}>
                  <img src={Example4} alt="" />
                </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>
          </div>
          <div className={styles.index_exampleWrap}>
            <div className={styles.index_pictureExample}>
              <p className={styles.index_pictureExample_title}>
                纯种犬线上鉴定拍摄照片图例 （附件二）
              </p>
              <div className={styles.index_vodWrap}>
                <video
                  className={styles.index_walkVod}
                  src={wolkvod}
                  controls="controls"
                  poster={walkvodbg}
                >
                  您的浏览器不支持 video 标签。
                </video>
                <p className={styles.textInfo}>直线往返步态、环形步态视频</p>
              </div>
            </div>
          </div>
          <div className={styles.index_exampleWrap}>
            <div className={styles.index_pictureExample}>
              <p className={styles.index_pictureExample_title}>
                纯种犬线上鉴定拍摄照片图例 （附件三）
              </p>
              <div className={styles.index_vodWrap}>
                <video src={biwenvod} controls="controls" poster={biwenvodbg}>
                  您的浏览器不支持 video 标签。
                </video>
                <p className={styles.textInfo}>鼻纹采集拍摄</p>
              </div>
            </div>
          </div>
          <div className={styles.index_imgWrap}>
            <img src={FifthImage} />
          </div>
          <div className={styles.index_floatButton}>
            <img src={BottomButton} onClick={this.goToListPage} />
          </div>
        </div>
      </div>
    );
  }
}

export default Index;