<template>
  <view class="apply-page">
    <view class="form-container">
      <view class="form-header">
        <text class="header-title">加盟申请</text>
        <text class="header-subtitle">请填写以下信息，我们将尽快与您联系</text>
      </view>
      
      <view class="form-content">
        <!-- 基本信息 -->
        <view class="form-section">
          <view class="section-title">基本信息</view>
          
          <view class="form-item required">
            <text class="label">姓名</text>
            <input 
              class="input" 
              v-model="formData.name" 
              placeholder="请输入您的姓名"
              maxlength="20"
            />
          </view>
          
          <view class="form-item required">
            <text class="label">联系电话</text>
            <input 
              class="input" 
              v-model="formData.phone" 
              type="number"
              placeholder="请输入您的手机号"
              maxlength="11"
            />
          </view>
          
          <view class="form-item">
            <text class="label">电子邮箱</text>
            <input 
              class="input" 
              v-model="formData.email" 
              placeholder="请输入您的邮箱（选填）"
            />
          </view>
        </view>
        
        <!-- 地区信息 -->
        <view class="form-section">
          <view class="section-title">意向地区</view>
          
          <view class="form-item required">
            <text class="label">省份</text>
            <picker mode="selector" :range="provinces" @change="onProvinceChange">
              <view class="picker">
                <text>{{ formData.province || '请选择省份' }}</text>
                <text class="arrow">></text>
              </view>
            </picker>
          </view>
          
          <view class="form-item required">
            <text class="label">城市</text>
            <picker mode="selector" :range="cities" @change="onCityChange">
              <view class="picker">
                <text>{{ formData.city || '请选择城市' }}</text>
                <text class="arrow">></text>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="label">区县</text>
            <input 
              class="input" 
              v-model="formData.district" 
              placeholder="请输入区县（选填）"
            />
          </view>
          
          <view class="form-item">
            <text class="label">详细地址</text>
            <textarea 
              class="textarea" 
              v-model="formData.address" 
              placeholder="请输入详细地址（选填）"
              maxlength="200"
            />
          </view>
        </view>
        
        <!-- 投资信息 -->
        <view class="form-section">
          <view class="section-title">投资信息</view>
          
          <view class="form-item">
            <text class="label">预计投资金额</text>
            <picker mode="selector" :range="investmentRanges" @change="onInvestmentChange">
              <view class="picker">
                <text>{{ formData.investmentAmount || '请选择投资金额' }}</text>
                <text class="arrow">></text>
              </view>
            </picker>
          </view>
          
          <view class="form-item">
            <text class="label">经营经验</text>
            <textarea 
              class="textarea" 
              v-model="formData.businessExperience" 
              placeholder="请简要描述您的经营经验（选填）"
              maxlength="500"
            />
          </view>
          
          <view class="form-item">
            <text class="label">加盟意向说明</text>
            <textarea 
              class="textarea" 
              v-model="formData.intentionDescription" 
              placeholder="请描述您的加盟意向和想法（选填）"
              maxlength="500"
            />
          </view>
        </view>
        
        <!-- 协议 -->
        <view class="agreement-section">
          <checkbox-group @change="onAgreementChange">
            <label class="agreement-label">
              <checkbox value="agree" :checked="agreed" />
              <text class="agreement-text">
                我已阅读并同意
                <text class="link" @click.stop="viewAgreement">《加盟协议》</text>
              </text>
            </label>
          </checkbox-group>
        </view>
        
        <!-- 提交按钮 -->
        <button class="submit-btn" @click="submitForm" :disabled="submitting">
          {{ submitting ? '提交中...' : '提交申请' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        email: '',
        province: '',
        city: '',
        district: '',
        address: '',
        investmentAmount: '',
        businessExperience: '',
        intentionDescription: ''
      },
      provinces: ['浙江省', '江苏省', '上海市', '广东省', '北京市'],
      cities: [],
      investmentRanges: ['10-20万', '20-50万', '50-100万', '100万以上'],
      agreed: false,
      submitting: false
    }
  },
  
  methods: {
    onProvinceChange(e) {
      this.formData.province = this.provinces[e.detail.value]
      this.formData.city = ''
      // TODO: 根据省份加载城市列表
      this.cities = ['杭州市', '宁波市', '温州市', '绍兴市']
    },
    
    onCityChange(e) {
      this.formData.city = this.cities[e.detail.value]
    },
    
    onInvestmentChange(e) {
      this.formData.investmentAmount = this.investmentRanges[e.detail.value]
    },
    
    onAgreementChange(e) {
      this.agreed = e.detail.value.includes('agree')
    },
    
    viewAgreement() {
      uni.navigateTo({
        url: '/pages/franchise/agreement'
      })
    },
    
    validateForm() {
      if (!this.formData.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return false
      }
      
      if (!this.formData.phone) {
        uni.showToast({ title: '请输入联系电话', icon: 'none' })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return false
      }
      
      if (!this.formData.province) {
        uni.showToast({ title: '请选择省份', icon: 'none' })
        return false
      }
      
      if (!this.formData.city) {
        uni.showToast({ title: '请选择城市', icon: 'none' })
        return false
      }
      
      if (!this.agreed) {
        uni.showToast({ title: '请阅读并同意加盟协议', icon: 'none' })
        return false
      }
      
      return true
    },
    
    async submitForm() {
      if (!this.validateForm()) {
        return
      }
      
      this.submitting = true
      
      try {
        // TODO: 调用API提交申请
        // await this.$api.franchise.submitApplication(this.formData)
        
        // 模拟提交
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        uni.showModal({
          title: '提交成功',
          content: '您的加盟申请已提交，我们将在3个工作日内与您联系',
          showCancel: false,
          success: () => {
            uni.navigateBack()
          }
        })
      } catch (error) {
        console.error('提交申请失败:', error)
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-page {
  min-height: 100vh;
  background: #f0f9f7;
  padding: 20rpx;
}

.form-container {
  background: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.form-header {
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
  text-align: center;
}

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

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

.form-content {
  padding: 30rpx;
}

.form-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30rpx;
  padding-left: 20rpx;
  border-left: 6rpx solid #7dd3c0;
}

.form-item {
  margin-bottom: 30rpx;
  
  &.required .label::before {
    content: '*';
    color: #ff6b6b;
    margin-right: 8rpx;
  }
}

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

.input, .textarea {
  width: 100%;
  padding: 24rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333333;
  border: 2rpx solid transparent;
  
  &:focus {
    background: #ffffff;
    border-color: #7dd3c0;
  }
}

.textarea {
  min-height: 150rpx;
}

.picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333333;
}

.arrow {
  color: #999999;
}

.agreement-section {
  margin: 40rpx 0;
  padding: 30rpx;
  background: #f0f9f7;
  border-radius: 12rpx;
}

.agreement-label {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.agreement-text {
  font-size: 26rpx;
  color: #666666;
}

.link {
  color: #7dd3c0;
  text-decoration: underline;
}

.submit-btn {
  width: 100%;
  padding: 32rpx;
  background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
  color: #ffffff;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  
  &[disabled] {
    opacity: 0.6;
  }
}
</style>
