<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.cardDetail')}}</text>
      <view class="right-placeholder"></view>
    </view>
    
    <!-- 银行卡展示 -->
    <view 
      class="card-display"
      :style="{background: getCardBg(card.bankCode)}"
    >
      <view class="card-top">
        <image class="bank-logo" :src="card.bankLogo" mode="aspectFit"></image>
        <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">{{formatCardNumber(card.cardNumber)}}</text>
      </view>
    </view>
    
    <!-- 银行卡信息 -->
    <view class="card-info">
      <view class="info-item">
        <text class="info-label">{{$t('bank.cardperson')}}</text>
        <text class="info-value">{{card.cardHolder}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">{{$t('bank.cardphone')}}</text>
        <text class="info-value">{{card.phone}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">{{ $t('bank.bindtime') }}</text>
        <text class="info-value">{{card.bindTime}}</text>
      </view>
    </view>
    
    <!-- 解绑按钮 -->
    <view class="action-btn" @click="showUnbindDialog">
      <text>{{$t(bank.unbindcard)}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card: {
        id: '',
        bankName: '加载中...',
        bankCode: '',
        bankLogo: '',
        cardNumber: '',
        cardType: '',
        cardHolder: '',
        phone: '',
        bindTime: '2023-01-01 12:00:00'
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      // 模拟数据 - 实际项目中应该从服务器获取
      this.card = {
        id: options.id,
        bankName: options.id === '1' ? 'this.$t("bank.ICBC")' : 'this.$t("bank.CMB")',
        bankCode: options.id === '1' ? 'ICBC' : 'CMB',
        bankLogo: options.id === '1' ? '/static/bank/icbc.png' : '/static/bank/cmb.png',
        cardNumber: options.id === '1' ? '6222021234567890123' : '6225881234567890',
        cardType: options.id === '1' ? '储蓄卡' : '信用卡',
        cardHolder: '张三',
        phone: '138****1234',
        bindTime: options.id === '1' ? '2023-01-01 12:00:00' : '2023-02-15 14:30:00'
      }
    }
  },
  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']
    },
    
    // 格式化银行卡号
    formatCardNumber(number) {
      if (!number) return ''
      return number.replace(/(\d{4})(?=\d)/g, '$1 ')
    },
    
    // 显示解绑对话框
    showUnbindDialog() {
      uni.showModal({
        title: '解绑银行卡',
        content: `确定要解绑${this.card.bankName}尾号${this.card.cardNumber.slice(-4)}的银行卡吗？`,
        success: (res) => {
          if (res.confirm) {
            this.unbindCard()
          }
        }
      })
    },
    
    // 解绑银行卡
    unbindCard() {
      uni.showLoading({ title: '解绑中...' })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '解绑成功',
          icon: 'success'
        })
        
        // 返回上一页并刷新
        const pages = getCurrentPages()
        if (pages.length > 1) {
          const prevPage = pages[pages.length - 2]
          prevPage.$vm.getBankCards && prevPage.$vm.getBankCards()
        }
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 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: 40rpx;
  padding-top: var(--status-bar-height);
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    image {
      width: 40rpx;
      height: 40rpx;
      filter: invert(1);
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: center;
  }
  
  .right-placeholder {
    width: 60rpx;
  }
}

.card-display {
  height: 300rpx;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .bank-logo {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .card-top {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .bank-name {
      font-size: 40rpx;
      font-weight: bold;
    }
  }
  
  .card-middle {
    margin-bottom: 50rpx;
    
    .card-type {
      font-size: 32rpx;
      background: rgba(255, 255, 255, 0.2);
      padding: 8rpx 20rpx;
      border-radius: 24rpx;
    }
  }
  
  .card-bottom {
    .card-number {
      font-size: 44rpx;
      letter-spacing: 4rpx;
    }
  }
  
  &::after {
    content: '';
    position: absolute;
    top: -60rpx;
    right: -60rpx;
    width: 240rpx;
    height: 240rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
}

.card-info {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 40rpx;
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 30rpx;
      color: #666;
    }
    
    .info-value {
      font-size: 30rpx;
      color: #333;
    }
  }
}

.action-btn {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 45rpx;
  color: #ff3b30;
  font-size: 32rpx;
  margin-top: 40rpx;
}
</style>