<template>
  <el-dialog
    v-model="showDialog"
    title="开票"
    width="1000"
    destroy-on-close
  >
    
    <div class="invoice-apply-container">
      <!--      &lt;!&ndash; 步骤条 &ndash;&gt;-->
      <!--      <el-steps :active="currentStep" finish-status="success" simple>-->
      <!--        <el-step title="支付完成"  icon="Check" />-->
      <!--        <el-step title="填写发票" icon="Edit" />-->
      <!--        <el-step title="提交成功" icon="CircleCheck" />-->
      <!--      </el-steps>-->
      
      <!--      &lt;!&ndash; 支付信息卡片 &ndash;&gt;-->
      <!--      <el-card class="payment-card" shadow="hover">-->
      <!--        <template #header>-->
      <!--          <div class="card-header">-->
      <!--            <span class="card-title">支付信息</span>-->
      <!--            <el-tag type="success" size="small">支付已完成</el-tag>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--        -->
      <!--        <PaymentInfo-->
      <!--          :order-info="orderInfo"-->
      <!--          :loading="loading"-->
      <!--        />-->
      <!--      </el-card>-->
      <!--      -->
      <!-- 发票信息表单 -->
      <el-card class="invoice-form-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">发票信息</span>
            <el-tag type="info" size="small">请填写开票信息</el-tag>
          </div>
        </template>
        
        <el-form
          ref="invoiceFormRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          label-position="top"
          class="invoice-form"
          @submit.prevent="handleSubmit"
        >
          <!-- 发票类型 -->
          <el-form-item label="发票类型" prop="invoiceType" class="form-section">
            <InvoiceTypeSelector
              v-model="formData.invoiceType"
              :type="type"
              @type-change="handleInvoiceTypeChange"
            />
          </el-form-item>
          
          <!-- 发票抬头 -->
          <el-form-item label="发票抬头" prop="name" class="form-section">
            <el-input
              v-model="formData.name"
              placeholder="请输入公司全称或个人姓名"
              clearable
              prefix-icon="OfficeBuilding"
              size="large"
            />
            <div class="form-hint">请确保发票抬头与公司营业执照或个人身份证上的名称一致</div>
          </el-form-item>
          
          <!-- 企业发票额外字段 -->
          <div v-if="isEnterprise" class="enterprise-fields">
            <el-form-item label="纳税人识别号" prop="taxno">
              <el-input
                v-model="formData.taxno"
                placeholder="请输入纳税人识别号"
                clearable
                prefix-icon="Tickets"
                maxlength="20"
                show-word-limit
              />
              <div class="form-hint">企业税务登记证上的号码，一般为15、18或20位</div>
            </el-form-item>
            
            <!--            <el-row :gutter="20">-->
            <!--              <el-col :xs="24" :sm="12">-->
            <!--                <el-form-item label="纳税人识别号" prop="taxNumber">-->
            <!--                  <el-input-->
            <!--                    v-model="formData.taxNumber"-->
            <!--                    placeholder="请输入纳税人识别号"-->
            <!--                    clearable-->
            <!--                    prefix-icon="Tickets"-->
            <!--                    maxlength="20"-->
            <!--                    show-word-limit-->
            <!--                  />-->
            <!--                  <div class="form-hint">企业税务登记证上的号码，一般为15、18或20位</div>-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--              <el-col :xs="24" :sm="12">-->
            <!--                <el-form-item label="公司地址" prop="companyAddress">-->
            <!--                  <el-input-->
            <!--                    v-model="formData.companyAddress"-->
            <!--                    placeholder="请输入公司注册地址"-->
            <!--                    clearable-->
            <!--                    prefix-icon="Location"-->
            <!--                  />-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <!--            -->
            <!--            <el-row :gutter="20">-->
            <!--              <el-col :xs="24" :sm="12">-->
            <!--                <el-form-item label="公司电话" prop="companyPhone">-->
            <!--                  <el-input-->
            <!--                    v-model="formData.companyPhone"-->
            <!--                    placeholder="请输入公司联系电话"-->
            <!--                    clearable-->
            <!--                    prefix-icon="Phone"-->
            <!--                  />-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--              <el-col :xs="24" :sm="12">-->
            <!--                <el-form-item label="开户银行" prop="bankName">-->
            <!--                  <el-input-->
            <!--                    v-model="formData.bankName"-->
            <!--                    placeholder="请输入开户银行名称"-->
            <!--                    clearable-->
            <!--                    prefix-icon="BankCard"-->
            <!--                  />-->
            <!--                </el-form-item>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <!--            -->
            <!--            <el-form-item label="银行账号" prop="bankAccount">-->
            <!--              <el-input-->
            <!--                v-model="formData.bankAccount"-->
            <!--                placeholder="请输入银行账号"-->
            <!--                clearable-->
            <!--                prefix-icon="CreditCard"-->
            <!--                maxlength="20"-->
            <!--              />-->
            <!--              <div class="form-hint">银行账号应为16-19位数字</div>-->
            <!--            </el-form-item>-->
          
          </div>
          
          <!--          &lt;!&ndash; 发票内容 &ndash;&gt;-->
          <!--          <el-form-item label="发票内容" prop="invoiceContent" class="form-section">-->
          <!--            <el-select-->
          <!--              v-model="formData.invoiceContent"-->
          <!--              placeholder="请选择开票内容"-->
          <!--              clearable-->
          <!--              style="width: 100%;"-->
          <!--              size="large"-->
          <!--            >-->
          <!--              <el-option label="体育服务费" value="0" />-->
          <!--              &lt;!&ndash;              <el-option label="技术服务费" value="technology" />&ndash;&gt;-->
          <!--              &lt;!&ndash;              <el-option label="咨询服务费" value="consulting" />&ndash;&gt;-->
          <!--              &lt;!&ndash;              <el-option label="培训服务费" value="training" />&ndash;&gt;-->
          <!--              <el-option label="其他" value="5" />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <!--          -->
          <!-- 接收方式 -->
          <el-form-item label="接收方式" prop="deliveryMethod" class="form-section">
            <DeliveryMethod
              v-model="formData.deliveryMethod"
              @delivery-change="handleDeliveryChange"
            />
          </el-form-item>
          
          <!-- 邮箱输入 -->
          <div v-if="!isPaperInvoice" class="form-section">
            <el-form-item label="接收短信号码" prop="phone">
              <el-input
                v-model="formData.phone"
                placeholder="请输入接收发票的手机号码"
                clearable
                prefix-icon="Phone"
                type="Phone"
              />
              <div class="form-hint">电子发票将在3-5个工作日内发送至该短信</div>
            </el-form-item>
          </div>
          
          <!--          &lt;!&ndash; 邮寄地址（纸质发票） &ndash;&gt;-->
          <!--          <div v-if="isPaperInvoice" class="address-fields form-section">-->
          <!--            <el-row :gutter="20">-->
          <!--              <el-col :xs="24" :sm="12">-->
          <!--                <el-form-item label="收件人" prop="recipient">-->
          <!--                  <el-input-->
          <!--                    v-model="formData.recipient"-->
          <!--                    placeholder="请输入收件人姓名"-->
          <!--                    clearable-->
          <!--                    prefix-icon="User"-->
          <!--                  />-->
          <!--                </el-form-item>-->
          <!--              </el-col>-->
          <!--              <el-col :xs="24" :sm="12">-->
          <!--                <el-form-item label="联系电话" prop="phone">-->
          <!--                  <el-input-->
          <!--                    v-model="formData.phone"-->
          <!--                    placeholder="请输入联系电话"-->
          <!--                    clearable-->
          <!--                    prefix-icon="Iphone"-->
          <!--                  />-->
          <!--                </el-form-item>-->
          <!--              </el-col>-->
          <!--            </el-row>-->
          <!--            -->
          <!--            <el-form-item label="详细地址" prop="address">-->
          <!--              <el-input-->
          <!--                v-model="formData.address"-->
          <!--                type="textarea"-->
          <!--                placeholder="请输入收件地址（省、市、区、街道、门牌号）"-->
          <!--                :rows="3"-->
          <!--                resize="none"-->
          <!--                maxlength="200"-->
          <!--                show-word-limit-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </div>-->
          
          <!--          &lt;!&ndash; 备注 &ndash;&gt;-->
          <!--          <el-form-item label="备注信息" prop="remark" class="form-section">-->
          <!--            <el-input-->
          <!--              v-model="formData.remark"-->
          <!--              type="textarea"-->
          <!--              placeholder="如有其他开票要求，请在此处填写（选填）"-->
          <!--              :rows="3"-->
          <!--              resize="none"-->
          <!--              maxlength="500"-->
          <!--              show-word-limit-->
          <!--            />-->
          <!--            <div class="form-hint">备注信息将作为开票参考，最多500字</div>-->
          <!--          </el-form-item>-->
          
          <!-- 表单操作 -->
          <el-form-item class="form-actions">
            <el-space :size="20">
              <!--              <el-button-->
              <!--                type="info"-->
              <!--                icon="ArrowLeft"-->
              <!--                :disabled="submitting"-->
              <!--                @click="handleBack"-->
              <!--              >-->
              <!--                返回订单-->
              <!--              </el-button>-->
              <el-button
                type="primary"
                icon="CircleCheck"
                :loading="submitting"
                size="large"
                @click="handleSubmit"
              >
                {{ submitting ? '提交中...' : '提交申请' }}
              </el-button>
              <!--              <el-button-->
              <!--                type="default"-->
              <!--                icon="Refresh"-->
              <!--                :disabled="submitting"-->
              <!--                @click="handleReset"-->
              <!--              >-->
              <!--                重置表单-->
              <!--              </el-button>-->
            </el-space>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!--      &lt;!&ndash; 提示信息卡片 &ndash;&gt;-->
      <!--      <el-card class="tips-card" shadow="never">-->
      <!--        <template #header>-->
      <!--          <div class="card-header">-->
      <!--            <span class="card-title">-->
      <!--              <el-icon><Warning /></el-icon>-->
      <!--              发票申请须知-->
      <!--            </span>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--        -->
      <!--        <ul class="tips-list">-->
      <!--          <li>发票将在申请提交后3-7个工作日内开具，节假日顺延</li>-->
      <!--          <li>电子发票与纸质发票具有同等法律效力，可用于报销</li>-->
      <!--          <li>增值税专用发票需提供完整、准确的企业开票信息</li>-->
      <!--          <li>发票金额为实际支付金额，不含折扣、优惠券等减免金额</li>-->
      <!--          <li>如需修改发票信息，请在开票前联系客服处理</li>-->
      <!--          <li>申请成功后，可在"开票记录"中查看发票状态</li>-->
      <!--        </ul>-->
      <!--      </el-card>-->
    </div>
  </el-dialog>

</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  ElMessage,
  ElMessageBox
} from 'element-plus'

// 导入组件
// import PaymentInfo from './PaymentInfo.vue'
import InvoiceTypeSelector from './InvoiceTypeSelector.vue'
import DeliveryMethod from './DeliveryMethod.vue'
import { outputInvoiceNo } from '@/api/makeInvoic'
import { getCurrentInstance } from 'vue'

const emit = defineEmits(['handelSuccess'])

const router = useRouter()
const invoiceFormRef = ref(null)
const showDialog = ref(false)
// 响应式数据
const orderInfo = ref({
  orderNo: '',
  paymentTime: '',
  paymentAmount: '',
  serviceType: '',
  paymentMethod: ''
})
const id = ref('')

const { proxy } = getCurrentInstance()
const formData = reactive({
  invoiceType: '1',
  name: '',
  taxNumber: '',
  companyAddress: '',
  companyPhone: '',
  bankName: '',
  bankAccount: '',
  invoiceContent: '0',
  deliveryMethod: 'email',
  email: 'user@example.com',
  recipient: '',
  phone: '',
  address: '',
  remark: ''
})

// 状态
const loading = ref(false)
const submitting = ref(false)
const type = ref(1)

// 计算属性
const isEnterprise = computed(() => formData.invoiceType === '2')
const isPaperInvoice = computed(() => formData.deliveryMethod === 'paper')

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入发票抬头', trigger: 'blur' },
    { min: 2, max: 100, message: '发票抬头长度在2-100个字符之间', trigger: 'blur' }
  ],
  taxno: [
    {
      required: isEnterprise,
      message: '请输入纳税人识别号',
      trigger: 'blur'
    },
    {
      pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
      message: '纳税人识别号格式不正确',
      trigger: 'blur'
    }
  ],
  invoiceContent: [
    { required: true, message: '请选择开票内容', trigger: 'change' }
  ],
  email: [
    {
      required: !isPaperInvoice.value,
      message: '请输入接收邮箱',
      trigger: 'blur'
    },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: 'blur'
    }
  ],
  recipient: [
    {
      required: isPaperInvoice,
      message: '请输入收件人',
      trigger: 'blur'
    },
    { min: 2, max: 20, message: '收件人长度在2-20个字符之间', trigger: 'blur' }
  ],
  phone: [
    {
      required: true,
      message: '请输入联系电话',
      trigger: 'blur'
    },
    {
      pattern: /^1[2-9]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  address: [
    {
      required: isPaperInvoice,
      message: '请输入详细地址',
      trigger: 'blur'
    },
    { min: 5, max: 200, message: '地址长度在5-200个字符之间', trigger: 'blur' }
  ],
  bankAccount: [
    {
      pattern: /^\d{16,19}$/,
      message: '银行账号应为16-19位数字',
      trigger: 'blur'
    }
  ]
})

// 生命周期钩子
onMounted(async() => {
  await loadOrderInfo()
})

const open = (row, val) => {
  showDialog.value = true
  formData.invoiceType = val
  id.value = row
  type.value = val
}

// 方法
const loadOrderInfo = async() => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 从URL参数获取订单号
    const urlParams = new URLSearchParams(window.location.search)
    const orderNo = urlParams.get('orderNo') || 'OD2026022812345678'
    
    // 模拟数据
    orderInfo.value = {
      orderNo: orderNo,
      paymentTime: '2026-02-28 14:30:25',
      paymentAmount: '¥ 1,280.00',
      serviceType: '企业基础版（1年）',
      paymentMethod: '微信支付'
    }
  } catch (error) {
    console.error('加载订单信息失败:', error)
    ElMessage.error('加载订单信息失败，请刷新页面重试')
  } finally {
    loading.value = false
  }
}

const handleInvoiceTypeChange = (type) => {
  formData.invoiceType = type
  
  if (type === '1') {
    // 清除非必填的企业字段
    formData.taxNumber = ''
    formData.companyAddress = ''
    formData.companyPhone = ''
    formData.bankName = ''
    formData.bankAccount = ''
  }
}

const handleDeliveryChange = (method) => {
  formData.deliveryMethod = method
  
  if (method === 'email') {
    formData.email = localStorage.getItem('userEmail') || 'user@example.com'
  } else {
    formData.recipient = ''
    formData.phone = ''
    formData.address = ''
  }
}

const handleSubmit = async() => {
  if (!invoiceFormRef.value) return
  if (type.value == 1) {
    proxy.$modal.msgError('暂不支持开票')
    return
  }
  try {
    // 表单验证
    const valid = await invoiceFormRef.value.validate()
    if (!valid) return
    
    submitting.value = true
    formData.id = id.value
    await outputInvoiceNo(formData)
    
    
    // 显示成功消息
    ElMessage.success({
      message: '发票申请提交成功！',
      duration: 3000
    })
    
    emit('handelSuccess')
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败，请检查表单信息')
  } finally {
    submitting.value = false
  }
}

const handleReset = () => {
  ElMessageBox.confirm(
    '确定要重置表单吗？所有已填写的信息将被清空。',
    '重置确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }
  ).then(() => {
    if (invoiceFormRef.value) {
      invoiceFormRef.value.resetFields()
      formData.invoiceType = '1'
      formData.deliveryMethod = 'email'
      formData.email = 'user@example.com'
      formData.invoiceContent = 'software'
      ElMessage.success('表单已重置')
    }
  }).catch(() => {
    // 用户取消
  })
}

const handleBack = () => {
  ElMessageBox.confirm(
    '确定要返回吗？未保存的发票信息将会丢失。',
    '返回确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }
  ).then(() => {
    router.push('/order/detail')
  }).catch(() => {
    // 用户取消
  })
}

defineExpose({
  open
})
</script>

<style scoped>
.invoice-apply-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}

.payment-card,
.invoice-form-card,
.tips-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.card-header .card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section {
  margin-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.enterprise-fields {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  border: 1px solid #e9ecef;
}

.address-fields {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.form-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 6px;
  line-height: 1.4;
}

.form-actions {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips-list li {
  padding: 8px 0;
  color: #606266;
  font-size: 14px;
  position: relative;
  padding-left: 20px;
}

.tips-list li:before {
  content: "•";
  color: #409eff;
  position: absolute;
  left: 0;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .invoice-apply-container {
    padding: 10px;
  }
  
  .el-steps {
    margin-bottom: 20px;
  }
  
  .form-actions .el-space {
    flex-direction: column;
    width: 100%;
  }
  
  .form-actions .el-button {
    width: 100%;
  }
}
</style>