import './index.less'
import React, { useEffect, useState } from "react";

import { Link, useHistory } from 'react-router-dom';
import kemu1 from './../../assets/images/ke_mu1.png'
import kemu2 from './../../assets/images/ke_mu2.png'
import kemu3 from './../../assets/images/ke_mu3.png'
import kemu4 from './../../assets/images/ke_mu4.png'
import blueArrow from './../../assets/images/更多@2x.png'
import api from '~/api'
import road from './../../assets/images/road.png'
import WX from "weixin-js-sdk-ts";
export const Home: React.FC = (props: any) => {
  const [list, setList] = useState([{
    image: kemu1,
    title: "科目一"
  }, {
    image: kemu2,
    title: "科目二"
  }, {
    image: kemu3,
    title: "科目三"
  }, {
    image: kemu4,
    title: "科目四"
  }])
  const [userInfo, setUserInfo] = useState({ "openid": "", "nickname": "未知用户", "sex": "0", "province": "", "city": "", "country": "", "headimgurl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKZYiaibphiayqRhARSnicqI2bHNYWfnuGTDLagIUfNSncS5H8m097t5qSHwkGeRLn8D0uV14ACfibVCZg/132", "privilege": [], "unionid": "" })
  const wxPay = () => {
    api.studentWxGzhPrepareOrder({
      "foreType": 2,
      "goodsId": 5,
      "goodsType": 1,
      "phoneType": 2
    }).then(res=>{
      console.log(res.data.data)
       WX.chooseWXPay({appId:'wx457ba48e0801c0b6',...res.data.data})
    })
    // wx.chooseWXPay()
  }
  useEffect(() => {
    document.title = ''
    let query = new URLSearchParams(window.location.search)

    if (query.get("state") == 'LOGIN') {
      api.loginGzhcode({
        authorizationCode: query.get("code") || ""
      }).then(res => {
        window.localStorage.setItem("token", res.data.data.token)
        window.localStorage.setItem("userInfo", JSON.stringify(res.data.data.thirdResult))
        window.location.replace('/')
        console.log(res.data.data.token)
      })
    }
    else {
      api.studentUserInfo().then(res => {



      })
    }
    setUserInfo(JSON.parse(window.localStorage.getItem('userInfo') || '{"openid":"","nickname":"未知用户","sex":"0","province":"","city":"","country":"","headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKZYiaibphiayqRhARSnicqI2bHNYWfnuGTDLagIUfNSncS5H8m097t5qSHwkGeRLn8D0uV14ACfibVCZg/132","privilege":[],"unionid":""}'
    ) as {
      openid: string;
      nickname: string;
      sex: string;
      province: string;
      city: string;
      country: string;
      headimgurl: string;
      privilege: never[];
      unionid: string;
    })








  }, [])
  return (
    <div className="Home">
      <div className='user'>
        <img className='head' src={userInfo.headimgurl}></img>
        <div className='nickname'>{userInfo.nickname}</div>
      </div>
      <div className='road'>
        <div className='first'>
          <span className='left'>科三真实考场</span>
          <span className='right'>我的考场
            <img src={blueArrow}></img>
          </span>
        </div>
        <div className='sencond'>
          <div className='button'>社会化驾驶人考场</div>
          <img style={{
            marginTop: '0.66vw',
            width: '4.8vw'
          }} src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAOCAYAAABHN77IAAAAAXNSR0IArs4c6QAAATNJREFUSEvF1LtOAkEUBuD/zIISkWjwBfQV9B1kqQ0VFlrSUOClIyGh81bYUGqhlbFm13fQV9AXkGi4BJWdY2bjGlcXBmVHptvJzJlvi/8n+7izBVCDCClMcTGjD3CJlCF30F2lBF0TeHkaJgY98IA33P30nQ/yUSfPWYHEBYD8P6OaEoNNt7LQUu9+gnxEjYWd6VWJUAVgGYZ5zKg77bk6aiSDt8Kgj137qJ+D8C4JWDKBYuAR0io6uyn3+/xIkDq0fvi0YonkFQhrsaIYt558K9zsLd5HzR0KUofzpzyL124DgrZjQUk+w0y61CzTy7B5I0HBpUmrIYi0szN/rvuxsUCTVMPXSOswP1OmufGHaghFOnbQL6ohMtJmQJpqGBVpo6DIatBE2jgoVA3qQxPpcUDvkluDONeclCUAAAAASUVORK5CYII='></img>

        </div>
        <div className='third'>
          <img className='left' src={road}></img>
          <div className='right'>
            <span>
              <div>熟记考场</div>
              <div>考试不用慌</div>
            </span>
            <div onClick={wxPay} className='look'>去看考场</div>
          </div>
        </div>
      </div>
      <div className="list">
        {
          list.map((item, index) => {
            return (
              <Link key={index} to={
                './videoList/' + (index + 1)
              }>
                <div className="list-item" key={index}>
                  <img className="list-item-img" src={item.image} alt="图片" />
                  <span className="list-item-text top30 left60 ">{item.title}</span>
                  <span className="list-item-text top88 left20">《视频讲解》</span>
                </div>
              </Link>


            )
          })

        }
      </div>
    </div>
  )

}