<template>
  <view class="invoice-apply">
    <view class="content">
      <!-- 发票类型 -->
      <view class="form-item">
        <text class="label">发票类型</text>
        <view class="type-select">
          <view
            class="type-option"
            :class="{ active: form.invoiceType === '1' }"
            @click="form.invoiceType = '1'"
          >
            <view class="type-icon">个</view>
            <view class="type-info">
              <text class="type-name">普通发票</text>
              <text class="type-desc">个人/非企业单位</text>
            </view>
          </view>
          <view
            class="type-option"
            :class="{ active: form.invoiceType === '2' }"
            @click="form.invoiceType = '2'"
          >
            <view class="type-icon enterprise">企</view>
            <view class="type-info">
              <text class="type-name">增值税发票</text>
              <text class="type-desc">企业/可抵扣</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 发票抬头 -->
      <view class="form-item column">
        <text class="label">发票抬头</text>
        <input
          class="input"
          v-model="form.name"
          placeholder="请输入公司全称或个人姓名"
        />
        <text class="hint">请确保发票抬头与公司营业执照或个人身份证上的名称一致。</text>
      </view>

      <!-- 纳税人识别号（企业才显示） -->
      <view class="form-item column" v-if="form.invoiceType === '2'">
        <text class="label">纳税人识别号</text>
        <input
          class="input"
          v-model="form.taxno"
          placeholder="请输入纳税人识别号"
          maxlength="20"
        />
        <text class="hint">企业税务登记证上的号码，一般为 15、18 或 20 位</text>
      </view>

      <!-- 接收方式 -->
      <view class="form-item">
        <text class="label">接收方式</text>
        <view class="method-select">
          <view class="method-option active">
            <view class="method-icon">邮</view>
            <view class="method-info">
              <text class="method-name">电子发票</text>
              <text class="method-desc">发送至邮箱</text>
            </view>
            <view class="method-tag">推荐</view>
          </view>
        </view>
      </view>

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

      <!-- 接收邮箱 -->
      <view class="form-item column">
        <text class="label">接收邮箱号码</text>
        <input
          class="input"
          v-model="form.phone"
          placeholder="请输入接收发票的邮箱号码"
          type="text"
        />
        <text class="hint">电子发票将在 3-5 个工作日内发送至该邮箱</text>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="btn-wrap">
      <view class="submit-btn" :class="{ loading: submitting }" @click="handleSubmit">
        {{ submitting ? '提交中...' : '提交申请' }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { outputInvoiceNo } from '@/common/api.js';

const submitting = ref(false);

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

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

// 表单验证
const validateForm = () => {
  // 发票抬头校验
  if (!form.name) {
    uni.showToast({ title: '请输入发票抬头', icon: 'none' });
    return false;
  }
  if (form.name.length < 2 || form.name.length > 100) {
    uni.showToast({ title: '发票抬头长度在2-100个字符之间', icon: 'none' });
    return false;
  }

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

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

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

  return true;
};

// 提交发票申请（与PC逻辑完全一致）
const handleSubmit = async () => {
  if (submitting.value) return;
  if (!validateForm()) return;

  submitting.value = true;
  console.log('提交表单数据:', form);
  try {
    await outputInvoiceNo(form);
    uni.showToast({
      title: '开票申请提交成功',
      icon: 'success'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (error) {
    submitting.value = false;
    // 错误已由 request.js 处理
  } finally {
    submitting.value = false;
  }
};
</script>

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

.content {
  padding: 20rpx;
}

.form-item {
  background: #fff;
  padding: 24rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;

  &.column {
    display: flex;
    flex-direction: column;
  }

  .label {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 16rpx;
  }

  .input {
    width: 100%;
    font-size: 28rpx;
    color: #333;
    padding: 0 24rpx;
    box-sizing: border-box;
    background: transparent;
    min-width: 0;
    text-align: left;
    border: 1rpx solid #ccc;
    border-radius: 8rpx;
    height: 80rpx;
    line-height: 80rpx;
    
    &::placeholder {
      color: #999;
      font-size: 28rpx;
      line-height: 80rpx;
    }
  }

  .form-item.column .input {
    width: 100%;
    display: block;
  }

  .hint {
    font-size: 24rpx;
    color: #909399;
    margin-top: 8rpx;
  }

  .amount {
    font-size: 32rpx;
    color: #AD181F;
    font-weight: 600;
  }
}

/* 发票类型选择 */
.type-select {
  display: flex;
  gap: 20rpx;
  margin-top: 10rpx;
}

.type-option {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #e4e7ed;
  border-radius: 12rpx;
  background: #fafafa;

  &.active {
    border-color: #AD181F;
    background: #FFF5F5;
  }

  .type-icon {
    width: 60rpx;
    height: 60rpx;
    background: #f5f7ff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #409eff;
    font-weight: 600;
    margin-right: 16rpx;

    &.enterprise {
      background: #f0f6ff;
      color: #1561CB;
    }
  }

  &.active .type-icon {
    background: #AD181F;
    color: #fff;
  }

  .type-info {
    display: flex;
    flex-direction: column;

    .type-name {
      font-size: 28rpx;
      font-weight: 600;
      color: #303133;
    }

    .type-desc {
      font-size: 22rpx;
      color: #909399;
      margin-top: 4rpx;
    }
  }
}

/* 接收方式选择 */
.method-select {
  margin-top: 10rpx;
}

.method-option {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #e4e7ed;
  border-radius: 12rpx;
  background: #fafafa;

  &.active {
    border-color: #AD181F;
    background: #FFF5F5;
  }

  .method-icon {
    width: 60rpx;
    height: 60rpx;
    background: #f5f7ff;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #409eff;
    font-weight: 600;
    margin-right: 16rpx;
  }

  &.active .method-icon {
    background: #AD181F;
    color: #fff;
  }

  .method-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .method-name {
      font-size: 28rpx;
      font-weight: 600;
      color: #303133;
    }

    .method-desc {
      font-size: 22rpx;
      color: #909399;
      margin-top: 4rpx;
    }
  }

  .method-tag {
    font-size: 20rpx;
    color: #67C23A;
    background: #f0f9f0;
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
  }
}

/* 提交按钮 */
.btn-wrap {
  width: 100%;
  background-color: #fff;
  padding: 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

.submit-btn {
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  width: 100%;
  background: #AD181F;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  font-weight: 500;

  &.loading {
    background: #c0c4cc;
  }
}
</style>