<template>
  <div>
  <div class="container">
    <div class="card left-card">
      <el-card style="margin-top: 50px;">

      </el-card>
    </div>
    <div class="card right-card">
      <el-card style="margin-top: 50px;">
        <h3>账户余额</h3>
        <h1>￥:{{ userBalanceData.userBalance || '加载中...' }}</h1>
      </el-card>
    </div>
  </div>
    <el-card style="margin-top: 50px;">
      <h3>接口列表</h3>
      <el-divider></el-divider>
<!--      <el-table  :data="tableData">-->
<!--        <el-table-column label="">-->
<!--          <template slot-scope="scope">-->
<!--            <span style="margin-left: 10px">{{ scope.row.connectorName }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
    </el-card>
  </div>

</template>

<script>
import {userBalance} from "@/api/system/user";
import {getInfo} from '@/api/login'
import {findConnectorList} from "@/api/port/port";
export default {
  name: 'Cards',
  data() {
    return {
      form:{},
      tableData:[],
      userBalanceData: {
        userBalance: '加载中...',
      },
    }
  },
  created() {
    this.fetchUserBalance();
    this.findConnectorList();
  },
  methods: {
    findConnectorList(){
      findConnectorList(this.form).then((res)=>{
        this.tableData=res.data;
      })
    },
     async fetchUserBalance() {
       try {
         const userId = localStorage.getItem('userId');
         console.log(userId)// 登录后把userId存到了localStorage
         if (!userId) {
           this.userBalanceData = { userBalance: '未登录' };
           return;
         }
         const response = await userBalance(userId);
         if (response.data ) {
           console.log(response.data)
           this.userBalanceData.userBalance = response.data;
         } else {
           this.userBalanceData.userBalance = { userBalance: '获取失败' };
         }
       } catch (error) {
         this.userBalanceData = { userBalance: '获取失败' };
         console.error('Error fetching user balance:', error);
       }
     },
 }
};
</script>

<style scoped>
.container {
  display: flex;
}

.card {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

.left-card {
  background-color: #f1f1f1;
}

.right-card {
  background-color: #e1e1e1;
}
</style>
