<template>
  <view class="container">
    <view class="header">
      <text class="title">管理师注册申请</text>
      <text class="subtitle">请填写以下信息，我们将在1-3个工作日内完成审核</text>
    </view>
    
    <view class="form">
      <!-- 基本信息 -->
      <view class="section">
        <view class="section-title">基本信息</view>
        
        <view class="form-item">
          <text class="label">姓名 <text class="required">*</text></text>
          <input v-model="form.teacherName" placeholder="请输入真实姓名" />
        </view>
        
        <view class="form-item">
          <text class="label">手机号 <text class="required">*</text></text>
          <input v-model="form.phone" type="number" placeholder="请输入手机号" />
        </view>
        
        <view class="form-item">
          <text class="label">性别</text>
          <picker :range="genderOptions" range-key="label" @change="onGenderChange">
            <view class="picker">
              {{ form.gender || '请选择性别' }}
              <text class="arrow">›</text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="label">出生年月</text>
          <picker mode="date" :value="form.birthDate" @change="onBirthDateChange">
            <view class="picker">
              {{ form.birthDate || '请选择出生年月' }}
              <text class="arrow">›</text>
            </view>
          </picker>
        </view>
      </view>
      
      <!-- 教育背景 -->
      <view class="section">
        <view class="section-title">教育背景</view>
        
        <view class="form-item">
          <text class="label">最高学历</text>
          <picker :range="educationOptions" range-key="label" @change="onEducationChange">
            <view class="picker">
              {{ form.education || '请选择学历' }}
              <text class="arrow">›</text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="label">毕业学校</text>
          <input v-model="form.school" placeholder="请输入毕业学校" />
        </view>
        
        <view class="form-item">
          <text class="label">专业</text>
          <input v-model="form.major" placeholder="请输入专业" />
        </view>
      </view>
      
      <!-- 工作经验 -->
      <view class="section">
        <view class="section-title">工作经验</view>
        
        <view class="form-item">
          <textarea 
            v-model="form.workExperience" 
            placeholder="请简要描述您的工作经验"
            maxlength="500"
          />
          <view class="count">{{ form.workExperience.length }}/500</view>
        </view>
      </view>
      
      <!-- 自我介绍 -->
      <view class="section">
        <view class="section-title">自我介绍</view>
        
        <view class="form-item">
          <textarea 
            v-model="form.selfIntroduction" 
            placeholder="请介绍一下您自己"
            maxlength="500"
          />
          <view class="count">{{ form.selfIntroduction.length }}/500</view>
        </view>
      </view>
      
      <!-- 服务信息 -->
      <view class="section">
        <view class="section-title">服务信息</view>
        
        <view class="form-item">
          <text class="label">居住地址</text>
          <input v-model="form.address" placeholder="请输入居住地址" />
        </view>
        
        <view class="form-item">
          <text class="label">可服务区域</text>
          <input v-model="form.serviceArea" placeholder="例如：朝阳区、海淀区" />
        </view>
        
        <view class="form-item">
          <text class="label">可服务时间</text>
          <textarea 
            v-model="form.availableTime" 
            placeholder="例如：周一至周五 18:00-21:00"
            maxlength="200"
          />
        </view>
      </view>
      
      <!-- 身份证信息 -->
      <view class="section">
        <view class="section-title">身份证信息</view>
        
        <view class="form-item">
          <text class="label">身份证号</text>
          <input v-model="form.idCard" placeholder="请输入身份证号" />
        </view>
        
        <view class="form-item">
          <text class="label">身份证照片</text>
          <view class="id-card-upload">
            <view class="upload-item">
              <image 
                v-if="form.idCardFront" 
                :src="form.idCardFront" 
                mode="aspectFill"
                @click="previewImage(form.idCardFront)"
              />
              <view v-else class="upload-btn" @click="uploadIdCard('front')">
                <text class="iconfont icon-camera"></text>
                <text>上传正面</text>
              </view>
            </view>
            <view class="upload-item">
              <image 
                v-if="form.idCardBack" 
                :src="form.idCardBack" 
                mode="aspectFill"
                @click="previewImage(form.idCardBack)"
              />
              <view v-else class="upload-btn" @click="uploadIdCard('back')">
                <text class="iconfont icon-camera"></text>
                <text>上传反面</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn">
      <button @click="submit" :disabled="!canSubmit">提交申请</button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      form: {
        teacherName: '',
        phone: '',
        gender: '',
        birthDate: '',
        education: '',
        school: '',
        major: '',
        workExperience: '',
        selfIntroduction: '',
        address: '',
        serviceArea: '',
        availableTime: '',
        idCard: '',
        idCardFront: '',
        idCardBack: ''
      },
      genderOptions: [
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      educationOptions: [
        { label: '高中', value: '高中' },
        { label: '大专', value: '大专' },
        { label: '本科', value: '本科' },
        { label: '硕士', value: '硕士' },
        { label: '博士', value: '博士' }
      ]
    }
  },
  computed: {
    canSubmit() {
      return this.form.teacherName && this.form.phone
    }
  },
  methods: {
    onGenderChange(e) {
      this.form.gender = this.genderOptions[e.detail.value].value
    },
    
    onBirthDateChange(e) {
      this.form.birthDate = e.detail.value
    },
    
    onEducationChange(e) {
      this.form.education = this.educationOptions[e.detail.value].value
    },
    
    uploadIdCard(type) {
      const self = this
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          uni.showLoading({ title: '上传中...' })
          
          self.uploadImage(res.tempFilePaths[0]).then(url => {
            if (type === 'front') {
              self.form.idCardFront = url
            } else {
              self.form.idCardBack = url
            }
            uni.hideLoading()
          }).catch(error => {
            uni.hideLoading()
            uni.showToast({ title: '上传失败', icon: 'none' })
          })
        }
      })
    },
    
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: url
      })
    },
    
    uploadImage(filePath) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: '/api/upload/image',
          filePath: filePath,
          name: 'file',
          success: (res) => {
            const data = JSON.parse(res.data)
            if (data.code === 200) {
              resolve(data.data)
            } else {
              reject(new Error(data.message))
            }
          },
          fail: reject
        })
      })
    },
    
    async submit() {
      if (!this.canSubmit) return
      
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '提交中...' })
      
      try {
        // 模拟提交
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 保存申请信息到本地
        const application = {
          ...this.form,
          role: 'manager',
          status: 'pending',
          applyTime: new Date().toISOString(),
          id: Date.now()
        }
        uni.setStorageSync('managerApplication', application)
        
        uni.hideLoading()
        uni.showModal({
          title: '提交成功',
          content: '您的申请已提交，我们将在1-3个工作日内完成审核。审核通过后，您将获得管理权限。',
          showCancel: false,
          confirmText: '查看审核状态',
          success: () => {
            uni.redirectTo({
              url: '/pages/auth/application-status?role=manager'
            })
          }
        })
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '提交失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

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

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 30rpx 40rpx;
  
  .title {
    display: block;
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 16rpx;
  }
  
  .subtitle {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.form {
  padding: 20rpx 30rpx;
}

.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    padding-left: 20rpx;
    border-left: 6rpx solid #667eea;
  }
}

.form-item {
  margin-bottom: 30rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
    
    .required {
      color: #ff4d4f;
    }
  }
  
  input, textarea {
    width: 100%;
    padding: 24rpx;
    background: #f8f8f8;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  textarea {
    min-height: 200rpx;
  }
  
  .picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background: #f8f8f8;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
    
    .arrow {
      font-size: 40rpx;
      color: #999;
    }
  }
  
  .count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }
}

.id-card-upload {
  display: flex;
  gap: 20rpx;
  
  .upload-item {
    flex: 1;
    height: 240rpx;
    border-radius: 12rpx;
    overflow: hidden;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .upload-btn {
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 60rpx;
        color: #999;
        margin-bottom: 12rpx;
      }
      
      text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.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>
