<template>
  <view class="invoice-apply">
    <!-- 成功确认弹框 -->
    <view class="success-modal" v-if="showSuccessModal">
      <view class="success-mask" @click="closeSuccessModal"></view>
      <view class="success-content">
        <view class="success-icon">✓</view>
        <view class="success-title">发票申请提交成功！</view>
        <view class="success-desc">您的发票申请已成功提交，我们将在1-7个工作日内为您处理。</view>
        <button class="success-btn" @click="closeSuccessModal">确定</button>
      </view>
    </view>

    <view class="content">
      <!-- 发票信息标题 -->
      <view class="section-header">
        <text class="section-title">发票信息</text>
        <text class="section-hint">请填写开票信息</text>
      </view>

      <!-- 发票类型 -->
      <view class="form-item">
        <text class="label">发票类型</text>
        <view class="type-select">
          <view
            v-if="!personalInvoiceMode"
            :class="{ active: form.type === '0' }"
            class="type-option"
            @click="form.type = '0'"
          >
            <view class="type-icon enterprise">
              <text class="icon-text">企</text>
            </view>
            <view class="type-info">
              <text class="type-name">企业单位</text>
            </view>
          </view>
          <view
            v-if="showIndividualType"
            :class="{ active: form.type === '1' }"
            class="type-option"
            @click="form.type = '1'"
          >
            <view class="type-icon">
              <text class="icon-text">个</text>
            </view>
            <view class="type-info">
              <text class="type-name">个人/非企业</text>
            </view>
          </view>
       
        </view>
      </view>

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

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

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

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

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

const app = getApp();
const submitting = ref(false);
const showSuccessModal = ref(false);
const showIndividualType = ref(true);
const personalInvoiceMode = ref(false);

// 表单数据
const form = reactive({
  id: '',           // 订单ID
  name: '',          // 发票抬头
  taxno: '',         // 纳税人识别号
  type: '0',         // 发票类型：1=个人 0=企业
  amount: 0          // 金额
});

// 页面加载
onLoad((options) => {
  if (options.id || options.orderId) {
    form.id = options.id || options.orderId;
    form.amount = options.amount || 0;
  }

  // 自动填充发票抬头和纳税人识别号（与PC端一致）
  const memberInfo = app.globalData.memberInfo

  if (options.personalInvoice == '1') {
    personalInvoiceMode.value = true
    form.type = '1'
    form.name = decodeURIComponent(options.invoiceTitle || '') || ''
    form.taxno = ''
    showIndividualType.value = true
    return
  }


  const isB2B = options.payType ? options.payType == '3' : options.ziZhangBu == '1'

  // 对公转账默认只能开企业发票，隐藏个人选项。
  if (isB2B) {
    form.type = '0'
    showIndividualType.value = false
  } else {
    showIndividualType.value = true
  }
  if (memberInfo && isB2B) {
    form.name = memberInfo.companyName || ''
    form.taxno = memberInfo.creditCode || ''
  }

  console.log('非税开票参数:', options)
});

// 表单验证
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.type === '0' && !form.taxno) {
    uni.showToast({title: '请输入纳税人识别号', icon: 'none'});
    return false;
  }

  // 纳税人识别号格式校验
  if (form.type === '0' ) {
    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;
    }
  }

  return true;
};

// 提交非税发票申请
const handleSubmit = async () => {
  if (submitting.value) return;
  if (!validateForm()) return;

  submitting.value = true;
  console.log('提交非税开票表单数据:', form);
  try {
    await outputInvoiceNoFeisui(form);
    showSuccessModal.value = true;
  } catch (error) {
    console.log('非税开票失败:', error);
    submitting.value = false;
  } finally {
    submitting.value = false;
  }
};

// 关闭弹框并返回
function closeSuccessModal() {
  showSuccessModal.value = false;
  uni.navigateBack();
}
</script>

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

.content {
  padding: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 10rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #303133;
  }

  .section-hint {
    font-size: 24rpx;
    color: #909399;
    padding: 6rpx 16rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
  }
}

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

  &.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 #e4e7ed;
    border-radius: 8rpx;
    height: 80rpx;
    line-height: 80rpx;

    &::placeholder {
      color: #999;
      font-size: 28rpx;
    }
  }

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

  .amount {
    font-size: 36rpx;
    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: #faf4f4;
  transition: all 0.3s;

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

  .type-icon {
    width: 60rpx;
    height: 60rpx;
    background: #fbd9d9;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;

    .icon-text {
      font-size: 28rpx;
      font-weight: 600;
      color: #AD181F;
    }

    &.enterprise {
      background: #fbd9d9;

      .icon-text {
        color: #AD181F;
      }
    }
  }

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

    .icon-text {
      color: #fff;
    }

    &.enterprise {
      background: #AD181F;
    }
  }

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

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

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

.submit-btn {
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  width: 100%;
  background: linear-gradient(135deg, #AD181F 0%, #c42a2a 100%);
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  font-weight: 500;

  &.loading {
    background: #c0c4cc;
  }
}

/* 成功弹框 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.success-content {
  position: relative;
  width: 560rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 50rpx 40rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.success-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #f0f9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  font-size: 48rpx;
  color: #52c41a;
}

.success-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  text-align: center;
}

.success-desc {
  font-size: 26rpx;
  color: #999;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40rpx;
}

.success-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #AD181F;
  color: #fff;
  font-size: 30rpx;
  border-radius: 40rpx;
  border: none;
  text-align: center;
}

.success-btn::after {
  border: none;
}
</style>