<template>
	<view class="container container-with-lines full-height-with-titile">
		<!-- 背景 -->
		<view class="top-color">
			<!-- 搜索框 -->
			<view v-show="false" class="search-wrapper theme-gradient">
				<view class="search-box">
					<uni-icons type="search" size="16" color="#999" />
					<input type="text" :placeholder="languageData.account.searchName" placeholder-class="placeholder"
						@input="handleSearch" v-model="params.phonenumber" />
				</view>
			</view>
			<!-- 快捷功能区 -->
			<uni-grid v-show="false" :column="2" style="padding: 20px;">
				<uni-grid-item style="height: 50px;" v-for="(item, index) in quickActionList">
					<uni-icons style="height: 20%;" :type="item.icon" size="24" color="#333" />
					<text style="text-align: center; height: 80%;">{{item.name}}</text>
				</uni-grid-item>
			</uni-grid>
			<u-row v-show="!false" class="quick-actions-row">
				<u-col style="height: 100%;" :span="6" v-for="(item, index) in quickActionList" :key="index"
					@click="navigate(item.path)">
					<uni-icons style="height: 20%;" :type="item.icon" size="34" color="#333" />
					<text style="text-align: center; height: 80%; margin-top: 5px;">{{item.name}}</text>
				</u-col>
			</u-row>
			<view v-show="false" class="quick-actions">
				<view class="action-item" v-for="(item, index) in quickActionList" :key="index"
					@click.stop="navigate(item.path)">
					<uni-icons :type="item.icon" size="24" color="#333" />
					<text style="text-align: center;">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 最近联系人 -->
		<view class="recent-contacts">
			<view class="tabs">
				<view class="tab-item" :class="{ active: currentTab === 'recent' }" @click="switchTab('recent')">
					<text>{{languageData.account.recently}}</text>
				</view>
				<view class="tab-item" :class="{ active: currentTab === 'contacts' }" @click="switchTab('contacts')">
					<text>{{languageData.account.linkman}}</text>
				</view>
				<view class="show-detail" @click="toggleDetail">
					<uni-icons :type="showDetail ? 'eye-filled' : 'eye-slash-filled'" size="16" color="#999" />
					<text class="show-detail-text">
						{{ showDetail ? languageData.account.concealDetail : languageData.account.showDetail }}
					</text>
				</view>
			</view>
			<view v-if="currentTab === 'recent'">
				<view class="contact-list">
					<scroll-view class="message-list" scroll-y :refresher-triggered="triggered">
						<view class="contact-item" v-for="(item, index) in contactList" :key="index">
							<view class="contact-avatar">
								<uni-icons type="person" size="32" color="#999" />
							</view>
							<view class="contact-info">
								<view class="contact-main">
									<text class="contact-name">
									<!-- {{ item.senderName }}({{ showDetail ? item.senderAccount : '*****' }}) -->
									{{ item.remark }}
									</text>
									<text class="contact-amount">{{ showDetail ? item.changeBalance : '*****' }}KIP</text>
								</view>
								<!-- <text class="contact-time">{{ item.remark }}</text> -->
								<view class="">
									<text class="contact-time">{{ item.timeStr }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-else class="contact-list">
				<scroll-view class="message-list" scroll-y :refresher-triggered="triggered"
					@scrolltolower="onLoadMore">
					<view class="contact-item" v-for="(item, index) in phoneContacts" :key="index" @tap="toolBtn(item)">
						<view class="contact-avatar">
							<uni-icons type="person" size="32" color="#999" />
						</view>
						<view class="contact-info">
							<view class="contact-main">
								<text class="contact-name">{{ item.nickName }}</text>
							</view>
							<text class="contact-time">{{ showDetail ? item.phonenumber : '*****' }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="">
			<loading ref="loading" :custom="false" :shadeClick="false" :type="1" />
		</view>
	</view>
</template>


<script>
	import {
		getUserProfile
	} from '@/api/account/friend.js';
	import {
		getTransRecord
	} from '@/api/account/transactionRecord.js';
	import {
		genPayCode
	} from '@/api/home/qrcode.js'
	import {
		getUserAccInfo
	} from '@/api/login.js'
	
	export default {
		data() {
			return {
				payParam: {
					toId: null,
					toAccount: null
				},
				showDetail: false,
				triggered: false,
				currentTab: 'recent',
				quickActionList: [
					{
						name: this.$t('navbar.center.trans2card'),
						icon: 'wallet',
						path: 'transfer2card'
					},
					{
						name: this.$t('navbar.center.trans2usr'),
						icon: 'person',
						path: 'transfer2usr'
					},
					// {
					// 	name: this.$languageData.settings.trans,
					// 	icon: 'undo',
					// 	path: 'Transfer'
					// },
					// {
					// 	name: this.$languageData.settings.transSched,
					// 	icon: 'calendar',
					// 	path: 'reservationTransfer'
					// },
					// {
					// 	name: this.$languageData.settings.transMulti,
					// 	icon: 'staff',
					// 	path: 'multiTransfer'
					// },
					// {
					// 	name: this.$languageData.settings.reciAvg,
					// 	icon: 'wallet',
					// 	path: 'aaReceipt'
					// }
				],
				contactList: [],
				phoneContacts: [],
				languageData: {},
				params: {
					id: this.$store.state.user.userId,
					userId: this.$store.state.user.userId,
					pageNum: 1,
					pageSize: 10,
					phonenumber: '',
					key: '',
					type:'1'
				}
			}
		},
		onLoad() {
			// 调用查询方法
			this.getUserInfo();
			this.handleSearch();
		},
		created() {
			this.languageData = this.$languageData;
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.transfer
			});
		},
		watch:{
			languageData(){
				uni.setNavigationBarTitle({
					title: this.$languageData.navBar.transfer
				});
			}
		},
		methods: {
			handleSearch(){
				// this.$refs.loading.open();
				this.selectContacts();
				this.selectTransRecord();
			},
			onLoadMore() {
				this.params.pageSize = this.params.pageSize + 10
				getUserProfile(this.params).then(res => {
					this.phoneContacts = res.rows
				})
			},
			selectContacts() {
				//TODO
				if(false){
					// this.$refs.loading.open();
					getUserProfile(this.params).then(res => {
						setTimeout(()=>{
							this.$refs.loading.close();
						},500)
						this.phoneContacts = res.rows
					}).catch(e=>{
						setTimeout(()=>{
							this.$refs.loading.close();
						},500)
					})
				}
				this.$refs.loading.close();
			},
			selectTransRecord() {
				this.params.key = this.params.phonenumber
				this.$refs.loading.open();
				getTransRecord(this.params).then(res => {
					setTimeout(()=>{
						this.$refs.loading.close();
					},500)
					this.contactList = res.data
				}).catch(e=>{
					setTimeout(()=>{
						this.$refs.loading.close();
					},500)
				})
			},
			toggleDetail() {
				this.showDetail = !this.showDetail
			},
			switchTab(tab) {
				this.$refs.loading.open();
				if(tab=='recent'){
					this.selectTransRecord();
				}else{
					this.selectContacts();
				}
				this.currentTab = tab
			},
			getUserInfo() {
				getUserAccInfo().then(res => {
					if (res.code == 200) {
						//来源id
						this.payParam.toId = res.data.userId;
						//来源账号
						this.payParam.toAccount = res.data.accountId;
						this.genPayCode();
					} else {
						uni.showToast({
							title: "获取用户信息异常",
							icon: "none",
						});
					}
				})
			},
			//生成付款码
			genPayCode() {
				genPayCode(JSON.stringify(this.payParam)).then(res => {
					if (res.code == 200) {
						//付款码code
						this.payCode = res.data;
					}
				})
			},
			toolBtn(item) {
				//this.payParam.toId; 当前付款人id
				uni.navigateTo({
					url: "/pages/account/setAmount?type=TRANSFER_MONEY" + '&' + 'merchantId=' + this.payParam.toId + '&' 
					+ 'fromAccount=' + this.payCode + '&' + 'userId=' + item.userId + '&' + 'phonenumber=' + item.phonenumber
				})
			},
			navigate(page) {
				uni.navigateTo({
					url: "/pages/account/" + page
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.message-list {
		flex: 1;
		overflow: auto;
	}

	.top-color {
		// background: linear-gradient(to bottom, #2C54D0, #eff7f9);
	}

	.theme-gradient {
		padding: 20rpx 32rpx 40rpx;
	}

	.container {
		// height: 100vh;
		display: flex;
		flex-direction: column;		
		// background-color: #2C53CA;
		// background-image: url('/static/svgs/lines.svg');
		// background-size: 350%;
		// background-position: center;
	}

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

	.nav-left {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		color: #fff;
	}

	.search-box {
		height: 72rpx;
		background: #fff;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
	}

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

	.placeholder {
		color: #999;
		font-size: 14px;
	}

	.quick-actions {
		margin: 0 32rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.quick-actions-row {
		margin: 0 32rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.action-item text {
		font-size: 12px;
		color: #333;
	}

	.recent-contacts {
		flex: 1;
		margin: 20rpx 32rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.recent-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 32rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.tabs {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
		padding: 0 32rpx;
		height: 88rpx;
	}

	.show-detail {
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: #999;
	}

	.tab-item {
		height: 88rpx;
		display: flex;
		align-items: center;
		font-size: 16px;
		color: #999;
		position: relative;
		margin-right: 48rpx;
	}

	.tab-item.active {
		color: #2D54D0;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
		background-color: #2D54D0;
		border-radius: 2rpx;
	}

	.show-detail {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #999;
	}

	.show-detail-text {
		margin-left: 8rpx;
	}

	.contact-list {
		padding: 0 32rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.contact-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contact-info {
		flex: 1;
		margin-left: 24rpx;
	}

	.contact-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.contact-name {
		font-size: 14px;
		color: #333;
	}

	.contact-amount {
		font-size: 14px;
		color: #333;
	}

	.contact-time {
		font-size: 12px;
		color: #999;
	}
</style>