<template>
  <view class="provider-apply">
    <view class="header">
      <text class="title">🏢 专业服务商注册</text>
      <text class="subtitle">提供专业服务，共创美好未来</text>
    </view>

    <!-- 服务商类型选择 -->
    <view class="type-section">
      <text class="section-title">选择服务类型</text>
      <view class="type-grid">
        <view 
          v-for="(type, index) in serviceTypes" 
          :key="index"
          class="type-item"
          :class="{ active: form.serviceType === type.value }"
          @tap="form.serviceType = type.value"
        >
          <text class="type-icon">{{ type.icon }}</text>
          <text class="type-name">{{ type.name }}</text>
        </view>
      </view>
    </view>

    <!-- 申请表单 -->
    <view class="form-section">
      <text class="section-title">基本信息</text>
      
      <view class="form-item">
        <text class="form-label">机构名称 *</text>
        <input v-model="form.orgName" class="form-input" placeholder="请输入机构全称" />
      </view>

      <view class="form-item">
        <text class="form-label">统一社会信用代码 *</text>
        <input v-model="form.creditCode" class="form-input" placeholder="请输入18位信用代码" />
      </view>

      <view class="form-item">
        <text class="form-label">法人代表 *</text>
        <input v-model="form.legalPerson" class="form-input" placeholder="请输入法人姓名" />
      </view>

      <view class="form-item">
        <text class="form-label">联系人 *</text>
        <input v-model="form.contactPerson" class="form-input" placeholder="请输入联系人姓名" />
      </view>

      <view class="form-item">
        <text class="form-label">联系电话 *</text>
        <input 
          v-model="form.phone" 
          class="form-input" 
          type="number"
          placeholder="请输入手机号码" 
        />
      </view>

      <view class="form-item">
        <text class="form-label">机构地址 *</text>
        <input v-model="form.address" class="form-input" placeholder="请输入详细地址" />
      </view>

      <view class="form-item">
        <text class="form-label">服务区域 *</text>
        <input v-model="form.serviceArea" class="form-input" placeholder="如：北京市海淀区" />
      </view>

      <view class="form-item">
        <text class="form-label">机构简介 *</text>
        <textarea 
          v-model="form.introduction"
          class="form-textarea"
          placeholder="请介绍您的机构背景、服务特色等（200字以内）"
          maxlength="200"
        />
        <text class="char-count">{{ form.introduction.length }}/200</text>
      </view>

      <view class="form-item">
        <text class="form-label">服务项目 *</text>
        <textarea 
          v-model="form.services"
          class="form-textarea"
          placeholder="请详细描述您可以提供的服务项目"
        />
      </view>

      <view class="form-item">
        <text class="form-label">营业执照</text>
        <view class="upload-section">
          <view v-if="form.license" class="image-preview">
            <image :src="form.license" mode="aspectFill" />
            <view class="delete-btn" @tap="form.license = ''">✕</view>
          </view>
          <view v-else class="upload-btn" @tap="uploadLicense">
            <text class="upload-icon">📷</text>
            <text class="upload-text">上传营业执照</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @tap="submitApplication">提交申请</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      serviceTypes: [
        { icon: '🎨', name: '艺术培训', value: 'art' },
        { icon: '⚽', name: '体育运动', value: 'sports' },
        { icon: '🔬', name: '科学实验', value: 'science' },
        { icon: '🎵', name: '音乐舞蹈', value: 'music' },
        { icon: '📚', name: '学科辅导', value: 'tutoring' },
        { icon: '🎭', name: '其他服务', value: 'other' }
      ],
      form: {
        serviceType: '',
        orgName: '',
        creditCode: '',
        legalPerson: '',
        contactPerson: '',
        phone: '',
        address: '',
        serviceArea: '',
        introduction: '',
        services: '',
        license: ''
      }
    }
  },
  methods: {
    uploadLicense() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.form.license = res.tempFilePaths[0]
        }
      })
    },
    submitApplication() {
      // 验证表单
      if (!this.form.serviceType) {
        uni.showToast({ title: '请选择服务类型', icon: 'none' })
        return
      }
      if (!this.form.orgName) {
        uni.showToast({ title: '请输入机构名称', icon: 'none' })
        return
      }
      if (!this.form.phone) {
        uni.showToast({ title: '请输入联系电话', icon: 'none' })
        return
      }
      if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        uni.showToast({ title: '手机号格式不正确', icon: 'none' })
        return
      }
      if (!this.form.address) {
        uni.showToast({ title: '请输入机构地址', icon: 'none' })
        return
      }
      if (!this.form.introduction) {
        uni.showToast({ title: '请填写机构简介', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '提交中...' })
      
      setTimeout(() => {
        uni.hideLoading()
        
        // 保存申请信息到本地
        const application = {
          ...this.form,
          role: 'serviceProvider',
          status: 'pending',
          applyTime: new Date().toISOString(),
          id: Date.now()
        }
        uni.setStorageSync('serviceProviderApplication', application)
        
        uni.showModal({
          title: '提交成功',
          content: '您的申请已提交，我们会在5个工作日内完成审核。审核通过后，您可以发布课程和服务。',
          showCancel: false,
          confirmText: '查看审核状态',
          success: () => {
            uni.redirectTo({
              url: '/pages/auth/application-status?role=serviceProvider'
            })
          }
        })
      }, 1000)
    }
  }
}
</script>

<style scoped>
.provider-apply {
  min-height: 100vh;
  background: #f0f9f7;
  padding-bottom: 120rpx;
}

.header {
  background: linear-gradient(135deg, #2d9687 0%, #1e7a6d 100%);
  padding: 50rpx 30rpx;
  text-align: center;
}

.title {
  display: block;
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15rpx;
}

.subtitle {
  display: block;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}

.type-section,
.form-section {
  background: #ffffff;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 16rpx;
}

.section-title {
  display: block;
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 25rpx;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s;
}

.type-item.active {
  background: #e8f5f3;
  border-color: #2d9687;
}

.type-icon {
  font-size: 50rpx;
  margin-bottom: 15rpx;
}

.type-name {
  font-size: 24rpx;
  color: #333333;
  text-align: center;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 15rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 25rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.form-textarea {
  width: 100%;
  min-height: 150rpx;
  padding: 20rpx 25rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
  line-height: 1.6;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999999;
  margin-top: 10rpx;
}

.upload-section {
  margin-top: 15rpx;
}

.image-preview {
  position: relative;
  width: 300rpx;
  height: 300rpx;
}

.image-preview image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background: #ff4444;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.upload-btn {
  width: 300rpx;
  height: 300rpx;
  border: 2rpx dashed #cccccc;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

.upload-icon {
  font-size: 60rpx;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999999;
}

.submit-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #ffffff;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: #2d9687;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 44rpx;
  border: none;
}
</style>
