<template>
  <view class="container">
    <!-- 订单信息 -->
    <view class="order-card">
      <view class="card-title">订单信息</view>
      <view class="info-row">
        <text class="label">服务名称：</text>
        <text class="value">{{ orderInfo.serviceName }}</text>
      </view>
      <view class="info-row">
        <text class="label">服务时间：</text>
        <text class="value">{{ form.serviceDate }} {{ form.timeSlot }}</text>
      </view>
      <view class="info-row">
        <text class="label">服务地址：</text>
        <text class="value">{{ form.serviceAddress }}</text>
      </view>
    </view>
    
    <!-- 选择陪伴员 -->
    <view class="section">
      <view class="section-title">选择陪伴员</view>
      
      <view class="teacher-list">
        <view 
          v-for="teacher in teacherList" 
          :key="teacher.id"
          class="teacher-item"
          :class="{ selected: form.teacherId === teacher.id }"
          @click="selectTeacher(teacher)"
        >
          <image :src="teacher.avatar || '/static/images/avatar.png'" mode="aspectFill" />
          <view class="teacher-info">
            <text class="teacher-name">{{ teacher.teacherName }}</text>
            <text class="teacher-subjects">{{ teacher.subjects || '暂无科目' }}</text>
            <text class="teacher-level">{{ getLevelText(teacher.level) }}</text>
          </view>
          <view class="check-icon" v-if="form.teacherId === teacher.id">
            <text class="iconfont icon-check"></text>
          </view>
        </view>
        
        <view v-if="teacherList.length === 0" class="empty">
          <text>暂无可用陪伴员</text>
        </view>
      </view>
    </view>
    
    <!-- 服务要求 -->
    <view class="section">
      <view class="section-title">服务要求</view>
      <textarea 
        v-model="form.serviceRequirement" 
        placeholder="请输入服务要求（选填）"
        maxlength="500"
      />
      <view class="count">{{ form.serviceRequirement.length }}/500</view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn">
      <button @click="submit" :disabled="!canSubmit">确认派单</button>
    </view>
  </view>
</template>

<script>
import { managerApi, orderApi } from '@/api/index.js'

export default {
  data() {
    return {
      orderId: null,
      workOrderId: null,
      managerId: null,
      orderInfo: {},
      teacherList: [],
      form: {
        teacherId: null,
        serviceDate: '',
        timeSlot: '',
        serviceAddress: '',
        serviceRequirement: ''
      }
    }
  },
  computed: {
    canSubmit() {
      return this.form.teacherId && this.form.serviceDate && this.form.timeSlot
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.workOrderId = options.workOrderId
    this.managerId = options.managerId
    this.loadOrderInfo()
  },
  methods: {
    async loadOrderInfo() {
      try {
        const res = await orderApi.getOrderDetail(this.orderId)
        this.orderInfo = res
        
        this.form.serviceDate = res.serviceDate
        this.form.timeSlot = res.timeSlot
        this.form.serviceAddress = res.serviceAddress
        
        this.loadAvailableTeachers()
      } catch (error) {
        uni.showToast({ title: '加载订单信息失败', icon: 'none' })
      }
    },
    
    async loadAvailableTeachers() {
      try {
        const res = await managerApi.getAvailableTeachers({
          serviceId: this.orderInfo.serviceId,
          serviceDate: this.form.serviceDate,
          timeSlot: this.form.timeSlot
        })
        this.teacherList = res
      } catch (error) {
        uni.showToast({ title: '加载陪伴员列表失败', icon: 'none' })
      }
    },
    
    selectTeacher(teacher) {
      this.form.teacherId = teacher.id
    },
    
    getLevelText(level) {
      const levelMap = {
        normal: '普通教师',
        gold: '金牌教师',
        scholar: '学霸教师'
      }
      return levelMap[level] || '普通教师'
    },
    
    async submit() {
      if (!this.canSubmit) return
      
      uni.showLoading({ title: '派单中...' })
      
      try {
        await managerApi.assignOrder({
          orderId: this.orderId,
          managerId: this.managerId,
          teacherId: this.form.teacherId,
          serviceDate: this.form.serviceDate,
          timeSlot: this.form.timeSlot,
          serviceAddress: this.form.serviceAddress,
          serviceRequirement: this.form.serviceRequirement
        })
        
        uni.hideLoading()
        uni.showToast({ 
          title: '派单成功', 
          icon: 'success',
          duration: 2000
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 2000)
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '派单失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx 30rpx 120rpx;
}

.order-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
    border-left: 6rpx solid #667eea;
  }
  
  .info-row {
    display: flex;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      color: #999;
      min-width: 180rpx;
    }
    
    .value {
      flex: 1;
      color: #333;
    }
  }
}

.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
    border-left: 6rpx solid #667eea;
  }
  
  textarea {
    width: 100%;
    min-height: 200rpx;
    padding: 20rpx;
    background: #f8f8f8;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  .count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
}

.teacher-list {
  .teacher-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    background: #f8f8f8;
    border-radius: 12rpx;
    margin-bottom: 16rpx;
    position: relative;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &.selected {
      background: #e6f7ff;
      border: 2rpx solid #667eea;
    }
    
    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      margin-right: 20rpx;
    }
    
    .teacher-info {
      flex: 1;
      
      .teacher-name {
        display: block;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .teacher-subjects {
        display: block;
        font-size: 26rpx;
        color: #666;
        margin-bottom: 8rpx;
      }
      
      .teacher-level {
        display: inline-block;
        padding: 4rpx 16rpx;
        background: #fff7e6;
        color: #fa8c16;
        font-size: 22rpx;
        border-radius: 20rpx;
      }
    }
    
    .check-icon {
      width: 48rpx;
      height: 48rpx;
      background: #667eea;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #fff;
      }
    }
  }
  
  .empty {
    text-align: center;
    padding: 80rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}

.submit-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  
  button {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    
    &[disabled] {
      background: #ccc;
    }
  }
}
</style>
