<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    align-center
    class="payment-dialog"
    title="对公转账"
    width="1000px"
    @close="handelClose"
  >
    <div class="dialog-content">
      <!-- 订单信息 -->
      <div class="info-row">
        <div class="label">订单号：</div>
        <div class="value">{{ form.tradeNo }}</div>
      </div>
      <div class="info-row">
        <div class="label">缴费单位：</div>
        <div class="value">{{ form.orderName ?? '——' }}</div>
      </div>
      <div class="info-row">
        <div class="label">订单金额：</div>
        <div class="value highlight">￥{{ form.price }}</div>
      </div>
      <!-- 转账提示 -->
      <div class="transfer-tip">
        请通过网上银行（网银）或银行柜台或手机银行
      </div>

      <!-- 转账信息卡片 -->
      <div class="bank-card">
        <div class="card-title">转账信息</div>
        <div class="bank-row">
          <span class="bank-label">收款人姓名：</span>
          <span class="bank-value">中国跆拳道协会</span>
          <el-button class="copyBtn" size="small" type="" @click="handelCoPy('秦琦五洋赫公司')">复制</el-button>
        </div>
        <div class="bank-row">
          <span class="bank-label">收款银行：</span>
          <span class="bank-value">中国民生银行</span>
          <el-button class="copyBtn" size="small" type="" @click="handelCoPy('中国民生银行')">复制</el-button>
        </div>
        <div class="bank-row">
          <span class="bank-label">收款卡号：</span>
          <span class="bank-value card-number">{{ form.ziZhangBu }}</span>
          <el-button class="copyBtn" size="small" type="" @click="handelCoPy( form.ziZhangBu )">复制</el-button>
        </div>
        <div class="bank-row">
          <span class="bank-label">收款金额：</span>
          <span class="bank-value card-number highlight">￥{{ form.price }}</span>
          <el-button class="copyBtn" size="small" type="" @click="handelCoPy(form.price)">复制</el-button>
        </div>
      </div>

      <!-- 金额输入区域 -->
      <div class="amount-section">
        <div class="amount-notice">
          <div class="notice-line">1. 请使用注册机构账号对公转账。</div>
          <div class="notice-line">2. 此订单将为您保留7天，请您及时支付。逾期未支付，订单将会自动取消。</div>
          <div class="notice-line">3. 请通过网上银行（网银）或银行柜台或手机银行向以下账号划转款项。</div>
          <div class="notice-line">4. 转账金额与订单金额必须保持一致，不得多转、少转。</div>
        </div>
      </div>

      <!-- 温馨提示 -->
      <div class="warning-tip">
        <el-alert
          show-icon
          title="温馨提示"
          type="warning"
        >
          <template #default>
            <div>1. 转账时请务必核对账户余额，否则造成的资金损失由您自行承担。</div>
            <div>2. 转账成功后请及时查询交易状态。</div>
          </template>
        </el-alert>
      </div>

      <br>
      <br>
      <br>
      <div style="text-align: center;">
        <el-button class="largeBtn" round type="" @click="handelClose">取 消</el-button>
        <el-button class="largeBtn" round type="primary" @click="handelClose">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { orderDetail } from '@/api/system/userInfo'
import { useRouter } from 'vue-router'

const emit = defineEmits(['handel-success'])
const dialogVisible = ref(false)
const id = ref()
const form = ref({})
const status = ref(0)
const router = useRouter()
const { proxy } = getCurrentInstance()

function open(row, type) {
  id.value = row
  getOrderDetail(id.value)
  dialogVisible.value = true
  status.value = type ?? 0
}

async function getOrderDetail() {
  if (!id.value) return
  const res = await orderDetail(id.value)
  form.value = res.data
}

const copySuccess = ref(false)

async function handelCoPy(val) {
  try {
    await navigator.clipboard.writeText(val)
    copySuccess.value = true
    proxy.$modal.msgSuccess('复制成功')
    setTimeout(() => {
      copySuccess.value = false
    }, 2000)
  } catch (err) {
    console.error('复制失败:', err)
    // 降级方案
    fallbackCopyText(val)
  }
}


// 降级方案（兼容旧浏览器）
const fallbackCopyText = (text) => {
  const textarea = document.createElement('textarea')
  textarea.value = text
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand('copy')
  document.body.removeChild(textarea)
  copySuccess.value = true
  proxy.$modal.msgSuccess('复制成功')
  setTimeout(() => {
    copySuccess.value = false
  }, 2000)
}

function handelClose() {
  switch (status.value) {
    case 1:
      router.replace('/member/memberPay')
      break
    // case 2:
    //   router.push('')
    //   break
    case 3:
      router.replace('/level/apply')

      break
    case 4:
      router.replace('/rank/score')
      break
    case 5:
      router.replace('/beyond/score')
      break
    default:
      dialogVisible.value = false
      emit('handel-success')
      break
  }
  dialogVisible.value = false
  emit('handel-success')
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.payment-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #e4e7ed;
    padding-bottom: 15px;

    .el-dialog__title {
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-dialog__footer) {
    border-top: 1px solid #e4e7ed;
    padding: 12px 20px;
  }
}

.dialog-content {
  .info-row {
    display: flex;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.5;

    .label {
      width: 140px;
      color: #606266;
      flex-shrink: 0;
    }

    .value {
      color: #303133;
      flex: 1;

      &.highlight {
        color: orange;
        background-color: transparent;
        //font-weight: 500;
      }
    }
  }

  .remark-text {
    background-color: #f5f7fa;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 18px;
    color: #909399;
    margin: 15px 0 12px 0;
    text-align: right;
  }

  .transfer-tip {
    background-color: #ecf5ff;
    color: #409eff;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 20px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
  }

  .bank-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;

    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e4e7ed;
    }

    .bank-row {
      margin-bottom: 20px;
      font-size: 20px;
      line-height: 1.4;

      .bank-label {
        color: #606266;
        display: inline-block;
        width: 140px;
      }

      .bank-value {
        color: #303133;
        font-weight: 500;

        &.card-number {
          font-family: monospace;
          letter-spacing: 1px;
          font-size: 20px;
        }
      }
    }
  }

  .amount-section {
    margin-bottom: 20px;

    .amount-label {
      font-size: 18px;
      color: #303133;
      margin-bottom: 8px;
      font-weight: 500;
    }

    .amount-input {
      margin-bottom: 12px;

      :deep(.el-input-group__prepend) {
        font-weight: 500;
        background-color: #f5f7fa;
      }
    }

    .amount-notice {
      background-color: #fef0f0;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 18px;
      color: #f56c6c;
      line-height: 1.6;

      .notice-line {
        margin-bottom: 4px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .warning-tip {
    margin-top: 8px;
    font-size: 18px;

    :deep(.el-alert) {
      background-color: #fdf6ec;
      border: none;
      padding: 8px 12px;

      .el-alert__content {
        color: #e6a23c;

        span {
          font-size: 20px;
        }

        div {
          margin-bottom: 4px;
          font-size: 18px !important;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.demo-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.highlight {
  color: orange !important;
  background-color: transparent;
}

.copyBtn {
  margin-left: 20px;
  position: relative;
  top: -3px;
}
</style>