import * as React from 'react'
import {FC, useEffect, useState}from 'react'
import {LeftOutlined,DownOutlined,RightOutlined } from '@ant-design/icons';
import './../css/order.css'
import { useHistory,Link ,withRouter} from 'react-router-dom'
import {getOrderInfoByWxId} from "../api";


const Order: React.FC = () => {
  const history:any = useHistory()
  const [openFlag, setOpenFlag] = useState<any>([true,false,false,false])
  const [customData, setCustomData] = useState<any>([])
  const [orderInfo,setOrderInfo]=useState<any>([])
  const [userId, setUserId] = useState<any>('');
  const open = async (index:any)=>{
        let arr = [...openFlag]
        arr[index] = !arr[index]
        setOpenFlag(arr)
    
  }
  //路由跳转过来携带的数据
  const GetRouterData = async ()=>{
    // console.log(history, 'props')
    // setOrderInfo(history.location.state.orderInfo)
    // setCustomData(history.location.state.orderInfo.clientOrderInfos)
    let userId = history.location.state.userId
    setUserId(userId)
    getorderInfo(userId)
  }
  //获取订单信息
  const getorderInfo = async (id:any) => {
    // const res = await jsSdk.invoke<{ userId?: string }>('getCurExternalContact', {})
    // if (!res || !res.userId) return
    // setUserId(res.userId)
    let data:any = {wxId:id}
    const orderInfo = await getOrderInfoByWxId(data)
    setOrderInfo(orderInfo.data)
    setCustomData(orderInfo.data.clientOrderInfos)
    
  }
  const Goto = async (userItem:any)=>{
    // // 页面跳转方法
    history.push({pathname: '/Person', state: { userItem,userId }})
  }
  const back=async ()=>{
    // history.back()
    history.push({pathname: '/'})
  }
  useEffect(() => {
    GetRouterData();
    
  },[orderInfo] )
  return (
    <div>
      <div className="orderItem" onClick={back}><LeftOutlined/>订单信息</div>
      <div className="orders">
        <div className="flex spaceBetween head">
          <p>客户中心{openFlag}</p>
          <p onClick={open.bind(this,0)}>
            {
              openFlag[0]?<DownOutlined/>:<RightOutlined/>
            }
          </p>
        </div>
        {
          openFlag[0]?customData.map((e:any) => 
            <div className="flex spaceBetween pad20">
              <div className="game">
                <p className='greyWord'>赛事名称</p>
                <p>{e.gobiName}</p>
              </div>
              <div className="game">
                <p className='greyWord'>分组</p>
                <p>{e.rolesName}</p>
              </div>
              <div className="jt" onClick={Goto.bind(this,e)}><RightOutlined/></div>
            </div>
          ):null
        }
      </div>
      <div className="orders">
        <div className="flex spaceBetween head">
          <p>戈有好物</p>
          <p onClick={open.bind(this,1)}>
            {
              openFlag[1]?<DownOutlined/>:<RightOutlined/>
            }
          </p>
        </div>
      </div>
      <div className="orders">
        <div className="flex spaceBetween head">
          <p>纷享销客-商机2.0</p>
          <p onClick={open.bind(this,2)}>
            {
              openFlag[2]?<DownOutlined/>:<RightOutlined/>
            }
          </p>
        </div>
      </div>
      <div className="orders">
        <div className="flex spaceBetween head">
          <p>纷享销客-订单</p>
          <p onClick={open.bind(this,3)}>
            {
              openFlag[3]?<DownOutlined/>:<RightOutlined/>
            }
          </p>
        </div>
      </div>

      
    </div>
  )
}

export default Order