<template>
  <view class="invoice-info-page">
    <!-- 状态栏 -->
    <view class="status-bar">
      <text class="time">9:41</text>
      <view class="status-icons">
        <view class="signal"></view>
        <view class="wifi"></view>
        <view class="battery"></view>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <text class="title">填写发票信息</text>
      <view class="info-btn" @click="showInfo">
        <text class="info-icon">!</text>
      </view>
    </view>
    
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 表单卡片 -->
      <view class="form-card">
        <!-- 发票抬头 -->
        <view class="form-field">
          <text class="field-label">发票抬头:</text>
          <input 
            class="field-input" 
            placeholder="请输入抬头名称(必填)" 
            placeholder-class="placeholder"
            v-model="formData.title"
          />
        </view>
        
        <!-- 分隔线 -->
        <view class="field-divider"></view>
        
        <!-- 单位税号 -->
        <view class="form-field">
          <text class="field-label">单位税号:</text>
          <input 
            class="field-input" 
            placeholder="请输入单位税号(必填)" 
            placeholder-class="placeholder"
            v-model="formData.taxId"
          />
        </view>
        
        <!-- 分隔线 -->
        <view class="field-divider"></view>
        
        <!-- 发票内容 -->
        <view class="form-field">
          <text class="field-label">发票内容:</text>
          <text class="field-value">{{ formData.content }}</text>
        </view>
        
        <!-- 分隔线 -->
        <view class="field-divider"></view>
        
        <!-- 发票金额 -->
        <view class="form-field">
          <text class="field-label">发票金额:</text>
          <text class="field-value amount">{{ formData.amount }}</text>
        </view>
        
        <!-- 分隔线 -->
        <view class="field-divider"></view>
        
        <!-- 电子邮箱 -->
        <view class="form-field">
          <text class="field-label">电子邮箱:</text>
          <input 
            class="field-input" 
            placeholder="请输入您的邮箱(必填)" 
            placeholder-class="placeholder"
            v-model="formData.email"
            type="email"
          />
        </view>
      </view>
    </view>
    
    <!-- 底部提交按钮 -->
    <view class="submit-section">
      <view class="submit-btn" @click="submitForm">
        <text class="submit-text">提交</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InvoiceInfo',
  data() {
    return {
      formData: {
        title: '',
        taxId: '',
        content: '培训费',
        amount: '¥59.00',
        email: ''
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showInfo() {
      uni.showToast({
        title: '发票信息说明',
        icon: 'none'
      })
    },
    submitForm() {
      // 验证必填字段
      if (!this.formData.title.trim()) {
        uni.showToast({
          title: '请输入发票抬头',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.taxId.trim()) {
        uni.showToast({
          title: '请输入单位税号',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.email.trim()) {
        uni.showToast({
          title: '请输入电子邮箱',
          icon: 'none'
        })
        return
      }
      
      // 验证邮箱格式
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!emailRegex.test(this.formData.email)) {
        uni.showToast({
          title: '请输入正确的邮箱格式',
          icon: 'none'
        })
        return
      }
      
      // 提交表单
      uni.showModal({
        title: '确认提交',
        content: '确认提交发票信息吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '提交成功',
              icon: 'none'
            })
            
            // 延迟返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.invoice-info-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx 0;
  height: 88rpx;
  
  .time {
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
  }
  
  .status-icons {
    display: flex;
    align-items: center;
    gap: 8rpx;
    
    .signal, .wifi, .battery {
      width: 24rpx;
      height: 24rpx;
      background-color: #000000;
      border-radius: 2rpx;
    }
  }
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      font-size: 48rpx;
      color: #ff0000;
      font-weight: bold;
    }
  }
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #ff0000;
  }
  
  .info-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .info-icon {
      color: #ffffff;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}

.main-content {
  padding: 30rpx;
  flex: 1;
}

.form-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.form-field {
  display: flex;
  align-items: center;
  padding: 30rpx;
  min-height: 80rpx;
  
  .field-label {
    font-size: 32rpx;
    color: #000000;
    font-weight: 500;
    min-width: 160rpx;
    margin-right: 20rpx;
  }
  
  .field-input {
    flex: 1;
    font-size: 32rpx;
    color: #000000;
    border: none;
    outline: none;
    background: transparent;
  }
  
  .field-value {
    flex: 1;
    font-size: 32rpx;
    color: #000000;
    
    &.amount {
      color: #ff0000;
      font-weight: 600;
    }
  }
  
  .placeholder {
    color: #cccccc;
  }
}

.field-divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 0 30rpx;
}

.submit-section {
  padding: 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
}

.submit-btn {
  background-color: #20b2aa;
  border-radius: 8rpx;
  padding: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .submit-text {
    color: #ffffff;
    font-size: 36rpx;
    font-weight: 600;
  }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .form-field {
    padding: 25rpx;
    
    .field-label {
      font-size: 28rpx;
      min-width: 140rpx;
    }
    
    .field-input, .field-value {
      font-size: 28rpx;
    }
  }
  
  .submit-btn {
    padding: 20rpx;
    
    .submit-text {
      font-size: 32rpx;
    }
  }
}
</style>
