import React , { useEffect , useState } from 'react';
import { Button ,Spin , Pagination , Popconfirm } from 'antd';
import { Link } from 'react-router-dom';
import Nodata from '../Nodata';
import axios from 'axios';

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

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

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

  function trade(index) {
    const url = `/users/blockchain/trade`;
    axios.post(url,{
      "user_id": user.user_id,
      "user_id2": 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_balance ml20">token数</span>
                      <span className="blockchain_balance 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_balance ml20">{item[3].token_num}</span>
                      <span className="blockchain_balance ml20">{item[3].money}</span>
                    </span>
                    {
                      <Popconfirm
                        title="确定交易？"
                        onConfirm={() => {trade(key)}}
                        okText="确定"
                        cancelText="取消"
                      >
                        <Button>交易</Button>
                      </Popconfirm>
                    }
                  </li>
                )
              })}
            </ul>
            :<Nodata _html="暂无交易"/>
        }
    </div>
  )
}
export default BlockchainExList;
