<template>
  <view class="invoice-apply">
    <view class="content">
      <!-- 发票类型 -->
      <view class="form-item">
        <text class="label">发票类型</text>
        <text class="value">{{ form.invoiceType === '2' ? '普通发票(企业)' : '普通发票(个人)' }}</text>
      </view>

      <!-- 发票抬头 -->
      <view class="form-item">
        <text class="label">发票抬头</text>
        <input 
          class="input" 
          v-model="form.name" 
          placeholder="请输入公司全称或个人姓名"
          placeholder-style="color: #999;"
        />
      </view>

      <!-- 纳税人识别号（企业才显示） -->
      <view class="form-item" v-if="form.invoiceType === '2'">
        <text class="label">纳税人识别号</text>
        <input 
          class="input" 
          v-model="form.taxno" 
          placeholder="请输入纳税人识别号"
          placeholder-style="color: #999;"
          maxlength="20"
        />
      </view>

      <!-- 开票金额 -->
      <view class="form-item">
        <text class="label">开票金额</text>
        <text class="amount">¥ {{ (Number(form.amount)).toFixed(2) }}</text>
      </view>

      <!-- 接收方式 -->
      <view class="form-item">
        <text class="label">接收方式</text>
        <text class="value">电子邮箱</text>
      </view>

      <!-- 接收邮箱 -->
      <view class="form-item">
        <text class="label">接收邮箱</text>
        <input 
          class="input" 
          v-model="form.email" 
          placeholder="请输入接收发票的邮箱（必填）"
          placeholder-style="color: #999;"
        />
      </view>
    </view>

    <view class="hint">电子发票将在3-5个工作日内发送至该邮箱</view>

    <!-- 提交按钮 -->
    <view class="btn-wrap" @click="submitInvoice">
      <view class="submit-btn">提交申请</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { outputInvoiceNo } from '@/common/api.js'; // 与PC端接口一致

// 表单数据（与PC端字段完全对齐）
const form = reactive({
  invoiceType: '1', // 1=个人 2=企业
  name: '',        // 发票抬头
  taxno: '',       // 纳税人识别号
  email: '',       // 邮箱
  amount: 0,       // 金额
  id: ''           // 订单ID
});

// 页面加载（接收PC端传来的参数）
onLoad((options) => {
  if (options.id || options.orderId) {
    form.id = options.id|| options.orderId;
    form.amount = options.amount;
    console.log(33,form.amount);
  }
  if (options.invoiceType) {
    form.invoiceType = options.invoiceType;
  }
  // getOrderInfo();
});

// 获取订单金额
// const getOrderInfo = async () => {
//   try {
//     // 这里替换成你真实获取订单金额的接口
//      = 1500;
//   } catch (error) {
//     uni.showToast({ title: '获取订单信息失败', icon: 'none' });
//   }
// };

// 提交发票申请（与PC逻辑完全一致）
const submitInvoice = async () => {
  // 1. PC端逻辑：个人不允许开票
  if (form.invoiceType === '1') {
    return uni.showToast({ title: '暂不支持个人开票', icon: 'none' });
  }

  // 2. 抬头校验
  if (!form.name) {
    return uni.showToast({ title: '请输入发票抬头', icon: 'none' });
  }

  // 3. 企业必须填纳税人识别号
  if (form.invoiceType === '2' && !form.taxno) {
    return uni.showToast({ title: '请输入纳税人识别号', icon: 'none' });
  }

  // 4. 纳税人识别号格式校验（同PC）
  const taxReg = /^[A-Z0-9]{15}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/;
  if (form.invoiceType === '2' && !taxReg.test(form.taxno)) {
    return uni.showToast({ title: '纳税人识别号格式不正确', icon: 'none' });
  }

  // 5. 邮箱校验
  const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (!form.email) {
    return uni.showToast({ title: '请输入接收邮箱', icon: 'none' });
  }
  if (!emailReg.test(form.email)) {
    return uni.showToast({ title: '请输入正确的邮箱地址', icon: 'none' });
  }

  try {
    // 调用PC端同一个接口：outputInvoiceNo
    await outputInvoiceNo(form);

    uni.showToast({
      title: '发票申请提交成功！',
      icon: 'success',
      duration: 2000
    });

    setTimeout(() => {
      uni.navigateBack();
    }, 2000);
  } catch (error) {
    uni.showToast({ title: '提交失败，请检查信息', icon: 'none' });
  }
};
</script>

<style lang="scss" scoped>
.invoice-apply {
  min-height: 100vh;
  background: #f5f7fa;

  .content {
    padding: 20rpx;

    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      padding: 24rpx;
      border-bottom: 1rpx solid #eee;

      .label {
        font-size: 28rpx;
        color: #333;
      }

      .input {
        width: 80%;
        font-size: 28rpx;
        color: #333;
        padding: 16rpx 0;
        text-align: right;
      }

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

      .amount {
        font-size: 28rpx;
        color: #e4393c;
        font-weight: 500;
      }
    }
  }

  .hint {
    font-size: 26rpx;
    color: #B6BCC0;
    margin-top: 20rpx;
    text-align: center;
  }

  .btn-wrap {
    width: 100%;
    background-color: #fff;
    padding: 30rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .submit-btn {
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 35rpx;
    width: 90%;
    margin: 0 auto;
    background: #AD181F;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
  }
}
</style>