<template>
  <view class="bank-page">
    <view class="form-container">
      <!-- 持卡人姓名 -->
      <view class="form-item">
        <view class="form-label">持卡人姓名<text class="required">*</text></view>
        <input 
          v-model="formData.real_name"
          placeholder="请输入持卡人姓名"
          class="form-input"
        />
      </view>
      
      <!-- 银行卡号 -->
      <view class="form-item">
        <view class="form-label">银行卡号<text class="required">*</text></view>
        <input 
          v-model="formData.card_no"
          type="number"
          placeholder="请输入银行卡号"
          class="form-input"
        />
      </view>
      
      <!-- 开户银行 -->
      <view class="form-item" @click="selectBank">
        <view class="form-label">开户银行<text class="required">*</text></view>
        <view class="picker-value">
          <text v-if="formData.bank_name" class="text">{{ formData.bank_name }}</text>
          <text v-else class="placeholder">请选择开户银行</text>
          <text class="arrow">›</text>
        </view>
      </view>
      
      <!-- 开户支行（选填） -->
      <view class="form-item">
        <view class="form-label">开户支行</view>
        <input 
          v-model="formData.bank_branch"
          placeholder="请输入开户支行（选填）"
          class="form-input"
        />
      </view>
      
      <!-- 确认银行卡号 -->
      <view class="form-item">
        <view class="form-label">确认卡号<text class="required">*</text></view>
        <input 
          v-model="formData.confirm_card_no"
          type="number"
          placeholder="请再次输入银行卡号"
          class="form-input"
        />
      </view>
      
      <!-- 温馨提示 -->
      <view class="tips-box">
        <view class="tips-title">温馨提示：</view>
        <view class="tips-item">1. 请确保银行卡为本人名下储蓄卡</view>
        <view class="tips-item">2. 绑定后无法修改，请仔细核对信息</view>
        <view class="tips-item">3. 不支持信用卡提现</view>
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view class="btn-container">
      <button 
        class="save-btn"
        :disabled="!canSave"
        :loading="saving"
        @click="handleSave"
      >
        保存
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        real_name: '',
        card_no: '',
        bank_name: '',
        bank_branch: '',
        confirm_card_no: ''
      },
      bankList: [
        '工商银行', '建设银行', '农业银行', '中国银行',
        '交通银行', '招商银行', '浦发银行', '民生银行',
        '兴业银行', '中信银行', '光大银行', '平安银行',
        '邮政储蓄银行', '其他银行'
      ],
      saving: false,
      isEdit: false
    }
  },
  
  computed: {
    canSave() {
      return this.formData.real_name && 
             this.formData.card_no &&
             this.formData.bank_name &&
             this.formData.confirm_card_no === this.formData.card_no;
    }
  },
  
  onLoad() {
    this.loadBankInfo();
  },
  
  methods: {
    // 加载银行卡信息
    async loadBankInfo() {
      try {
        const res = await this.$http.get('/api/bank/index');
        if (res.code === 0 && res.data.card_no) {
          this.formData = {
            ...res.data,
            confirm_card_no: res.data.card_no
          };
          this.isEdit = true;
        }
      } catch (error) {
        console.error('加载银行卡信息失败:', error);
      }
    },
    
    // 选择银行
    selectBank() {
      uni.showActionSheet({
        itemList: this.bankList,
        success: (res) => {
          this.formData.bank_name = this.bankList[res.tapIndex];
        }
      });
    },
    
    // 保存
    async handleSave() {
      if (this.formData.card_no !== this.formData.confirm_card_no) {
        uni.showToast({
          title: '两次输入的卡号不一致',
          icon: 'none'
        });
        return;
      }
      
      if (this.formData.card_no.length < 16) {
        uni.showToast({
          title: '请输入正确的银行卡号',
          icon: 'none'
        });
        return;
      }
      
      if (this.isEdit) {
        uni.showToast({
          title: '银行卡信息已绑定，无法修改',
          icon: 'none'
        });
        return;
      }
      
      this.saving = true;
      
      try {
        const res = await this.$http.post('/api/bank/bind', {
          real_name: this.formData.real_name,
          card_no: this.formData.card_no,
          bank_name: this.formData.bank_name,
          bank_branch: this.formData.bank_branch
        });
        
        if (res.code === 0) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      } catch (error) {
        uni.showToast({
          title: error.msg || '保存失败',
          icon: 'none'
        });
      } finally {
        this.saving = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bank-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.form-container {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
  
  .form-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 15rpx;
    font-weight: 500;
    
    .required {
      color: #FF4757;
      margin-left: 4rpx;
    }
  }
  
  .form-input {
    height: 90rpx;
    padding: 0 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
  
  .picker-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;
    padding: 0 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    
    .text {
      font-size: 28rpx;
      color: #333;
    }
    
    .placeholder {
      font-size: 28rpx;
      color: #999;
    }
    
    .arrow {
      font-size: 40rpx;
      color: #ccc;
    }
  }
}

.tips-box {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #FFF3CD;
  border-radius: 8rpx;
  
  .tips-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #856404;
    margin-bottom: 15rpx;
  }
  
  .tips-item {
    font-size: 24rpx;
    color: #856404;
    line-height: 1.6;
    margin-bottom: 10rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.save-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(90deg, #FF6B6B, #FF4757);
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  border: none;
  
  &[disabled] {
    opacity: 0.6;
  }
}
</style>

