<template>
  <view class="container">
    <!-- 头部导航 -->
    <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <image src="/src/static/pic/mark/more-left.png" mode="aspectFit"></image>
      </view>
      <text class="title">{{ $t('bank.myBank') }}</text>
      <view class="right-placeholder"></view>
    </view>
    
    <view class="header">
      <text class="subtitle">{{$t('bank.bind')}} {{cards.length}} {{ $t('bank.bankcard') }}</text>
    </view>
    
    <!-- 银行卡列表 -->
    <scroll-view class="card-list" scroll-y>
      <!-- 添加新卡 -->
      <view class="card-item add-card" @click="navigateToBind">
        <view class="add-icon">+</view>
        <text class="add-text">{{ $t('bank.addcard') }}</text>
      </view>
      
      <!-- 已绑定银行卡 -->
      <view 
        class="card-item" 
        v-for="(card, index) in cards" 
        :key="index"
        :style="{background: getCardBg(card.bankCode)}"
        @click="viewCardDetail(card)"
        @longpress="onLongPress(card)"
      >
        <view class="card-top">
          <text class="bank-name">{{card.bankName}}</text>
        </view>
        <view class="card-middle">
          <text class="card-type">{{card.cardType}}</text>
        </view>
        <view class="card-bottom">
          <text class="card-number">**** **** **** {{card.cardNumber.slice(-4)}}</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 操作提示 -->
    <view class="tips">
      <text>{{$t('bank.longpressTip')}}</text>
    </view>
    
    <!-- 银行卡详情弹窗 -->
    <uni-popup ref="cardPopup" type="center" :mask-click="false">
      <view class="popup-content" v-if="currentCard">
        <view class="popup-header">
          <text class="popup-title">{{ $t('bank.bankdetail') }}</text>
          <view class="close-btn" @click="closePopup">
            <image src="/static/close.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <view class="card-info">
          <view class="info-item">
            <text class="info-label">{{$t('bank.bankname')}}</text>
            <text class="info-value">{{currentCard.bankName}}</text>
          </view>
          
          <view class="info-item">
            <text class="info-label">{{$t('bank.banknum')}}</text>
            <text class="info-value">{{formatCardNumber(currentCard.cardNumber)}}</text>
          </view>
          
          <view class="info-item">
            <text class="info-label">{{$t('bank.cardtype')}}</text>
            <text class="info-value">{{currentCard.cardType}}</text>
          </view>
          
          <view class="info-item">
            <text class="info-label">{{$t('bank.cardholder')}}</text>
            <text class="info-value">{{currentCard.cardHolder}}</text>
          </view>
          
          <view class="info-item">
            <text class="info-label">{{$t('bank.bindphone')}}</text>
            <text class="info-value">{{currentCard.phone}}</text>
          </view>
          
          <view class="info-item">
            <text class="info-label">{{ $t('bank.bindtime') }}</text>
            <text class="info-value">{{currentCard.bindTime}}</text>
          </view>
        </view>
        
        <button class="confirm-btn" @click="closePopup">{{$t('bank.certain')}}</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        {
          id: '1',
          bankName: '中国工商银行',
          bankCode: 'ICBC',
          cardNumber: '6222021234567890123',
          cardType: '储蓄卡',
          cardHolder: '张三',
          phone: '13812341234',
          bindTime: '2023-01-01'
        },
        {
          id: '2',
          bankName: '招商银行',
          bankCode: 'CMB',
          cardNumber: '6225881234567890',
          cardType: '信用卡',
          cardHolder: '张三',
          phone: '138****1234',
          bindTime: '2023-02-15'
        }
      ],
      currentCard: null
    }
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 获取银行卡背景色
    getCardBg(bankCode) {
      const colorMap = {
        'ICBC': 'linear-gradient(135deg, #c33a3a, #e05a5a)',
        'CCB': 'linear-gradient(135deg, #1a6fc9, #3a8de0)',
        'BOC': 'linear-gradient(135deg, #c32136, #e04154)',
        'ABC': 'linear-gradient(135deg, #019858, #03a65a)',
        'CMB': 'linear-gradient(135deg, #c60a1e, #e62a3d)',
        'BOCOM': 'linear-gradient(135deg, #003366, #004080)',
        'default': 'linear-gradient(135deg, #666666, #888888)'
      }
      return colorMap[bankCode] || colorMap['default']
    },
    
    // 跳转到绑定页面
    navigateToBind() {
      uni.navigateTo({
        url: '/pages/more/addbankCard'
      })
    },
    
    // 查看银行卡详情
    viewCardDetail(cards) {
      this.currentCard = cards
      this.$refs.cardPopup.open()
    },
    
    // 关闭弹窗
    closePopup() {
      this.$refs.cardPopup.close()
    },
    
    // 格式化卡号显示
    formatCardNumber(number) {
      if (!number) return ''
      // 每4位加一个空格
      return number.replace(/(\d{4})(?=\d)/g, '$1 ')
    },
    
    // 长按解绑
    onLongPress(card) {
      uni.showModal({
        title: this.$t('bank.unbindtips'),
        content: this.$t('bank.certainunbind')+`${card.bankName}`+this.$t('bank.endfour')+`${card.cardNumber.slice(-4)}`+this.$t('bank.card'),
        success: (res) => {
          if (res.confirm) {
            this.unbindCard(card.id)
          }
        }
      })
    },
    
    // 解绑银行卡
    unbindCard(cardId) {
      uni.showLoading({ title: this.$t('bank.unbinding') })
      
      // 模拟API请求
      setTimeout(() => {
        this.cards = this.cards.filter(card => card.id !== cardId)
        uni.hideLoading()
        uni.showToast({
          title: this.$t('bank.unbindSuccess'),
          icon: 'success'
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-top: var(--status-bar-height);
  
  .back-btn {
    width: 100rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 40rpx;
      height: 40rpx;
      filter: invert(1);
      margin-right: 40rpx;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: center;
    margin-right: 20rpx;
  }
  
  .right-placeholder {
    width: 60rpx;
  }
}

.header {
  margin-bottom: 40rpx;
  
  .subtitle {
    font-size: 28rpx;
    color: #999;
  }
}

.card-list {
  height: calc(100vh - 260rpx);
  
  .card-item {
    height: 240rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
    
    &.add-card {
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 2rpx dashed #ccc;
      
      .add-icon {
        font-size: 60rpx;
        color: #2979FF;
        margin-bottom: 20rpx;
      }
      
      .add-text {
        font-size: 32rpx;
        color: #2979FF;
      }
    }
    
    .bank-logo {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
    }
    
    .card-top {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      
      .bank-name {
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    
    .card-middle {
      margin-bottom: 40rpx;
      
      .card-type {
        font-size: 28rpx;
        background: rgba(255, 255, 255, 0.2);
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
      }
    }
    
    .card-bottom {
      .card-number {
        font-size: 36rpx;
        letter-spacing: 2rpx;
      }
    }
    
    &::after {
      content: '';
      position: absolute;
      top: -50rpx;
      right: -50rpx;
      width: 200rpx;
      height: 200rpx;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
    }
  }
}

.tips {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 30rpx;
}

/* 弹窗样式 */
.popup-content {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-sizing: border-box;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    
    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
  
  .card-info {
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      
      .info-label {
        font-size: 28rpx;
        color: #999;
      }
      
      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
  
  .confirm-btn {
    margin-top: 50rpx;
    background-color: #2979FF;
    color: #fff;
    border-radius: 50rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
  }
}
</style>