<template>
  <view class="pending-bill-page">
    <!-- 自定义导航栏 -->
    <custom-navbar title="水电缴费" />

    <scroll-view
      scroll-y
      class="scroll-content"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refresh"
      @scrolltolower="loadMore"
    >
      <view v-if="bills.length > 0">
        <view
          class="bill-item"
          v-for="item in bills"
          :key="item.id"
        >
          <!-- 左侧勾选 + 信息 -->
          <view class="bill-left">
			<u-checkbox
                      v-model="item.checked"
                      @change="toggleCheck(item)"
                      size="32"
                      active-color="#007aff"
                    />
            <view class="bill-info">
              <text class="bill-name">{{ item.feeName }}</text>
              <text class="bill-date">缴费截止：{{ item.dueDate }}</text>
            </view>
          </view>

          <!-- 右侧金额 + 支付按钮 -->
          <view class="bill-right">
            <text class="amount">{{ formatMoney(item.amount) }}</text>
            <button
              class="pay-btn"
              @click="goPayTest([item])"
            >去支付
			</button>
          </view>
        </view>
      </view>

      <view v-else class="empty">
        <u-empty mode="list" text="暂无水电费账单" />
      </view>

      <u-loadmore :status="loadStatus" />
    </scroll-view>

   <!-- 底部批量支付栏 -->
   <view v-if="selectedBills.length > 0" class="batch-pay-bar">
     <view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
      <view class="batch-pay-bar-right">
		  <text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
		  <button  class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary" size="small" @click="goPayTest(selectedBills)">
		    批量缴费
		  </button>
	  </view>
   </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bills: [],
      isRefreshing: false,
      loadStatus: 'more',
	  sumAmount: 0,
      selectedBills: [], // 勾选的账单集合
    };
  },
  onLoad() {
    this.loadBills();
  },
  onShow(){
  },
  methods: {
    loadBills() {
      this.bills = [
    {
            id: 1,
            feeName: '电费（2025.10）',
            dueDate: '2025-11-20',
            amount: 120.5,
  		  checked: false
          },
          {
            id: 2,
            feeName: '水费（2025.10）',
            dueDate: '2025-11-22',
            amount: 60.2,
  		  checked: false
          }
      ];
	  this.updateSelected();
    },
    refresh() {
      this.isRefreshing = true;
      setTimeout(() => {
        this.loadBills();
        this.isRefreshing = false;
      }, 1000);
    },

    loadMore() {
      this.loadStatus = 'noMore';
    },

   formatMoney(val) {
     if (val === null || val === undefined || isNaN(val)) return '—';
   
     val = Number(val);
   
     if (val >= 10000) {
       return '¥' + (val / 10000).toFixed(2) + '万';
     }
   
     return '¥' + val.toFixed(2);
   },
    toggleCheck(item) {
	  item.checked = !item.checked;
	  if(item.checked && !this.selectedBills.some(b => b.id === item.id)) {
		  this.selectedBills.push(item);
	  }else{
		  // 取消勾选时从已选数组移除
		  this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
	  } 
	      let sumFee = 0;
		  this.selectedBills.forEach(b => sumFee += b.amount);
		  this.sumAmount = sumFee;
	},   
	   updateSelected() {
         if (!Array.isArray(this.bills)) return;
         this.selectedBills = this.bills.filter(b => b.checked);
       },
    goPayTest(billList) {
   if (!billList || billList.length === 0) return;

  // 模拟后台生成订单返回
  const order = {
    timeStamp: String(Date.now()),          // 时间戳
    nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
    package: 'prepay_id=TEST1234567890',    // 模拟预支付ID
    signType: 'MD5',
    paySign: 'TEST_SIGN',                   // 模拟签名
  };

  // 调用微信支付接口（测试）
  uni.requestPayment({
    ...order,
    success: () => {
      uni.showToast({ title: '支付成功（测试）', icon: 'success' });
      // 清空勾选状态
      billList.forEach(b => b.checked = false);
      this.updateSelected();
      // 刷新列表（可选）
      this.loadBills();
    },
    fail: () => {
      uni.showToast({ title: '支付失败（测试）', icon: 'none' });
    }
  });
 },
   async goPay(billList) {
  if (!billList || billList.length === 0) return;

  try {
    // 1. 请求后台生成订单
    const res = await uni.request({
      url: 'https://api.example.com/payments/create',
      method: 'POST',
      data: {
        userId: this.userId,
        bills: billList.map(b => b.id),
      }
    });

    if (res[1].data.code !== 0) {
      uni.showToast({ title: res[1].data.msg, icon: 'none' });
      return;
    }

    const order = res[1].data.data; // 后台返回的支付参数

    // 2. 调用微信支付
    uni.requestPayment({
      timeStamp: order.timeStamp,
      nonceStr: order.nonceStr,
      package: order.package,
      signType: order.signType,
      paySign: order.paySign,
      success: () => {
        uni.showToast({ title: '支付成功', icon: 'success' });
        // 更新勾选状态
        billList.forEach(b => b.checked = false);
        this.updateSelected();
        // 刷新列表
        this.loadBills();
      },
      fail: () => {
        uni.showToast({ title: '支付失败', icon: 'none' });
      }
    });

  } catch (error) {
    console.error('支付请求失败', error);
    uni.showToast({ title: '支付请求失败', icon: 'none' });
  }
},
  }
};
</script>

<style lang="scss" scoped>
.pending-bill-page {
  background: #f7f8fa;
  min-height: 100vh;
  padding-top: 175rpx; /* 自定义导航栏高度 */
}

.scroll-content {
  padding: 20rpx;
  box-sizing: border-box;
}

.bill-item {
  display: flex;
  justify-content: space-between;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.bill-left {
  display: flex;
  align-items: center;

  .bill-info {
    display: flex;
    flex-direction: column;

    .bill-name {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .bill-date {
      font-size: 24rpx;
      color: #666;
      margin-top: 6rpx;
    }
  }
}

.bill-right {
  flex-direction: column;
  align-items: flex-end;
  width: 30%;
   .amount {
	text-align: center;
	font-size: 28rpx;
	height: 28rpx;
	line-height: 28rpx;
    font-size: 28rpx;
    color: #ff7f00;
  }

  .pay-btn {
    margin-top: 12rpx;
    padding: 0 40rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 30rpx; // 圆角
    font-size: 28rpx;
    color: #fff;
	background: linear-gradient(90deg, #007aff, #00aaff);
    text-align: center;
  }
  .btn-text{
	  padding-top: 13rpx;
  }
}

.batch-pay-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 170rpx;
  padding: 0 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
  z-index: 999;
  .batch-pay-bar-left{
	  font-size: 28rpx;
	  color: #333;
  }
 
  .batch-pay-bar-right{
	  flex-direction: column;
	  align-items: flex-end;
	  .sumAmount{
	  	  font-size: 28rpx;
	  	  color: #ff7f00;
	  }
	.bottomPayBtn {
		    margin-top: 12rpx;
		    height: 60rpx;
		    line-height: 60rpx;
		    padding: 0 40rpx;
		    border-radius: 30rpx;
		    font-size: 28rpx;
		    font-weight: bold;
		    text-align: center;
			background: linear-gradient(90deg, #007aff, #00aaff);
	}
  }
}


.empty {
  margin-top: 200rpx;
  text-align: center;
}
</style>
