<template>
	<view class="container">
		<!-- 禁用弹窗 -->
		 <restrictedTip ref="restrictedTip"/>
		
		<view class="wapperBox">
			<view class="header">
				<text class="title">薪资<text class="highlight">单</text></text>
				<view class="year-badge" @click="showTime1=true">
					<CommonTimePicker :timeData="startDate" :visible="showTime1" @confirmDate="changeStartTime"
						@closeTime="showTime1=false" :showMonth="false" iconColor="#2A36AE"/>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list" v-if="list.length>0">
				<view class="salary-wrapper" v-for="(item, index) in list" :key="item.id">
					<!-- 条目 -->
					<view class="salary-item">
						<view class="item-left" @click="toggleDetail(index)">
							<view class="item-month">
								{{ item.yearMonth }}
								<text class="tag">{{ item.statusName }}</text>
								<text v-if="!item.expanded" class="iconfont icon-xiajiantou iconStyle" ></text>
								<text v-if="item.expanded" class="iconfont icon-shangjiantou iconStyle" ></text>
							</view>

						</view>
						<view class="item-amount">
							<!-- <text class="label">{{ item.statusName }}</text> -->
							<view class="money" @click="showMoney(index)">
								<text v-if="item.mask" class="mask-text">*****</text>
								<text v-else class="real-text">¥ {{ item.paidAmount.toFixed(2) }}</text>
							</view>
						</view>
					</view>

					<!-- 明细卡片（紧跟在对应条目下方） -->
					<view class="detail-card" :class="{ active: item.expanded }" v-if="item.expanded">
						<view class="detail-header">
							<text class="total-label">🌟 基础信息</text>
							<!-- <text class="total-amount">¥{{ item.detail.grossAmount }} <text class="unit">元</text></text> -->
						</view>
						<!-- <view style="border-top:2px solid #dce3ed; margin:0px 0;"></view> -->
						<view class="detail-grid">

							<view class="grid-row">
								<text class="label">应发金额</text>
								<text class="value">{{ item.detail.grossAmount.toFixed(2) }} (HKD)</text>
							</view>
							<view class="grid-row">
								<text class="label">MPF事项金额</text>
								<text class="value">{{ item.detail.mpfAmount.toFixed(2) }} (HKD)</text>
							</view>
							<view class="grid-row">
								<text class="label">其他调整总金额</text>
								<text class="value">{{ item.detail.otherAmount.toFixed(2) }} (HKD)</text>
							</view>
							<view class="grid-row">
								<text class="label">实发金额</text>
								<text class="value">{{ item.detail.paidAmount.toFixed(2) }}(HKD)</text>
							</view>
							<view class="grid-row">
								<text class="label">备注</text>
								<text class="value txtValue">{{ item.detail.remark || '--'}}</text>
							</view>
							<view class="grid-row">
								<text class="label">其他调整备注</text>
								<text class="value txtValue">{{ item.detail.otherRemark || '--' }}</text>
							</view>
							<view class="grid-row" style="margin-bottom: 10rpx;">
								<text class="label">取消理由</text>
								<text class="value txtValue">{{ item.detail.cancelRemark || '--' }}</text>
							</view>
							<!-- <view class="grid-row" v-for="(sub, idx) in item.detail.earningItems" :key="'e-'+idx">
								<text class="label">└ {{ sub.name }}</text>
								<text class="value" :class="sub.amount >= 0 ? 'positive' : 'negative'">
									{{ sub.amount >= 0 ? '+' : '' }}¥{{ Math.abs(sub.amount).toFixed(2) }}
								</text>
							</view> -->

							<!-- <view class="grid-row" v-for="(sub, idx) in item.detail.deductionItems" :key="'d-'+idx">
								<text class="label">└ {{ sub.name }}</text>
								<text class="value negative">-¥{{ Math.abs(sub.amount).toFixed(2) }}</text>
							</view> -->
						</view>
						<view class="detail-header">
							<text class="total-label">🌟 打款明细</text>
							<!-- <text class="total-amount">¥{{ item.detail.grossAmount }} <text class="unit">元</text></text> -->
						</view>
						<!-- <view style="border-top:2px solid #dce3ed; margin:0px 0;"></view> -->
						<view class="detail-grid"
							v-for="(bank,index) in item.detail.apiSalaryRemittanceFzDTO.salaryRemittanceDTOList"
							:key="bank.salaryRemittanceBizId">
							<view class="detail-title">
								打款信息{{index+1}}
							</view>
							<view class="grid-row">
								<text class="label">收款银行</text>
								<text class="value txtValue">{{ bank.bankName}}</text>
							</view>
							<view class="grid-row">
								<text class="label">账户尾号</text>
								<text class="value">{{ bank.accountEndNo}}</text>
							</view>
							<view class="grid-row">
								<text class="label">发放金额</text>
								<text class="value">{{ bank.amount.toFixed(2) }} <text v-if="bank.currency">({{bank.currency}}) </text></text>
							</view>
							<view class="grid-row">
								<text class="label">币种</text>
								<text class="value">{{ bank.currency}}</text>
							</view>
							<view class="grid-row">
								<text class="label">汇率</text>
								<text class="value">{{ bank.exchangeRate.toFixed(4)}}</text>
							</view>
							<view class="grid-row">
								<text class="label">备注</text>
								<text class="value txtValue">{{ bank.remark || '--'}}</text>
							</view>


						</view>

					</view>
				</view>
			</view>
			<view class="emptyBox" v-else>
				暂无数据
			</view>
			<!-- <view class="footer-note">
				⚡ 点击卡片展开明细 · 点击“验证身份”查看金额
			</view> -->
		</view>
		<!-- 头部 -->

	</view>
</template>

<script>
	import dataHandling from "@/util/dataHandling";
	import api from "@/api/api";
	import { initJssdkShare, setWechatShare } from '@/util/fiveshare';
	import {fmdata} from '@/util/currentDate.js'
	import CommonTimePicker from '@/components/commonTimePicker/commonTimePicker.vue';
	import restrictedTip from '@/components/commonPopup/restrictedTip.vue';
	
	export default {
		components:{
			CommonTimePicker,
			restrictedTip,
		},
		data() {
			return {
				userInfo: {},
				list: [],
				timerMap: {},
				salaryDetailInfo: {},
				showTime1: false,
				startDate: { year: dataHandling.getDateParts().year},
				queryDate: fmdata(new Date(), 'Y'),
				maxDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
			};
		},
		onShow() {
			if (uni.getStorageSync('cffp_userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
			}
			this.getSalaryData()
			if(uni.getStorageSync('loginType')=='codelogin'){
				this.queryInfo()
			}
			// #ifdef H5
			initJssdkShare(() => {
				setWechatShare();
			}, window.location.href);
			// #endif
			console.log('mpcffp', this.mpCffp);
		},
		methods: {
			changeStartTime(obj) {
				this.startDate = obj
				this.queryDate = `${obj.year}`
				this.getSalaryData()
				this.showTime1 = false
			},
			showMoney(index) {
				this.list[index].mask = !this.list[index].mask;
			},
			// 查询薪资单列表
			getSalaryData() {
				let params = {
					mobile: this.userInfo.mobile,
					year: this.queryDate,
				}
				api.salaryCondition(params).then(res => {
					if (res['code'] == 200) {
						let data = res.data.conditionResponseList
						this.list = data.map(item => {
							return {
								...item,
								mask: true,
								expanded: false
							}
						})

					} else {
						uni.showToast({
							title: res['msg'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			async toggleDetail(index) {
				const item = this.list[index];
				const response = await api.salaryDetail(item.salaryBizId)
				try {
					this.salaryDetailInfo = response.data
					console.log('信息详情', this.salaryDetailInfo);
				} catch (error) {
					//TODO handle the exception
				}
				item.detail = this.salaryDetailInfo
				if (item.expanded) {
					item.expanded = false;
					item.mask = true;
					item.verified = false;
					if (this.timerMap[index]) {
						clearTimeout(this.timerMap[index]);
						delete this.timerMap[index];
					}
				} else {
					// 关闭其他所有卡片
					this.list.forEach((it, i) => {
						if (i !== index && it.expanded) {
							it.expanded = false;
							it.mask = true;
							it.verified = false;
							if (this.timerMap[i]) {
								clearTimeout(this.timerMap[i]);
								delete this.timerMap[i];
							}
						}
					});
					item.expanded = true;
					// 滚动到当前卡片位置
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						// 由于现在每个 wrapper 内都有一个 detail-card，我们通过索引找到对应的 detail-card
						query.selectAll('.detail-card').boundingClientRect(rects => {
							if (rects && rects[index]) {
								uni.pageScrollTo({
									scrollTop: rects[index].top - 80,
									duration: 300
								});
							}
						}).exec();
					});
				}
			},
			toggleMask(index) {
				const item = this.list[index];
				if (item.mask) {
					uni.showModal({
						title: '安全验证',
						content: '🔐 模拟人脸/指纹验证，点击“确定”通过验证',
						confirmText: '确定',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								item.mask = false;
								item.verified = true;
								if (this.timerMap[index]) {
									clearTimeout(this.timerMap[index]);
								}
								this.timerMap[index] = setTimeout(() => {
									item.verified = false;
									delete this.timerMap[index];
								}, 4000);
							}
						}
					});
				} else {
					item.mask = true;
					item.verified = false;
					if (this.timerMap[index]) {
						clearTimeout(this.timerMap[index]);
						delete this.timerMap[index];
					}
				}
			},
			queryInfo() {
				api.queryInfo({userId:uni.getStorageSync('cffp_userId')}).then(res=>{
					// 保存用户得个人信息
					if (res['success']) {
						delete res.data.commonResult
						
						const cffp_userInfo = {
							...res.data
						}
						// 账号禁用用户
						if(res.data.userIsActive&&res.data.userIsActive==2){
							this.$refs.restrictedTip.open()
							uni.setStorageSync('userIsActive',String(res.data.userIsActive))
							return
						}
						if(res.data.userIsActive&&res.data.userIsActive!=2){
							this.$refs.restrictedTip.close()
							uni.removeStorageSync('userIsActive')
						}
						
						uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo));
						uni.setStorageSync('user_mobile', res.data.mobile)
						
					}
					
				})
			},
		},
		beforeDestroy() {
			Object.values(this.timerMap).forEach(timer => clearTimeout(timer));
		}
	};
</script>

<style scoped>
	/* 全局样式 */
	.container {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		background-color: #fff;
		min-height: 100vh;
		padding: 16px 16px 40px;
		box-sizing: border-box;
	}

	/* .wapperBox{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 15rpx;
} */
	/* 头部 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-top: 10rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: 800;
		color: #0b1b32;
		letter-spacing: -0.5px;
	}

	.highlight {
		color: #2A36AE;
	}

	.year-badge {
		background: #eef3fe;
		color: #2A36AE;
		font-weight: 600;
		font-size: 28rpx;
		padding: 15rpx 40rpx;
		border-radius: 40rpx;
	}

	/* 每个月份的包裹容器 */
	.salary-wrapper {
		margin-bottom: 15rpx;
	}

	/* 列表项 */
	.salary-item {
		background: #ffffff;
		border-radius: 20px;
		padding: 16px 18px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
		border: 1px solid #edf2f7;
		display: flex;
		justify-content: space-between;
		align-items: center;
		transition: all 0.2s;
		cursor: pointer;
	}

	.salary-item:active {
		background: #f8faff;
		transform: scale(0.98);
		border-color: #cbd5e1;
	}

	.item-left {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.item-month {
		font-size: 30rpx;
		font-weight: 500;
		color: #0b1b32;
	}
	.iconStyle{
		font-size: 26rpx;
		
		color: rgba(112, 112, 112, 1);;
	}
	.tag {
		font-size: 24rpx;
		background: #ffedd5;
		color: #c2410c;
		padding: 2px 10px;
		border-radius: 30px;
		margin:0 10rpx;
		font-weight: 600;
		vertical-align: middle;
	}

	.tag.preview {
		background: #e0f2fe;
		color: #0369a1;
	}

	.item-date {
		font-size: 13px;
		color: #64748b;
		font-weight: 400;
	}

	.item-amount {
		text-align: right;
	}

	.item-amount .label {
		font-size: 12px;
		color: #94a3b8;
		font-weight: 600;
		letter-spacing: 0.5px;
	}

	.money {
		margin-top: 2px;
	}

	.mask-text {
		color: #94a3b8;
		font-family: 'Courier New', monospace;
		letter-spacing: 2px;
		font-size: 18px;
		font-weight: 800;
	}

	.real-text {
		font-size: 36rpx;
		font-weight: 600;
		color: #0b1b32;
	}

	/* 明细卡片 */
	.detail-card {
		background: #f8faff;
		border-radius: 24px;
		padding: 20px 18px;
		margin-top: -4px;
		/* 与上方条目重叠一点形成连接效果 */
		border: 1px solid #e9eff6;
		border-top: none;
		/* 顶部边框与条目融合 */
		display: none;
		animation: none;
	}

	.detail-card.active {
		margin-top: 20rpx;
		display: block;
		animation: fadeSlide 0.3s ease;
	}

	@keyframes fadeSlide {
		0% {
			opacity: 0;
			transform: translateY(-6px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.detail-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.total-label {
		font-size: 30rpx;
		color: #475569;
		font-weight: 600;
		width: 100%;
		border-bottom: 1px solid #dce3ed;
		padding-bottom: 10rpx;
	}

	.total-amount {
		font-size: 28px;
		font-weight: 600;
		color: #0b1b32;
	}

	.unit {
		font-size: 16px;
		font-weight: 600;
		color: #64748b;
		margin-left: 4px;
	}

	.detail-grid {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.detail-title {
		font-size: 28rpx;
		margin: 10rpx 0 3rpx 0;
	}

	.grid-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 6px 0;
		border-bottom: 1px dashed #e6edf6;
	}

	.grid-row:last-child {
		border-bottom: none;
	}

	.grid-row .label {
		color: #475569;
		font-size: 26rpx;
		font-weight: 500;
	}

	.grid-row .value {
		font-weight: 500;
		color: #0b1b32;
		font-size: 26rpx;
	}

	.grid-row .txtValue {
		width: 70%;
		text-align: right;
		
	}

	.value.positive {
		color: #16a34a;
	}

	.value.negative {
		color: #dc2626;
	}

	/* 验证按钮 */
	.btn-view {
		background: #3a7cf7;
		color: white;
		border: none;
		border-radius: 40px;
		padding: 12px 20px;
		font-weight: 700;
		font-size: 16px;
		width: 100%;
		margin-top: 8px;
		text-align: center;
		transition: all 0.2s;
		box-shadow: 0 6px 18px rgba(58, 124, 247, 0.25);
		cursor: pointer;
	}

	.btn-view:active {
		transform: scale(0.96);
		background: #2a5fc7;
	}

	.btn-view.eye {
		background: #eef3fe;
		color: #1e3a8a;
		box-shadow: none;
		margin-top: 16px;
	}

	.btn-view.eye:active {
		background: #dbe7fe;
	}

	.security-tip {
		display: flex;
		align-items: center;
		gap: 8px;
		background: #f1f5f9;
		padding: 8px 14px;
		border-radius: 40px;
		font-size: 12px;
		color: #475569;
		margin-top: 12px;
		justify-content: center;
	}

	.footer-note {
		text-align: center;
		color: #94a3b8;
		font-size: 11px;
		margin-top: 20px;
		letter-spacing: 0.3px;
	}
	.emptyBox {
		
		background: #ffffff;
		border-radius: 20px;
		padding: 40rpx 20rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
		border: 1px solid #edf2f7;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.2s;
		cursor: pointer;
		color: rgba(112, 112, 112, 1);
		font-size: 30rpx;
	}
</style>