<!--新增订单表单弹窗-->
<template>
  <view class="order-form-popup">
    <view class="popup-header">
      <text class="popup-title">新增订单</text>
      <view class="close-btn" @click="handleCancel">×</view>
    </view>
    
    <view class="popup-content">
      <view class="form-section">
        <view class="form-item">
          <text class="label">学生信息</text>
          <view class="student-info">
            <text class="student-name">{{ studentInfo.name || '未选择学生' }}</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">课程选择 <text class="required">*</text></text>
          <view class="picker-wrapper" @click="showCoursePicker">
            <text class="picker-text" :class="{ 'placeholder': !formData.course_id }">
              {{ selectedCourse && selectedCourse.name || '请选择课程' }}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">支付方式 <text class="required">*</text></text>
          <view class="picker-wrapper" @click="showPaymentPicker">
            <text class="picker-text" :class="{ 'placeholder': !formData.payment_type }">
              {{ selectedPaymentType && selectedPaymentType.label || '请选择支付方式' }}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">订单类型 <text class="required">*</text></text>
          <view class="picker-wrapper" @click="showOrderTypePicker">
            <text class="picker-text" :class="{ 'placeholder': !formData.order_type }">
              {{ selectedOrderType && selectedOrderType.label || '请选择订单类型' }}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </view>
        
        <view class="form-item">
          <text class="label">订单金额 <text class="required">*</text></text>
          <input 
            class="form-input readonly"
            type="digit"
            v-model="formData.order_amount"
            placeholder="请先选择课程"
            readonly
            disabled
          />
        </view>
        
        <view class="form-item">
          <text class="label">课时数</text>
          <input 
            class="form-input readonly"
            type="number"
            v-model="formData.total_hours"
            placeholder="请先选择课程"
            readonly
            disabled
          />
        </view>
        
        <view class="form-item">
          <text class="label">赠送课时</text>
          <input 
            class="form-input readonly"
            type="number"
            v-model="formData.gift_hours"
            placeholder="请先选择课程"
            readonly
            disabled
          />
        </view>
        
        <view class="form-item">
          <text class="label">备注</text>
          <textarea 
            class="form-textarea"
            v-model="formData.remark"
            placeholder="请输入备注信息"
            maxlength="200"
          ></textarea>
        </view>
      </view>
    </view>
    
    <view class="popup-footer">
      <view class="footer-btn cancel-btn" @click="handleCancel">取消</view>
      <view class="footer-btn confirm-btn" @click="handleConfirm">确认创建</view>
    </view>
    
    <!-- 选择器弹窗 -->
    <uni-popup ref="pickerPopup" type="bottom">
      <view class="picker-content">
        <view class="picker-header">
          <view class="picker-btn" @click="closePicker">取消</view>
          <text class="picker-title">{{ pickerTitle }}</text>
          <view class="picker-btn confirm" @click="confirmPicker">确定</view>
        </view>
        <picker-view class="picker-view" :value="pickerValue" @change="onPickerChange">
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in pickerOptions" :key="index">
              {{ item.label || item.name }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js'

export default {
  name: 'OrderFormPopup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    studentInfo: {
      type: Object,
      default: () => ({})
    },
    resourceId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      formData: {
        student_id: '',
        course_id: '',
        payment_type: '',
        order_type: '',
        order_amount: '',
        total_hours: '',
        gift_hours: '',
        remark: '',
        class_id: '1' // 临时设置默认班级ID，后续需要添加班级选择功能
      },
      
      // 选择器相关
      currentPicker: '',
      pickerTitle: '',
      pickerValue: [0],
      pickerOptions: [],
      selectedIndex: 0,
      
      // 数据选项
      courseList: [],
      paymentTypes: [
        { value: 'cash', label: '现金支付' },
        { value: 'scan_code', label: '扫码支付' },
        { value: 'subscription', label: '订阅支付' },
        { value: 'wxpay_online', label: '微信在线代付' }
      ],
      orderTypes: [
        { value: '1', label: '新订单' },
        { value: '2', label: '续费订单' },
        { value: '3', label: '内部员工订单' }
      ]
    }
  },
  computed: {
    selectedCourse() {
      return this.courseList.find(item => item.id == this.formData.course_id)
    },
    selectedPaymentType() {
      return this.paymentTypes.find(item => item.value === this.formData.payment_type)
    },
    selectedOrderType() {
      return this.orderTypes.find(item => item.value === this.formData.order_type)
    }
  },
  watch: {
    visible(newVal) {
      console.log('visible changed:', newVal)
      if (newVal) {
        console.log('开始初始化表单和加载课程列表')
        this.initForm()
        this.loadCourseList()
      }
    },
    studentInfo: {
      handler(newVal) {
        if (newVal && newVal.id) {
          this.formData.student_id = newVal.id
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    console.log('OrderFormPopup mounted, visible:', this.visible)
    // 如果组件挂载时 visible 为 true，主动加载课程列表
    if (this.visible) {
      console.log('组件挂载时 visible 为 true，开始加载课程列表')
      this.loadCourseList()
    }
  },
  methods: {
    initForm() {
      this.formData = {
        student_id: this.studentInfo && this.studentInfo.id || '',
        course_id: '',
        payment_type: '',
        order_type: '',
        order_amount: '',
        total_hours: '',
        gift_hours: '',
        remark: '',
        class_id: '1' // 临时设置默认班级ID
      }
    },
    
    async loadCourseList() {
      console.log('loadCourseList 方法被调用')
      try {
        console.log('正在调用课程API: common_getCourseAll')
        const res = await apiRoute.common_getCourseAll({})
        console.log('课程API响应:', res)
        if (res.code === 1) {
          // 过滤状态为1的课程，并格式化数据结构
          this.courseList = (res.data || [])
            .filter(course => course.status === 1)
            .map(course => ({
              id: course.id,
              name: course.course_name,
              price: parseFloat(course.price || 0),
              hours: course.session_count || 0,
              gift_hours: course.gift_session_count || 0,
              duration: course.duration || 0,
              course_type: course.course_type,
              remarks: course.remarks
            }))
        } else {
          console.error('获取课程列表失败:', res.msg)
          this.courseList = []
        }
      } catch (error) {
        console.error('获取课程列表异常:', error)
        this.courseList = []
      }
    },
    
    showCoursePicker() {
      this.currentPicker = 'course'
      this.pickerTitle = '选择课程'
      this.pickerOptions = this.courseList
      this.pickerValue = [0]
      this.$refs.pickerPopup.open()
    },
    
    showPaymentPicker() {
      this.currentPicker = 'payment'
      this.pickerTitle = '选择支付方式'
      this.pickerOptions = this.paymentTypes
      this.pickerValue = [0]
      this.$refs.pickerPopup.open()
    },
    
    showOrderTypePicker() {
      this.currentPicker = 'orderType'
      this.pickerTitle = '选择订单类型'
      this.pickerOptions = this.orderTypes
      this.pickerValue = [0]
      this.$refs.pickerPopup.open()
    },
    
    onPickerChange(e) {
      this.selectedIndex = e.detail.value[0]
    },
    
    confirmPicker() {
      const selectedOption = this.pickerOptions[this.selectedIndex]
      if (!selectedOption) return
      
      switch (this.currentPicker) {
        case 'course':
          this.formData.course_id = selectedOption.id
          // 自动填充课程相关信息
          if (selectedOption.price !== undefined) {
            this.formData.order_amount = selectedOption.price.toString()
          }
          if (selectedOption.hours !== undefined) {
            this.formData.total_hours = selectedOption.hours.toString()
          }
          if (selectedOption.gift_hours !== undefined) {
            this.formData.gift_hours = selectedOption.gift_hours.toString()
          }
          console.log('课程选择后更新表单数据:', this.formData)
          break
        case 'payment':
          this.formData.payment_type = selectedOption.value
          break
        case 'orderType':
          this.formData.order_type = selectedOption.value
          break
      }
      
      this.closePicker()
    },
    
    closePicker() {
      this.$refs.pickerPopup.close()
      this.currentPicker = ''
    },
    
    validateForm() {
      if (!this.formData.student_id) {
        uni.showToast({ title: '请选择学生', icon: 'none' })
        return false
      }
      if (!this.formData.course_id) {
        uni.showToast({ title: '请选择课程', icon: 'none' })
        return false
      }
      if (!this.formData.payment_type) {
        uni.showToast({ title: '请选择支付方式', icon: 'none' })
        return false
      }
      if (!this.formData.order_type) {
        uni.showToast({ title: '请选择订单类型', icon: 'none' })
        return false
      }
      if (!this.formData.order_amount || this.formData.order_amount <= 0) {
        uni.showToast({ title: '请输入有效的订单金额', icon: 'none' })
        return false
      }
      return true
    },
    
    async handleConfirm() {
      if (!this.validateForm()) return
      
      try {
        uni.showLoading({ title: '创建中...' })
        
        const orderData = {
          ...this.formData,
          resource_id: this.resourceId,
          staff_id: '', // 将从用户信息中获取
          order_status: 'pending'
        }
        
        const res = await apiRoute.xs_orderTableAdd(orderData)
        
        if (res.code === 1) {
          uni.showToast({ title: '订单创建成功', icon: 'success' })
          this.$emit('confirm', { orderData, result: res.data })
        } else {
          uni.showToast({ title: res.msg || '创建失败', icon: 'none' })
        }
      } catch (error) {
        console.error('创建订单失败:', error)
        uni.showToast({ title: '创建失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },
    
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.order-form-popup {
  background: #1a1a1a;
  border-radius: 20rpx 20rpx 0 0;
  color: #ffffff;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1px solid #333;
  
  .popup-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #ffffff;
  }
  
  .close-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    color: #888;
    border-radius: 50%;
    background: #333;
  }
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 40rpx;
}

.form-section {
  .form-item {
    margin-bottom: 40rpx;
    
    .label {
      display: block;
      font-size: 28rpx;
      color: #cccccc;
      margin-bottom: 20rpx;
      
      .required {
        color: #ff4757;
      }
    }
    
    .student-info {
      padding: 20rpx;
      background: #2a2a2a;
      border-radius: 12rpx;
      
      .student-name {
        font-size: 30rpx;
        color: #29D3B4;
      }
    }
    
    .picker-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 30rpx;
      background: #2a2a2a;
      border-radius: 12rpx;
      border: 1px solid #444;
      
      .picker-text {
        flex: 1;
        font-size: 30rpx;
        color: #ffffff;
        
        &.placeholder {
          color: #888;
        }
      }
      
      .picker-arrow {
        font-size: 24rpx;
        color: #888;
      }
    }
    
    .form-input, .form-textarea {
      width: 100%;
      padding: 24rpx 30rpx;
      background: #2a2a2a;
      border: 1px solid #444;
      border-radius: 12rpx;
      color: #ffffff;
      font-size: 30rpx;
      
      &::placeholder {
        color: #888;
      }
      
      &.readonly {
        background: #1a1a1a;
        border-color: #333;
        color: #888;
        
        &::placeholder {
          color: #666;
        }
      }
    }
    
    .form-textarea {
      height: 120rpx;
      resize: none;
    }
  }
}

.popup-footer {
  display: flex;
  padding: 30rpx 40rpx;
  border-top: 1px solid #333;
  gap: 30rpx;
  
  .footer-btn {
    flex: 1;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 500;
    
    &.cancel-btn {
      background: #444;
      color: #cccccc;
    }
    
    &.confirm-btn {
      background: linear-gradient(45deg, #29D3B4, #1DB584);
      color: #ffffff;
    }
  }
}

// 选择器样式
.picker-content {
  background: #1a1a1a;
  border-radius: 20rpx 20rpx 0 0;
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1px solid #333;
    
    .picker-btn {
      font-size: 30rpx;
      color: #888;
      
      &.confirm {
        color: #29D3B4;
      }
    }
    
    .picker-title {
      font-size: 32rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }
  
  .picker-view {
    height: 400rpx;
    color: #ffffff;
    
    .picker-item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #ffffff;
    }
  }
}
</style>