import React , { useEffect , useState } from 'react';
import { Button ,Spin , Pagination , Popconfirm } from 'antd';
import Nodata from '../Nodata';
import moment from "moment";
import axios from 'axios';

const limit = 10;
function BlockchainExVerify(props){
  const [ list , setList ] = useState([]);
  let user = props.current_user;

  useEffect(()=>{
    if(user && user.login){
      getInfo();
    }
  },[])

  function getInfo(){
    const url = `/users/blockchain/get_verify_trades`;
    axios.get(url,{
      params:{
        "user_id": user.user_id
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.results);
      }
    }).catch(error=>{
      console.log(error);
    })
  }

  function verify_trade(index) {
    const url = `/users/blockchain/verify_trade`;
    axios.post(url,{
      "user_id": user.user_id,
      "trade_id": document.getElementById(index).innerText
    }).then(result=>{
      if(result && result.data){
        if (result.data.status == 2) {
          window.location.reload();
        }
      }
    }).catch(error=>{
      console.log(error);
    })
  }

  return(
    <div style={{minHeight:"400px"}}>
      {
        list && list.length > 0 ?
          <ul className="CIList">

            <li>
              <span>
                <span hidden={true}></span>
                <span className="blockchain_username ml20">卖家名</span>
                <span className="blockchain_proj ml20">项目创建者/项目名</span>
                <span className="blockchain_proj ml20">token数量:价值</span>
                <span className="blockchain_username ml20">买家名</span>
                <span className="blockchain_time ml20">交易时间</span>
              </span>
              {
                <Button hidden={true}></Button>
              }
            </li>

            {list.map((item,key)=>{
              return(
                <li key={key}>
                    <span>
                      <span id={key} hidden={true}>{item[3].id}</span>
                      <span className="blockchain_username ml20">{item[0].login}</span>
                      <span className="blockchain_proj ml20">{item[1].login + "/" + item[2].name}</span>
                      <span className="blockchain_proj ml20">{item[3].token_num + ":" + item[3].money}</span>
                      <span className="blockchain_username ml20">{item[4].login}</span>
                      <span className="blockchain_time ml20">{moment(item[3].created_at).format('YYYY-MM-DD HH:mm:ss')}</span>
                    </span>
                  {
                    <Popconfirm
                      title="确认收货？"
                      onConfirm={() => {verify_trade(key)}}
                      okText="确认"
                      cancelText="取消"
                    >
                      <Button>确认收货</Button>
                    </Popconfirm>
                  }
                </li>
              )
            })}
          </ul>
          :<Nodata _html="暂无待处理交易"/>
      }
    </div>
  )
}
export default BlockchainExVerify;
