<template>
  <view class="wallet-page container-with-lines full-height-with-titile">
    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="balance-header">
        <view class="balance-label">
			<view style="display: flex; align-items: center; font-size: 16px;">
				<view>e</view>
				<view>-KIP</view>
			</view>
        </view>
        <view class="safety-tag">
          <uni-icons type="info-filled" size="14" color="#FF9500"></uni-icons>
          <text>{{languageData.account.quota + '(' + quota +')'}}</text>
          <!-- <text>{{languageData.wallet.moneySafe}}</text> -->
        </view>
      </view>
      <view class="balance-amount">
		  <view style="font-size: 29px;">{{accountId}}</view>
		  <view class="balance-label" style="margin-top: 20px;">
		    <text>{{languageData.wallet.availableBalance}} (KIP)</text>
		    <uni-icons :type="showDetail ? 'eye-filled' : 'eye-slash-filled'"  
		     @click="showDetail = !showDetail" size="20" color="#333333"></uni-icons>
		  </view>
        <view style="">{{ showDetail ? formatNumber(userAmount) : '*****' }}</view>
      </view>
      <view class="action-buttons">
        <button class="withdraw-btn" @click.stop="navigatoCashOut()">{{languageData.wallet.withdrawal}}</button>
        <button class="recharge-btn" @click.stop="navigatoTopUp()">{{languageData.wallet.toUp}}</button>
      </view>
    </view>
    <!-- 交易记录 -->
	<view class="list-background">
		<view class="transaction-list">
		  <view class="list-header">
		    <text>{{languageData.wallet.balanceChangeRecord}}</text>
		    <view class="view-all" @click.stop="navigatoRecord">
		      <text>{{languageData.wallet.all}}</text>
		      <uni-icons type="right" size="14" color="#999999"></uni-icons>
		    </view>
		  </view>
		  
			<scroll-view class="message-list" scroll-y :refresher-triggered="triggered" @scrolltolower="onLoadMore">
			  <view class="list-main" v-for="(item, index) in recordList" :key="index">
				<view class="transaction-item">
				  <view class="transaction-info">
					<text class="transaction-type">{{ item.timeStr }}</text>
					<text class="transaction-remark ellipsis-200">{{ item.remark }}</text>
					<text class="transaction-time">{{ item.time }}</text>
				  </view>
				  <view class="transaction-amount padding-right-xs">
					<text class="amount positive" :class="{'negative' : item.changeBalance < 0 }">
						{{ item.changeBalance > 0 ? '+' : '' }}{{ item.changeBalance }}
					</text>
					<view class="amount2">
						<text class="balance">
							{{languageData.wallet.balance}}：{{item.currentBalance == '' || item.currentBalance == null ? '-': formatNumber(item.currentBalance)}}
						</text>
					</view>
				  </view>
				</view>
			  </view>
			</scroll-view>
			
		</view>
	</view>

  </view>
</template>

<script>
import { getRecordList,getAmount } from '@/api/account/transactionRecord.js'

export default {
  data() {
    return {
		accountId: '',
		languageData:{},
		params:{
			id:this.$store.state.user.userId,
			userId:this.$store.state.user.userId,
			pageNum: 1,
			pageSize: 10,
			phonenumber:'',
			key:'',
			type:'1',
		},
		showDetail: false,
		triggered: false,
		userAmount:5322200,
		quota: 0,
		recordList:[
			{
			  senderName: 'senderName1',
			  senderAccount: '22540212',
			  changeBalance: '250000',
			  time: '2025-01-22 21:05:33',
			  title:'',
			  remark:'',
			  currentBalance:''
			},
			{
			  senderName: 'senderName2',
			  senderAccount: '22540212',
			  changeBalance: '-250000',
			  time: '2025-01-24 21:05:33',
			  title:'',
			  remark:'',
			  currentBalance:''
			}
		]
    }
  },
  onLoad() {
	//TODO
	if(false)
		this.loadRecordList();
	this.selectAmount();
	this.languageData = this.$languageData;
	uni.setNavigationBarTitle({
		title: this.$languageData.navBar.wallet
	});
  },
  methods: {
	navigatoCashOut(){
		this.$tab.navigateTo('/pages/account/withdrawDeposit')
		
	},
	navigatoTopUp(){
		this.$tab.navigateTo('/pages/account/topUp')
		
	},
	navigatoRecord(){
		this.$tab.navigateTo('/pages/account/transactionRecord')
	},
	loadRecordList(){
		getRecordList(this.params).then(res=>{
			this.recordList = res.rows
		})
	},
	selectAmount(){
		getAmount(this.params.userId).then(res=>{
			this.userAmount = res.data.accountAmount
			this.accountId = res.data.accountId
			this.quota = res.data.walletLimit || 0
		})
	},
    onLoadMore() {
    	// console.log("----懒加载----")
		this.params.pageSize = this.params.pageSize + 10
		this.loadRecordList();
    },
  }
}
</script>


<style lang="scss" scoped>
  page {
    height: 100%;
  }
  .amount2{
	  display: flex;
	  align-items: flex-start;
  }
  .wallet-page {
    // min-height: 100%;
    // background: linear-gradient(180deg, #FEE1A8 0%, #f9f8f8 30%);
    // background-color: #2C53CA;
	// background-image: url('/static/svgs/lines.svg');
	// background-size: 200%;
	// background-position: center;
  }
  
  .list-background{
	  background:rgba(248, 247, 246, 0);
	  // min-height: 500px;
  }
  
  .balance-card {
	margin-bottom: 20rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
    padding: 32rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }
  
  .balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .balance-label {
    display: flex;
    align-items: center;
    gap: 8rpx;
    font-size: 14px;
    color: #666666;
  }
  
  .safety-tag {
    display: flex;
    align-items: center;
    gap: 4rpx;
    font-size: 12px;
    color: #FF9500;
  }
  
  .balance-amount {
    margin: 32rpx 0;
    font-size: 76rpx;
    font-weight: 600;
    color: #333333;
  }
  
  .action-buttons {
    display: flex;
    gap: 100rpx;
  }
  
  .withdraw-btn,
  .recharge-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 8rpx;
    font-size: 14px;
  }
  
  .withdraw-btn {
    background: #F5F5F5;
    color: #333333;
  }
  
  .recharge-btn {
    background: #FFE4BA;
    color: #333333;
  }
  
  .transaction-list {
    margin: 32rpx;
    padding: 32rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	min-height: 270px;
  }
  
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    font-size: 30rpx;
	font-weight: 600;
    margin-top: -16rpx;
	border-bottom: 1px solid #F5F5F5;
  }
  
  .view-all {
    display: flex;
    align-items: center;
    color: #999999;
  }
  
  .transaction-item {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 1px solid #eaeaea;
  }
  
  // .transaction-item:last-child {
  //   border-bottom: none;
  // }
  
  .transaction-info {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }
  
  .transaction-type {
    font-size: 30rpx;
	font-weight: bold;
    color: #333333;
  }
  
  .transaction-time {
    font-size: 24rpx;
    color: #999999;
  }
  
  .transaction-remark {
	// width: 85%;
    font-size: 28rpx;
    color: #999999;
  }
  
  .transaction-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8rpx;
  }
  
  .amount {
    font-size: 14px;
    font-weight: 500;
  }
  
  .positive {
    color: #07C160;
  }
  
  .negative {
    color: #c73d3d;
  }
  
  .balance {
    font-size: 12px;
    color: #999999;
	float: left;
  }
</style>
