<div class="container">
  <!-- 第一行 大标题 -->
  <div class="columns">
    <div class="column">
      <section class="hero">
        <div class="hero-body" style="padding: 24px 24px">
          <p class="title" style="margin: 0">
            Stock Digitalization & Simulation Trade Platform
          </p>
          <br />
          <p class="subtitle">My Transaction Records</p>
        </div>
      </section>
    </div>
  </div>
  <!-- 第二行 账户余额情况 -->
  <div class="columns">
    <div class="column">
      <nav class="level">
        <div class="level-item has-text-centered">
          <div>
            <p class="heading">The Wallet Balance:</p>
            <p class="title">$<%= user.balances %></p>
          </div>
        </div>
        <div class="level-item has-text-centered">
          <div>
            <% if (user.tradeStatus==1) {%>
            <p class="heading" id="userInfo">Trading Status:Normal</p>
            <p class="title">Normal</p>
            <% } else { %>
            <p class="heading" id="userInfo">Trading Status:Locked</p>
            <p class="title">Locked</p>
            <% } %>
          </div>
        </div>
        <div class="level-item has-text-centered">
          <div>
            <% if (user.balances>= 25000) {%>
            <p class="heading" id="userInfo">T+0 Trading Limitation:</p>
            <p class="title">Unlimited</p>
            <% } else { %>
            <p class="heading" id="userInfo">
              T+0 Trading Limitation(For only buying):
            </p>
            <p class="title"><%= user.tradeCount %></p>

            <% } %>
          </div>
        </div>
      </nav>
    </div>
  </div>
  <!-- 第三行 持有的股票-->
  <div class="columns">
    <div class="column">
      <nav class="panel">
        <p class="panel-heading">Holding Stocks</p>
      </nav>
      <div id="holding_stock" style="display: flex">
        <table class="table" style="flex: 1">
          <thead>
            <tr>
              <th><abbr title="Position">ID</abbr></th>
              <th><abbr title="Played">Stock Symbol</abbr></th>
              <th><abbr title="Won">Price($)</abbr></th>
              <th><abbr title="Won">Current Price($)</abbr></th>
              <th><abbr title="Drawn">Volumn(Unit)</abbr></th>
              <th><abbr title="Lost">Total Revenue($)</abbr></th>
              <th><abbr title="Goals for">Total Cost($)</abbr></th>
              <th><abbr title="Goals against">Total Volumn(Unit)</abbr></th>
              <th><abbr title="Profit_rate">Profit($)</abbr></th>
              <th><abbr title="Goal difference">Time</abbr></th>
              <th><abbr title="Goal difference">Last Action</abbr></th>
              <th><abbr title="refresh">Get New Profit</abbr></th>
            </tr>
          </thead>
          <tbody>
            <!-- 第一行测试格式 -->
            <!-- 正式使用可以删掉第一行 -->
            <!-- 正式插入交易的记录 -->
            <% user.clients.forEach( function(symbol) { %>
            <%if(symbol.valid==0){ %>
            <tr>
              <td><%=symbol.id %></td>
              <td>
                <a href="/stock/detail/<%= symbol.symbolTitle %>"
                  ><%=symbol.symbolTitle %></a
                >
              </td>
              <td><%= symbol.price %></td>
              <td id="<%= symbol.id %>"></td>
              <td><%= symbol.volume %></td>
              <td><%= Math.round(symbol.totalRevenue * 100) /100 %></td>
              <td><%= Math.round(symbol.totalCost * 100 ) / 100 %></td>
              <td><%= symbol.totalVolume %></td>
              <td id="<%= symbol.symbolTitle %>"></td>
              <td><%= symbol.datetime %></td>
              <td><%= symbol.category %></td>
              <td>
                <a
                  class="button is-info"
                  onclick="getRealTimePrice('<%= symbol.symbolTitle %>', '<%= symbol.totalVolume %>', '<%= symbol.totalCost %>','<%= symbol.id %>');"
                >
                  Refresh
                </a>
              </td>
            </tr>
            <% } }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- 第四行 卖出的股票-->
  <div class="columns">
    <div class="column">
      <nav class="panel">
        <p class="panel-heading">Sold Out Stocks</p>
      </nav>
      <div id="sold_stock" style="display: flex">
        <table class="table" style="flex: 1">
          <thead>
            <tr>
              <th><abbr title="Position">ID</abbr></th>
              <th><abbr title="Played">Stock Symbol</abbr></th>
              <th><abbr title="Won">Buy Price($)</abbr></th>
              <th><abbr title="Drawn">Volumn(Unit)</abbr></th>
              <th><abbr title="Lost">Total Revenue($)</abbr></th>
              <th><abbr title="Goals for">Total Cost($)</abbr></th>
              <th><abbr title="Goals against">Total Volumn(Unit)</abbr></th>
              <th><abbr title="Profit_rate">Profit($)</abbr></th>
              <th><abbr title="Goal difference">Time</abbr></th>
              <th><abbr title="Goal difference">Last Action</abbr></th>
            </tr>
          </thead>
          <tbody>
            <!-- 第一行测试格式 -->
            <!-- 正式使用可以删掉第一行 -->
            <!-- 正式插入交易的记录 -->
            <% user.clients.forEach( function(symbol) { %>
            <%if(symbol.valid==1){ %>
            <tr>
              <td><%=symbol.id %></td>
              <td>
                <a href="/stock/detail/<%= symbol.symbolTitle %>"
                  ><%=symbol.symbolTitle %></a
                >
              </td>
              <td><%= symbol.price %></td>
              <td><%= symbol.volume %></td>
              <td><%= Math.round(symbol.totalRevenue * 100) /100 %></td>
              <td><%= Math.round(symbol.totalCost * 100 ) / 100 %></td>
              <td><%= symbol.totalVolume %></td>
              <td>
                <%= Math.round((symbol.totalRevenue - symbol.totalCost)*100) /
                100 %>
              </td>
              <td><%= symbol.datetime %></td>
              <td><%= symbol.category %></td>
            </tr>
            <% } }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
  /* 获取实时价格计算收益 收益 = （当前价格 * 持有量）- 总成本 = 当前股票价值 - 总成本 */
  async function getRealTimePrice(symbol, v, cost, symbolID) {
    var response = await fetch(
      "https://finnhub.io/api/v1/quote?symbol=" +
        symbol +
        "&token=c0ro5sv48v6voi2d8ndg"
    );

    if (response.ok) {
      let data = await response.json();
      var current_price = data.c;
      console.log("current_price: " + current_price);
      var profit_rate = Math.round((data.c * v - cost) * 100) / 100;
      var table_profit = document.getElementById(symbol);
      var obj_real_p = document.getElementById(symbolID);
      table_profit.innerHTML = profit_rate;
      obj_real_p.innerHTML = data.c;
    } else {
      alert(response.statusText);
    }
  }
</script>
