<template>
  <view class="page-container" :style="containerStyle">
    <common-header title="发布活动" theme="activity" @back="goBack" />
    
    <view class="add-content">
      <!-- 表单卡片 -->
      <view class="form-card">
        <uni-forms ref="form" :model="formData" :rules="rules" label-width="120">
          <!-- 基础信息区域 -->
          <view class="form-section">
            <view class="section-title">
              <uni-icons type="info" size="16" color="#ff5722" />
              <text>基础信息</text>
            </view>
            
            <uni-forms-item label="活动标题" name="title" required>
              <uni-easyinput 
                v-model="formData.title" 
                placeholder="请输入活动标题"
                maxlength="50"
                :clearable="true" />
            </uni-forms-item>
            
            <uni-forms-item label="活动描述" name="description">
              <uni-easyinput 
                v-model="formData.description" 
                type="textarea" 
                placeholder="请输入活动描述，让用户了解活动详情"
                maxlength="200"
                :auto-height="true" />
            </uni-forms-item>
          </view>
          
          <!-- 时间设置区域 -->
          <view class="form-section">
            <view class="section-title">
              <uni-icons type="calendar" size="16" color="#ff5722" />
              <text>时间设置</text>
            </view>
            
            <uni-forms-item label="活动时间" name="startTime" required>
              <view class="datetime-wrapper">
                <uni-datetime-picker 
                  v-model="formData.startTime" 
                  type="datetime" 
                  placeholder="选择开始时间"
                  :clear-icon="true" />
                <uni-icons type="calendar-filled" size="16" color="#999" />
              </view>
            </uni-forms-item>
            
            <uni-forms-item label="结束时间" name="endTime" required>
              <view class="datetime-wrapper">
                <uni-datetime-picker 
                  v-model="formData.endTime" 
                  type="datetime" 
                  placeholder="选择结束时间"
                  :clear-icon="true" />
                <uni-icons type="calendar-filled" size="16" color="#999" />
              </view>
            </uni-forms-item>
          </view>
          
          <!-- 活动设置区域 -->
          <view class="form-section">
            <view class="section-title">
              <uni-icons type="gear" size="16" color="#ff5722" />
              <text>活动设置</text>
            </view>
            
            <uni-forms-item label="活动类型" name="type" required>
              <uni-data-select 
                v-model="formData.type" 
                :localdata="typeOptions" 
                placeholder="请选择活动类型" />
            </uni-forms-item>
            
            <uni-forms-item label="参与限制" name="participantLimit">
              <view class="number-input-wrapper">
                <uni-number-box 
                  v-model="formData.participantLimit" 
                  :min="0" 
                  :max="9999"
                  placeholder="0" />
                <text class="input-suffix">人（0表示无限制）</text>
              </view>
            </uni-forms-item>
          </view>
          
          <!-- 详细规则区域 -->
          <view class="form-section">
            <view class="section-title">
              <uni-icons type="list" size="16" color="#ff5722" />
              <text>详细规则</text>
            </view>
            
            <uni-forms-item label="活动规则" name="rules">
              <uni-easyinput 
                v-model="formData.rules" 
                type="textarea" 
                placeholder="请输入活动规则，如参与条件、活动流程等"
                maxlength="500"
                :auto-height="true" />
            </uni-forms-item>
            
            <uni-forms-item label="活动奖励" name="reward">
              <uni-easyinput 
                v-model="formData.reward" 
                placeholder="请输入活动奖励，如优惠券、积分、礼品等"
                maxlength="100"
                :clearable="true" />
            </uni-forms-item>
          </view>
        </uni-forms>
      </view>
      
      <!-- 操作按钮区域 -->
      <view class="action-section">
        <uni-button 
          class="action-btn draft-btn" 
          @click="saveDraft">
          <uni-icons type="folder" size="18" color="#666" />
          保存草稿
        </uni-button>
        <uni-button 
          class="action-btn publish-btn" 
          type="primary" 
          @click="submitForm">
          <uni-icons type="paperplane" size="18" color="#fff" />
          发布活动
        </uni-button>
      </view>
    </view>
  </view>
</template>

<script>
import CommonHeader from '@/components/common-header/common-header.vue'
import { createActivity } from '@/api/brewery/activity'

export default {
  components: {
    CommonHeader
  },
  
  data() {
    return {
      headerHeight: 96, // 默认头部高度
      formData: {
        title: '',
        description: '',
        startTime: '',
        endTime: '',
        type: '',
        rules: '',
        reward: '',
        participantLimit: 0,
        status: 0
      },
      typeOptions: [
        { value: '1', text: '限时抢购' },
        { value: '2', text: '满减活动' },
        { value: '3', text: '新人礼包' },
        { value: '4', text: '积分兑换' }
      ],

              rules: {
          title: {
            rules: [
              { required: true, errorMessage: '请输入活动标题' },
              { minLength: 2, maxLength: 50, errorMessage: '标题长度在2-50字符之间' }
            ]
          },
          description: {
            rules: [
              { maxLength: 200, errorMessage: '描述不能超过200字符' }
            ]
          },
          startTime: {
            rules: [{ required: true, errorMessage: '请选择开始时间' }]
          },
          endTime: {
            rules: [
              { required: true, errorMessage: '请选择结束时间' },
              {
                validateFunction: (rule, value, data) => {
                  if (data.startTime && value && new Date(value) <= new Date(data.startTime)) {
                    return '结束时间必须晚于开始时间'
                  }
                  return true
                }
              }
            ]
          },
          type: {
            rules: [{ required: true, errorMessage: '请选择活动类型' }]
          },
          rules: {
            rules: [
              { maxLength: 500, errorMessage: '规则不能超过500字符' }
            ]
          },
          reward: {
            rules: [
              { maxLength: 100, errorMessage: '奖励描述不能超过100字符' }
            ]
          }
        }
    }
  },
  
  computed: {
    containerStyle() {
      return {
        paddingTop: this.headerHeight + 'px'
      }
    }
  },
  
  onLoad() {
    this.listenHeaderHeight()
    this.calculateHeaderHeight()
  },
  
  onUnload() {
    uni.$off('header-height-updated', this.onHeaderHeightUpdated)
  },
  
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.formData.status = 1
        await this.saveActivity()
      } catch (error) {
        console.log('表单验证失败', error)
      }
    },
    
    async saveDraft() {
      this.formData.status = 0
      await this.saveActivity()
    },
    
    async saveActivity() {
      try {
        await createActivity(this.formData)
        this.$modal.showToast('保存成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        this.$modal.showToast('保存失败')
      }
    },
    
    // 监听头部高度变化
    listenHeaderHeight() {
      uni.$on('header-height-updated', this.onHeaderHeightUpdated)
    },
    
    // 头部高度更新处理
    onHeaderHeightUpdated(data) {
      this.headerHeight = data.headerHeight
    },
    
    // 直接计算头部高度
    calculateHeaderHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync()
        const statusBarHeight = systemInfo.statusBarHeight || 0
        let navBarHeight = 44
        
        // #ifdef MP-WEIXIN
        try {
          const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
          if (menuButtonInfo) {
            const topGap = menuButtonInfo.top - statusBarHeight
            const bottomGap = topGap
            navBarHeight = topGap + menuButtonInfo.height + bottomGap
          }
        } catch (e) {
          console.warn('获取胶囊按钮信息失败:', e)
        }
        // #endif
        
        // 确保最小高度
        if (navBarHeight < 44) {
          navBarHeight = 44
        }
        
        this.headerHeight = statusBarHeight + navBarHeight
      } catch (e) {
        console.warn('计算头部高度失败:', e)
        this.headerHeight = 96 // 使用默认值
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #f5f7fa 100%);
  box-sizing: border-box;
  
  // 头部间距将通过动态样式设置
  // 如果动态样式不生效，使用默认值
  padding-top: 96px;
}

.add-content {
  padding: 0 20rpx 40rpx;
}

.form-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f0f0f0;
  overflow: hidden;
}

.form-section {
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 32rpx 32rpx 24rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1a1a1a;
    background: linear-gradient(90deg, rgba(255, 87, 34, 0.05) 0%, rgba(255, 87, 34, 0.02) 100%);
    border-bottom: 1rpx solid #f5f5f5;
    
    text {
      flex: 1;
    }
  }
}

// 表单项样式优化
::v-deep .uni-forms-item {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f8f9fa;
  
  &:last-child {
    border-bottom: none;
  }
  
  .uni-forms-item__label {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }
  
  .uni-forms-item__content {
    .uni-easyinput__content {
      border: 1rpx solid #e5e7eb;
      border-radius: 12rpx;
      padding: 16rpx;
      font-size: 28rpx;
      transition: all 0.3s ease;
      
      &:focus-within {
        border-color: #ff5722;
        box-shadow: 0 0 0 3rpx rgba(255, 87, 34, 0.1);
      }
    }
    
    .uni-datetime-picker {
      border: 1rpx solid #e5e7eb;
      border-radius: 12rpx;
      padding: 16rpx;
      font-size: 28rpx;
      transition: all 0.3s ease;
      
      &:focus-within {
        border-color: #ff5722;
        box-shadow: 0 0 0 3rpx rgba(255, 87, 34, 0.1);
      }
    }
  }
}

.datetime-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  
  .uni-datetime-picker {
    flex: 1;
  }
  
  .uni-icons {
    position: absolute;
    right: 16rpx;
    pointer-events: none;
  }
}

.number-input-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  .uni-number-box {
    flex: 1;
  }
  
  .input-suffix {
    font-size: 26rpx;
    color: #666;
    white-space: nowrap;
  }
}

.action-section {
  display: flex;
  gap: 24rpx;
  margin-top: 32rpx;
  padding: 0 20rpx;
  
  .action-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    transition: all 0.3s ease;
    border: none;
    
    &.draft-btn {
      background: #f8f9fa;
      color: #666;
      border: 2rpx solid #e9ecef;
      
      &:active {
        background: #e9ecef;
        transform: scale(0.98);
      }
    }
    
    &.publish-btn {
      background: linear-gradient(45deg, #ff5722, #ff7043);
      color: #fff;
      box-shadow: 0 8rpx 24rpx rgba(255, 87, 34, 0.4);
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 4rpx 16rpx rgba(255, 87, 34, 0.5);
      }
    }
  }
}

// 响应式适配
@media (max-width: 750rpx) {
  .form-section .section-title {
    padding: 24rpx 24rpx 20rpx;
    font-size: 30rpx;
  }
  
  ::v-deep .uni-forms-item {
    padding: 20rpx 24rpx;
  }
  
  .action-section {
    padding: 0 16rpx;
    gap: 20rpx;
    
    .action-btn {
      height: 80rpx;
      font-size: 30rpx;
    }
  }
}
</style> 