import React, { Component } from 'react'
import styles from './index.less'

import words01 from '@/assets/words01.png'
import iconIos from '@/assets/icon_ios01.png'
import iconAndroid from '@/assets/icon_android01.png'
import iconCode from '@/assets/icon_code.png'

import qrcode from '@/assets/qrcode.png'
import router from 'umi/router'
import { Icon } from 'antd'
import CopyRight from './components/CopyRight'

class Home extends Component {
  constructor(props) {
    super(props)
  }
  // 跳转到产品说明
  goExplain = (e) => {
    e.preventDefault()
    router.push('/explain')
  }
  onDownIos = () => {
    const iosUrl = 'https://fir.im/starbuds'
    window.open(iosUrl, '_blank')
  }
  onDownAndroid = () => {
    const androidUrl = 'http://file.qn.paqukeji.com/xingya-1.0.0-3.apk'
    window.location.href = androidUrl
  }
  render() {
    return (
      <div className={styles['home-wrap']}>
        <div className={styles['video-wrap']}>
          <video
            src="//sp.qn.paqukeji.com/videos/office_web_video.mp4"
            poster='/cover01.png'
            controls={false}
            className={styles['video-flag']}
            autoPlay
            muted
            loop
          />
        </div>
        <div className={styles['mask-wrap']}>
          <div className={styles['content-wrap']}>
            {/* <div className={styles['logo-bottom-height']}/> */}

            <img src={words01} alt="" className={styles['words-img']} />
            {/* <div className={styles['height-word-bot']} /> */}

            {/* <div className={styles['height-btns-bot']}>
              <a 
                href="#"
                onClick={this.goExplain}
              >
                <Icon type="appstore" />
                <span>产品说明</span>
              </a>
            </div> */}
            {/* <ul className={styles['btns-wrap']}>
              <li onClick={this.goExplain}>
                <Icon type="appstore" />
                <span>产品说明</span>
              </li>
              <li onClick={this.onDownIos}>
                <img src={iconIos} alt=""/>
                <span>iOS下载</span>
              </li>
              <li onClick={this.onDownAndroid}>
                <img src={iconAndroid} alt=""/>
                <span>Android下载</span>
              </li>
              <li>
                <img src={iconCode} alt=""/>
                <span>扫描下载</span>
                <div className={styles['qrcode-wrap']}>
                  <div className={styles['qrcode-img-wrap']}>
                    <img className={styles['qrcode-img']} src={qrcode} alt=""/>
                  </div>
                </div>
              </li>
            </ul> */}
            {/* <div className={styles['height-btns-bot']} /> */}
            <div className={styles['copy-right-height']} />
            <CopyRight />
          </div>
        </div>
      </div>
    )
  }
}
export default Home