<template>
	<view class="container container-with-lines full-height-with-titile">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<text class="nav-title">{{this.$languageData.settings.transRecords}}</text>
		</view>

		<!-- 搜索过滤区 -->
		<view class="search-section">
			<view class="search-wrapper">
				<uni-icons type="search" size="16" color="#666"></uni-icons>
				<input class="search-input" type="text" v-model="params.key"
					:placeholder="this.$languageData.settings.tranObjPh" @input="handleSearch" />
			</view>
			<view class="date-picker">
				<picker mode="date" fields="month" :value="params.key2" @change="handleDateChange">
					<view class="picker-text">
						<text>{{ params.key2 || $languageData.settings.chooseMonth}}</text>
						<uni-icons type="calendar" size="16" color="#666"></uni-icons>
					</view>
				</picker>
			</view>
			<view style="display: flex; justify-content: space-around; margin-top: 15px;">
				<view>
					<button @click="onRefresh" style="background-color: #2C53CA; color: #fff; font-size: 15px;
				height: 58rpx; line-height: 58rpx; border-radius: 14rpx;" type="primary">
						{{$languageData.settings.query}}
					</button>
				</view>
				<view>
					<button @click="downloadEmptyFile" style="background-color: #2C53CA; color: #fff; font-size: 15px;
		  		height: 58rpx; line-height: 58rpx; border-radius: 14rpx;" type="primary">
						{{$languageData.settings.export}}
					</button>
				</view>
			</view>
		</view>

		<!-- 交易记录列表 -->
		<scroll-view class="record-list" scroll-y @scrolltolower="loadMore" refresher-enabled
			:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
			<view v-if="recordList.length > 0">
				<view v-for="(item, index) in [...recordList]" :key="index" class="record-item" @tap="viewDetail(item)">
					<view class="record-header">
						<!-- <text class="record-id">{{ item.senderName }}</text> -->
						<text class="record-id">{{ item.remark }}</text>
						<view class="record-amount">
							<text class="amount-value" :style="{ color: getColor(item.changeBalance) }">
								{{item.changeBalance>0?'+':''}}{{ item.changeBalance }} (KIP)
							</text>
						</view>
					</view>
					<view class="record-content">
						<text class="record-time">{{ item.time }}</text>
						<uni-tag :inverted="true" :text="item.typeStr" />
						<!-- <uni-tag :inverted="true" :text="item.typeStr" :type="getStatusText(item.type)" /> -->
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else class="empty-state">
				<uni-icons type="info" size="64" color="#999"></uni-icons>
				<text class="empty-text">{{this.$languageData.settings.bizEmpty}}</text>
			</view>

			<!-- 加载状态 -->
			<view v-if="isLoading && recordList.length > 0" class="loading-more">
				<text>{{this.$languageData.settings.loading}}</text>
			</view>
		</scroll-view>

		<loading ref="loading" :custom="false" :shadeClick="false" :type="1" />
	</view>
</template>


<script>
	import {
		getRecordList
	} from '@/api/account/transactionRecord.js'
	import {
		getCurrentDate
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				searchText: '',
				selectedDate: '',
				recordList: [{
						remark: 'salary',
						changeBalance: 4106.32,
						time: "2025/05/01",
						typeStr: this.$languageData.settings.reci
					},
					{remark: 'McDonald\'s', changeBalance: -106.32, time: "2025/05/11", typeStr: this.$languageData.settings.pay},
				],
				isLoading: false,
				isRefreshing: false,
				page: 1,
				params: {
					id: this.$store.state.user.userId,
					userId: this.$store.state.user.userId,
					pageNum: 1,
					pageSize: 10,
					phonenumber: '',
					key: '',
					key2: getCurrentDate(), //获取当前年月,
					type: "1"
				},
			}
		},
		onLoad(item) {
			console.log("item---", item)
			// if(JSON.stringify(item) != "{}"){
			// 	this.params.type = item.type
			// 	this.params.id = item.id
			// }
			if (item.data) {
				try {
					let jsonString = decodeURIComponent(item.data); // 解码 JSON 字符串
					let obj = JSON.parse(jsonString); // 解析为 JSON 对象
					this.params.type = obj.type
					this.params.id = obj.id
					console.log("this.params：", this.params);
				} catch (error) {
					console.error("解析 JSON 失败：", error);
				}
			}
			this.selectRecordList();
		},
		methods: {
			downloadEmptyFile() {
				this.$modal.confirm(this.$languageData.tmp.exportCfm, false)
				// 创建一个空的Blob对象，类型为text/plain
				const blob = new Blob([''], {
					type: 'text/plain;charset=utf-8'
				});

				// 创建隐藏的可下载链接
				const link = document.createElement('a');
				link.style.display = 'none';
				link.href = URL.createObjectURL(blob);
				link.download = 'records.pdf'; // 下载文件名

				// 将链接元素添加到DOM中
				document.body.appendChild(link);

				// 触发点击事件，开始下载
				link.click();

				// 下载完成后移除链接元素，并释放资源
				document.body.removeChild(link);
				URL.revokeObjectURL(link.href);
			},
			getColor(value) {
				if (value > 0) {
					return "green"; // 大于0时字体颜色为绿色
				} else if (value < 0) {
					return "red"; // 小于0时字体颜色为红色
				} else {
					return "black"; // 等于0时字体颜色为黑色（可选）
				}
			},
			selectRecordList() {
				if (false) {
					this.$nextTick(() => {
						this.$refs.loading.open();
					})
					getRecordList(this.params).then(res => {
						this.recordList = res.rows
						setTimeout(() => {
							this.$refs.loading.close();
						}, 700)
					}).catch(e => {
						this.$refs.loading.close();
					})
				}
			},
			mockrecordList() {
				const statuses = ['success', 'pending', 'failed']
				return Array(10).fill(0).map(function(_, index) {
					return {
						sendName: 'TX' + Date.now() + index,
						time: '2024-01-15 14:30:00',
						amount: Math.floor(Math.random() * 10000),
						status: statuses[Math.floor(Math.random() * statuses.length)]
					}
				})
			},
			handleSearch() {
				// 实现搜索逻辑
				this.selectRecordList()
			},
			handleDateChange(e) {
				this.params.key2 = e.detail.value
				// console.log("this.selectedDate---",this.selectedDate)
				// 实现日期筛选逻辑
				this.selectRecordList()
			},
			// 加载更多
			loadMore() {
				if (this.isLoading) return
				this.isLoading = true
				var self = this
				setTimeout(function() {
					self.params.pageSize += 10
					self.selectRecordList()
					self.isLoading = false
				}, 1000)
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				var self = this
				setTimeout(function() {
					self.params.pageSize = 10
					self.selectRecordList()
					self.isRefreshing = false
				}, 1000)
			},
			// 查看明细
			viewDetail(item) {
				// uni.showToast({
				// 	title: '查看订单：' + item.id,
				// 	icon: 'none'
				// })
			},
			// 状态翻译
			getStatusText(status) {
				var statusMap = {
					'BT+': 'primary',
					'BP+': 'error',
					'BC+': 'warning',
					'BR+': 'success',
					'BT-': 'primary',
					'BP-': 'error',
					'BC-': 'warning',
					'BR-': 'success'
				}
				return statusMap[status]
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.transactionRecord
			});
		},
		watch: {
			languageData() {
				uni.setNavigationBarTitle({
					title: this.$languageData.navBar.transactionRecord
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.container {
		padding-top: 10px;
		display: flex;
		flex-direction: column;

	}

	.nav-bar {
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		// background-color: #ffffff;

		width: 93%;
		margin: 0 auto;

		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 10px 10px 0 0;
		flex-shrink: 0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
	}

	.nav-title {
		font-size: 18px;
		font-weight: 600;
		color: #1a1a1a;
	}

	.search-section {
		width: 93%;
		margin: 0 auto;
		padding: 24rpx 32rpx;
		// background-color: #ffffff;
		border-radius: 0 0 10px 10px;
		background-color: rgba(255, 255, 255, 0.7);
		border-bottom: 1px solid #f0f0f0;
		flex-shrink: 0;
	}

	.search-wrapper {
		display: flex;
		align-items: center;
		background-color: #f5f7fa;
		padding: 16rpx 24rpx;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.02);
	}

	.search-input {
		flex: 1;
		margin-left: 16rpx;
		font-size: 14px;
	}

	.date-picker {
		width: 100%;
	}

	.picker-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx;
		font-size: 14px;
		color: #666666;
		background-color: #f5f7fa;
		border-radius: 12rpx;
		box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.02);
	}

	.record-list {
		width: 93%;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.7);
		margin-top: 15px;
		border-radius: 10px;
		// height: 100%;
		flex: 1;
		overflow: auto;
		padding: 24rpx 32rpx;
	}

	.record-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
		transition: transform 0.2s ease;
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.record-id {
		font-size: 30rpx;
		font-weight: bold;
		color: #1a1a1a;
	}

	.record-time {
		font-size: 12px;
		color: #999999;
	}

	.record-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.record-amount {
		display: flex;
		align-items: baseline;
	}

	.amount-label {
		font-size: 14px;
		color: #666666;
		margin-right: 8rpx;
	}

	.amount-value {
		font-size: 30rpx;
		font-weight: 600;
		color: #1a1a1a;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	}

	.record-status {
		font-size: 14px;
		padding: 4rpx 16rpx;
		border-radius: 4rpx;
	}

	.status-BT {
		color: #15803d;
		background-color: #dcfce7;
		border-radius: 6rpx;
		font-weight: 500;
	}

	.status-BP {
		color: #9a3412;
		background-color: #ffedd5;
		border-radius: 6rpx;
		font-weight: 500;
	}

	.status-BC {
		color: #be123c;
		background-color: #ffe4e6;
		border-radius: 6rpx;
		font-weight: 500;
	}

	.status-BR {
		color: #be123c;
		background-color: #ffe4e6;
		border-radius: 6rpx;
		font-weight: 500;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 160rpx 0;
	}

	.empty-text {
		margin-top: 32rpx;
		font-size: 15px;
		color: #666666;
		letter-spacing: 0.5px;
	}

	.loading-more {
		text-align: center;
		padding: 24rpx 0;
		color: #999999;
		font-size: 14px;
	}
</style>