<template>
  <view class="page">
    <!-- 提现容器 -->
    <!-- 账户余额卡片 -->
    <view class="balance-card">
      <view class="balance-item">
        <view class="balance-label">账户余额 (元)</view>
        <view class="balance-value">{{ accountData.balance }}</view>
      </view>
      <view class="balance-item">
        <view class="balance-label">未结算金额 (元)</view>
        <view class="balance-value">{{ accountData.unsettled }}</view>
      </view>
    </view>

    <view class="withdrawal-container">
      <!-- 提现金额输入 -->
      <view class="withdrawal-section">
        <view class="section-title">提现金额</view>
        <view class="amount-input">
          <text class="currency-symbol">¥</text>
          <input
            v-model="withdrawalData.amount"
            class="amount-field"
            placeholder="请输入金额"
            type="number"
            @input="onAmountInput"
          />
          <view class="withdraw-all-btn" @click="withdrawAll">全部提现</view>
        </view>
      </view>

      <!-- 提现至银行 -->
      <view class="bank-section">
        <view class="section-title">提现至</view>
        <view class="bank-selector" @click="selectBank">
          <view class="bank-info">
            <image class="bank-icon" :src="selectedBank.icon" mode="aspectFit"></image>
            <text class="bank-name">{{ selectedBank.name }}</text>
          </view>
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <!-- 提现按钮 -->
      <view class="withdraw-btn" @click="submitWithdrawal">立即提现</view>
    </view>

    <!-- 可提现金额提示 -->
    <view class="available-amount"> 可提现金额: {{ accountData.available }}元</view>

    <!-- 提现说明 -->
    <view class="withdrawal-explanation">
      <view class="explanation-title">提现说明:</view>
      <view class="explanation-item">
        <text>提现金额: {{ withdrawalData.amount || '0.00' }}元</text>
      </view>
      <view class="explanation-item">
        <text>实际到账: {{ actualAmount }}元</text>
      </view>
      <view class="explanation-item">
        <text>提现手续费: {{ fee }}元</text>
      </view>
    </view>
  </view>
</template>

<script>
import { commonEnum } from '@/enum/commonEnum.js'

export default {
  data() {
    return {
      accountData: {
        balance: '6566.23',
        unsettled: '66.23',
        available: '6500',
      },
      withdrawalData: {
        amount: '',
        bankId: '1',
      },
      selectedBank: {
        id: '1',
        name: '建设银行',
        icon: commonEnum.CHINA_CONSTRUCTION_BANK,
      },
      banks: [
        {
          id: '1',
          name: '建设银行',
          icon: commonEnum.CHINA_CONSTRUCTION_BANK,
        },
        {
          id: '2',
          name: '工商银行',
          icon: commonEnum.CHINA_CONSTRUCTION_BANK, // 暂时使用建设银行图标
        },
        {
          id: '3',
          name: '农业银行',
          icon: commonEnum.CHINA_CONSTRUCTION_BANK, // 暂时使用建设银行图标
        },
      ],
    }
  },
  computed: {
    fee() {
      const amount = parseFloat(this.withdrawalData.amount) || 0
      return 1 // 1块手续费
    },
    actualAmount() {
      const amount = parseFloat(this.withdrawalData.amount) || 0
      const fee = parseFloat(this.fee)
      return (amount - fee).toFixed(2)
    },
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onAmountInput(e) {
      const value = e.detail.value
      // 限制最大提现金额
      if (parseFloat(value) > parseFloat(this.accountData.available)) {
        this.withdrawalData.amount = this.accountData.available
      }
    },
    withdrawAll() {
      this.withdrawalData.amount = this.accountData.available
    },
    selectBank() {
      uni.showActionSheet({
        itemList: this.banks.map(bank => bank.name),
        success: res => {
          const selectedBank = this.banks[res.tapIndex]
          this.selectedBank = selectedBank
          this.withdrawalData.bankId = selectedBank.id
        },
      })
    },
    submitWithdrawal() {
      if (!this.withdrawalData.amount || parseFloat(this.withdrawalData.amount) <= 0) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none',
        })
        return
      }

      if (parseFloat(this.withdrawalData.amount) > parseFloat(this.accountData.available)) {
        uni.showToast({
          title: '提现金额超过可提现余额',
          icon: 'none',
        })
        return
      }

      uni.showModal({
        title: '确认提现',
        content: `确认提现${this.withdrawalData.amount}元到${this.selectedBank.name}吗？`,
        success: res => {
          if (res.confirm) {
            uni.showLoading({
              title: '提现申请中...',
            })

            // 模拟提现请求
            setTimeout(() => {
              uni.hideLoading()
              uni.showToast({
                title: '提现申请已提交',
                icon: 'success',
              })

              // 返回上一页
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }, 2000)
          }
        },
      })
    },
  },
}
</script>

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

.withdrawal-container {
  background: #fff;
  border-radius: 20rpx;
  margin: 20rpx;
  padding-bottom: 54rpx;
  overflow: hidden;
}

.balance-card {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
  padding: 40rpx;
  background: linear-gradient(135deg, #ff803a, #ff6b35);
  border-radius: 20rpx;
  color: white;

  .balance-item {
    text-align: center;

    .balance-label {
      font-size: 24rpx;
      margin-bottom: 10rpx;
      opacity: 0.9;
    }

    .balance-value {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
}

.withdrawal-section {
  padding: 30rpx;
  //border-bottom: 1rpx solid #f0f0f0;

  .section-title {
    font-size: 28rpx;
    color: #3d3d3d;
    margin-bottom: 20rpx;
    font-weight: 500;
  }

  .amount-input {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 20rpx;

    .currency-symbol {
      font-size: 80rpx;
      color: #333;
      margin-right: 20rpx;
      font-weight: bold;
    }

    .amount-field {
      height: 90rpx;
      //border: #4cd964 1px solid;
      flex: 1;
      font-size: 80rpx;
      color: #333;
    }

    .withdraw-all-btn {
      padding: 10rpx 20rpx;

      color: #ff803a;

      font-size: 30rpx;
    }
  }
}

.bank-section {
  display: flex;
  padding: 30rpx;
  align-items: center;
  justify-content: space-between;
  //border-bottom: 1rpx solid #f0f0f0;

  .section-title {
    font-size: 28rpx;
    color: #7c7c7c;

    font-weight: 500;
  }

  .bank-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bank-info {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .bank-icon {
        width: 40rpx;
        height: 40rpx;
       
      }

      .bank-name {
        font-size: 28rpx;
        color: #333;
        margin-right:10rpx;
      }
    }

    .arrow-icon {
      font-size: 32rpx;
      color: #999;
    }
  }
}

.withdraw-btn {
  margin: 17rpx;
  padding: 30rpx;
  background: #ffeee4;
  color: #ff803a;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  border-radius: 46rpx;
  box-shadow: rgba(0, 0, 0, 0.1) 0 5px 10px 0;
}

.available-amount {
  padding-left: 66rpx;
  text-align: left;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.withdrawal-explanation {
  margin: 30rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 20rpx;

  .explanation-title {
    font-size: 34rpx;
    color: #3d3d3d;
    margin-bottom: 20rpx;
    font-weight: 500;
  }

  .explanation-item {
    padding: 10rpx 0;
    font-size: 26rpx;
    color: #3d3d3d;
  }
}

view {
  //border: red solid 1px;
}
</style>
