<template>
  <!-- 绑定银行卡 - 添加信息页（拼多多风格） -->
  <view class="page">
    <scroll-view direction="vertical" class="scroll-wrap">

      <!-- ① 提示卡片 -->
      <view class="tip-banner">
        <text class="tip-icon">🔒</text>
        <text class="tip-text">银行卡信息经加密传输，安全有保障</text>
      </view>

      <!-- ② 表单白色卡片 -->
      <view class="form-card">

        <!-- 持卡人 -->
        <view class="form-row">
          <view class="row-left">
            <text class="row-label">持卡人</text>
          </view>
          <view class="row-right">
            <input
              class="row-input"
              type="text"
              v-model="form.holder_name"
              placeholder="请输入银行卡开户人姓名"
              placeholder-style="color:#c0c4cc;font-size:28rpx"
              :maxlength="20"
            />
            <text class="row-tip-icon" @click="showHolderTip">ⓘ</text>
          </view>
        </view>
        <view class="divider" />

        <!-- 银行卡号 -->
        <view class="form-row">
          <view class="row-left">
            <text class="row-label">银行卡号</text>
          </view>
          <view class="row-right">
            <input
              class="row-input"
              type="number"
              v-model="cardNoDisplay"
              placeholder="请输入银行卡号"
              placeholder-style="color:#c0c4cc;font-size:28rpx"
              :maxlength="23"
              @input="onCardNoInput"
            />
            <text class="camera-btn" @click="doOCR">📷</text>
          </view>
        </view>
        <view class="divider" />

        <!-- 开户银行（选择器） -->
        <view class="form-row selector-row" @click="openBankPicker">
          <view class="row-left">
            <text class="row-label">开户银行</text>
          </view>
          <view class="row-right">
            <view class="selector-value-wrap">
              <text
                class="selector-value"
                :class="{ placeholder: form.bank_name === '' }"
              >
                {{  form.bank_name ?? '请选择开户银行'  }}
              </text>
            </view>
            <text class="arrow-icon">›</text>
          </view>
        </view>
        <view class="divider" />

        <!-- 开户支行（仅选了银行后显示，非必填） -->
        <view v-if="form.bank_name !== ''" class="form-row selector-row" @click="openBranchInput">
          <view class="row-left">
            <text class="row-label">开户支行</text>
            <text class="optional-badge">非必填</text>
          </view>
          <view class="row-right">
            <view class="selector-value-wrap">
              <text
                class="selector-value"
                :class="{ placeholder: form.branch_name === '' }"
              >
                {{  form.branch_name ?? '请填写开户支行（可选）'  }}
              </text>
            </view>
            <text class="arrow-icon">›</text>
          </view>
        </view>
        <view v-if="form.bank_name !== ''" class="divider" />

        <!-- 手机号 -->
        <view class="form-row">
          <view class="row-left">
            <text class="row-label">手机号码</text>
          </view>
          <view class="row-right">
            <input
              class="row-input"
              type="number"
              v-model="form.phone"
              placeholder="请输入该银行卡的预留手机号"
              placeholder-style="color:#c0c4cc;font-size:28rpx"
              :maxlength="11"
            />
          </view>
        </view>

      </view>

      <!-- ③ 安全说明 -->
      <view class="desc-area">
        <text class="desc-text">
          手机号码将作为账户安全验证依据，请填写该银行卡在银行预留的手机号。
        </text>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-placeholder" />
    </scroll-view>

    <!-- ④ 底部大按钮（固定） -->
    <view class="bottom-bar">
      <view
        class="next-btn"
        :class="canSubmit ? 'next-btn-active' : 'next-btn-disabled'"
        @click="goVerify"
      >
        <text class="next-btn-text">下一步，身份验证</text>
      </view>
      <view style="height: env(safe-area-inset-bottom); min-height: 8rpx;" />
    </view>

    <!-- ⑤ 银行选择弹层 -->
    <view v-if="bankPickerVisible" class="picker-mask" @click="closeBankPicker">
      <view class="picker-panel" @click.stop>
        <view class="picker-header">
          <text class="picker-title">选择开户银行</text>
          <text class="picker-close" @click="closeBankPicker">✕</text>
        </view>
        <scroll-view direction="vertical" class="picker-scroll">
          <view
            v-for="bank in bankList"
            :key="bank.code"
            class="picker-item"
            :class="{ 'picker-item-active': form.bank_name === bank.name }"
            @click="selectBank(bank)"
          >
            <view class="bank-logo-placeholder">
              <text class="bank-logo-text">{{ bank.shortName.substring(0, 2) }}</text>
            </view>
            <text class="picker-item-name">{{ bank.name }}</text>
            <text v-if="form.bank_name === bank.name" class="picker-check">✓</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- ⑥ 开户支行输入弹层 -->
    <view v-if="branchInputVisible" class="picker-mask" @click="closeBranchInput">
      <view class="branch-panel" @click.stop>
        <view class="picker-header">
          <text class="picker-title">填写开户支行</text>
          <text class="picker-close" @click="closeBranchInput">✕</text>
        </view>
        <view class="branch-input-wrap">
          <input
            class="branch-input"
            type="text"
            v-model="branchInputTemp"
            placeholder="例：招商银行上海浦东支行"
            placeholder-style="color:#c0c4cc"
            :maxlength="50"
          />
        </view>
        <view class="branch-confirm-btn" @click="confirmBranch">
          <text class="branch-confirm-text">确认</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="uts">
import {
  BANK_LIST,
  BankItem,
  detectBankByBin,
  formatCardNo,
  cleanCardNo,
  luhnCheck,
  isValidPhone,
  recognizeBankCardFromImage
} from '@/utils/bankUtils.uts'

type AddCardForm = {
  holder_name: string
  card_no: string       // 纯数字，提交时用
  bank_name: string
  bank_code: string
  branch_name: string
  phone: string
}

export default {
  data() {
    return {
      form: {
        holder_name: '',
        card_no: '',
        bank_name: '',
        bank_code: '',
        branch_name: '',
        phone: ''
      } as AddCardForm,
      cardNoDisplay: '' as string,       // 格式化显示（含空格）
      bankList: BANK_LIST as BankItem[],
      bankPickerVisible: false as boolean,
      branchInputVisible: false as boolean,
      branchInputTemp: '' as string,
      ocrLoading: false as boolean
    }
  },

  computed: {
    canSubmit(): boolean {
      return (
        this.form.holder_name.trim().length > 0 &&
        cleanCardNo(this.cardNoDisplay).length >= 16 &&
        this.form.bank_name.length > 0 &&
        isValidPhone(this.form.phone)
      )
    }
  },

  methods: {
    // ── 持卡人提示 ──────────────────────────────
    showHolderTip() {
      uni.showToast({
        title: '请填写银行卡开户人姓名，需与实名认证一致',
        icon: 'none',
        duration: 3000
      })
    },

    // ── 卡号输入：格式化 + BIN 识别 ─────────────
    onCardNoInput() {
      const raw = cleanCardNo(this.cardNoDisplay)
      // 重新格式化
      this.cardNoDisplay = formatCardNo(raw)
      this.form.card_no = raw

      // BIN 识别（输入 6 位后触发）
      if (raw.length >= 6) {
        const bank = detectBankByBin(raw)
        if (bank != null && this.form.bank_name === '') {
          this.form.bank_name = bank.name
          this.form.bank_code = bank.code
        }
      }
    },

    // ── OCR 识别 ────────────────────────────────
    async doOCR() {
      if (this.ocrLoading) return
      this.ocrLoading = true
      try {
        const result = await recognizeBankCardFromImage()
        if (result.success === true) {
          if (result.cardNo != null && result.cardNo !== '') {
            this.form.card_no = result.cardNo
            this.cardNoDisplay = formatCardNo(result.cardNo)
          }
          if (result.bankName != null && result.bankName !== '' && this.form.bank_name === '') {
            this.form.bank_name = result.bankName
          }
          uni.showToast({ title: '识别成功', icon: 'success' })
        } else if (result.errorMsg !== '取消选择') {
          uni.showToast({ title: (result.errorMsg != null && result.errorMsg !== '' ? result.errorMsg : 'OCR 识别失败'), icon: 'none' })
        }
      } catch (e) {
        console.error('[add] OCR 异常:', e)
        uni.showToast({ title: 'OCR 出现异常', icon: 'none' })
      } finally {
        this.ocrLoading = false
      }
    },

    // ── 银行选择弹层 ─────────────────────────────
    openBankPicker() {
      this.bankPickerVisible = true
    },
    closeBankPicker() {
      this.bankPickerVisible = false
    },
    selectBank(bank: BankItem) {
      this.form.bank_name = bank.name
      this.form.bank_code = bank.code
      this.bankPickerVisible = false
    },

    // ── 支行输入弹层 ─────────────────────────────
    openBranchInput() {
      this.branchInputTemp = this.form.branch_name
      this.branchInputVisible = true
    },
    closeBranchInput() {
      this.branchInputVisible = false
    },
    confirmBranch() {
      this.form.branch_name = this.branchInputTemp.trim()
      this.branchInputVisible = false
    },

    // ── 下一步：跳转到身份验证页 ─────────────────
    goVerify() {
      if (!this.canSubmit) {
        if (this.form.holder_name.trim() === '') {
          uni.showToast({ title: '请输入持卡人姓名', icon: 'none' })
        } else if (cleanCardNo(this.cardNoDisplay).length < 16) {
          uni.showToast({ title: '请输入正确的银行卡号', icon: 'none' })
        } else if (this.form.bank_name === '') {
          uni.showToast({ title: '请选择开户银行', icon: 'none' })
        } else if (!isValidPhone(this.form.phone)) {
          uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
        }
        return
      }

      // Luhn 校验（可选拦截，不强制）
      const rawCardNo = cleanCardNo(this.cardNoDisplay)
      if (!luhnCheck(rawCardNo)) {
        uni.showModal({
          title: '卡号确认',
          content: '银行卡号格式可能有误，是否继续？',
          success: (res) => {
            if (res.confirm) {
              this.navigateToVerify()
            }
          }
        })
        return
      }

      this.navigateToVerify()
    },

    navigateToVerify() {
      const rawCardNo = cleanCardNo(this.cardNoDisplay)
      const params = encodeURIComponent(JSON.stringify({
        holder_name: this.form.holder_name,
        card_no: rawCardNo,
        bank_name: this.form.bank_name,
        bank_code: this.form.bank_code,
        branch_name: this.form.branch_name,
        phone: this.form.phone
      }))
      uni.navigateTo({
        url: `/pages/mall/consumer/bank-cards/verify?data=${params}`
      })
    }
  }
}
</script>

<style>
/* ── 整体结构 ────────────────────────────── */
.page {
  flex: 1;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-wrap {
  flex: 1;
}

/* ── 提示横幅 ─────────────────────────────── */
.tip-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff7f0;
  padding: 20rpx 32rpx;
  margin-bottom: 20rpx;
}

.tip-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #ff6000;
}

/* ── 表单卡片 ────────────────────────────── */
.form-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin: 0 24rpx;
  overflow: hidden;
}

.form-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 112rpx;
  padding: 0 28rpx;
}

.selector-row {
  /* 点击区域整行 */
}

.row-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 180rpx;
  flex-shrink: 0;
}

.row-label {
  font-size: 28rpx;
  color: #222222;
  font-weight: 500;
}

.optional-badge {
  font-size: 20rpx;
  color: #999999;
  margin-left: 8rpx;
  background-color: #f5f5f5;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
}

.row-right {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.row-input {
  flex: 1;
  font-size: 28rpx;
  color: #222222;
  height: 80rpx;
  line-height: 80rpx;
}

.row-tip-icon {
  font-size: 36rpx;
  color: #aaaaaa;
  padding: 0 8rpx;
}

.camera-btn {
  font-size: 42rpx;
  padding: 0 4rpx;
  color: #555555;
}

.selector-value-wrap {
  flex: 1;
}

.selector-value {
  font-size: 28rpx;
  color: #222222;
}

.selector-value.placeholder {
  color: #c0c4cc;
}

.arrow-icon {
  font-size: 40rpx;
  color: #cccccc;
  padding-left: 8rpx;
}

.divider {
  height: 1rpx;
  background-color: #f2f2f2;
  margin-left: 28rpx;
}

/* ── 安全说明 ────────────────────────────── */
.desc-area {
  padding: 24rpx 32rpx 0;
}

.desc-text {
  font-size: 22rpx;
  color: #aaaaaa;
  line-height: 1.7;
}

.bottom-placeholder {
  height: 160rpx;
}

/* ── 底部按钮栏 ──────────────────────────── */
.bottom-bar {
  background-color: #ffffff;
  padding: 20rpx 32rpx 0;
  border-top-width: 1rpx;
  border-top-style: solid;
  border-top-color: #f0f0f0;
}

.next-btn {
  border-radius: 56rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-btn-active {
  background-color: #e23636;
}

.next-btn-disabled {
  background-color: #f5a0a0;
}

.next-btn-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 600;
}

/* ── 弹层背景蒙层 ────────────────────────── */
.picker-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ── 银行选择面板 ────────────────────────── */
.picker-panel {
  background-color: #ffffff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  max-height: 75%;
  display: flex;
  flex-direction: column;
}

.picker-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 20rpx;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #f0f0f0;
}

.picker-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222222;
}

.picker-close {
  font-size: 36rpx;
  color: #999999;
  padding: 8rpx;
}

.picker-scroll {
  flex: 1;
}

.picker-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #f7f7f7;
}

.picker-item-active {
  background-color: #fff5f5;
}

.bank-logo-placeholder {
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background-color: #e23636;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.bank-logo-text {
  font-size: 22rpx;
  color: #ffffff;
  font-weight: bold;
}

.picker-item-name {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.picker-check {
  font-size: 32rpx;
  color: #e23636;
  font-weight: bold;
}

/* ── 支行输入面板 ────────────────────────── */
.branch-panel {
  background-color: #ffffff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding-bottom: 40rpx;
}

.branch-input-wrap {
  margin: 24rpx 32rpx;
  background-color: #f7f7f7;
  border-radius: 12rpx;
  padding: 0 24rpx;
}

.branch-input {
  height: 96rpx;
  font-size: 28rpx;
  color: #222222;
  width: 100%;
}

.branch-confirm-btn {
  margin: 0 32rpx;
  height: 88rpx;
  background-color: #e23636;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.branch-confirm-text {
  font-size: 30rpx;
  color: #ffffff;
  font-weight: 600;
}
</style>
