<template>
  <div class="application-page" :style="{ paddingBottom: `${safeHeight}px` }">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-title">报名申请</div>
      <div class="header-subtitle">请填写以下信息进行报名</div>
    </div>

    <!-- 申请表单 -->
    <div class="form-section">
      <!-- 商户名称 -->
      <div class="form-item">
        <div class="item-label">
          <span class="required">*</span>
          商户名称
        </div>
        <input class="item-input" v-model="formData.merchantName" placeholder="请输入商户名称" />
      </div>

      <!-- 统一社会信用代码 -->
      <div class="form-item">
        <div class="item-label">
          <span class="required">*</span>
          统一社会信用代码
        </div>
        <input class="item-input" v-model="formData.creditCode" placeholder="请输入18位统一社会信用代码" maxlength="18" />
      </div>

      <!-- 联系电话 -->
      <div class="form-item">
        <div class="item-label">
          <span class="required">*</span>
          联系电话
        </div>
        <input class="item-input" v-model="formData.phone" type="number" placeholder="请输入联系电话" />
      </div>

      <!-- 联系人 -->
      <div class="form-item">
        <div class="item-label">
          <span class="required">*</span>
          联系人姓名
        </div>
        <input class="item-input" v-model="formData.contactPerson" placeholder="请输入联系人姓名" />
      </div>

      <!-- 邮箱 -->
      <div class="form-item">
        <div class="item-label">邮箱地址</div>
        <input class="item-input" v-model="formData.email" placeholder="请输入邮箱地址" />
      </div>

      <!-- 经营业态 -->
      <div class="form-item">
        <div class="item-label">
          <span class="required">*</span>
          经营业态
        </div>
        <div class="radio-group">
          <div class="radio-item" v-for="(item, index) in businessTypes" :key="index"
            :class="{ 'active': formData.businessType === item.value }"
            @click="handleRadioChange('businessType', item.value)">
            <div class="radio-icon" :class="{ 'checked': formData.businessType === item.value }"></div>
            <span class="radio-text">{{ item.label }}</span>
          </div>
        </div>
      </div>

      <!-- 备注说明 -->
      <div class="form-item">
        <div class="item-label">备注说明</div>
        <textarea class="item-textarea" v-model="formData.remarks" placeholder="请输入其他需要说明的信息" :maxlength="200" />
      </div>

      <!-- 证照上传 -->
      <div class="form-item">
        <div class="item-label">
          <span class="required">*</span>
          证照材料上传
        </div>
        <div class="upload-section">
          <div class="upload-grid">
            <div class="upload-item" v-for="(file, index) in uploadedFiles" :key="index">
              <image class="upload-image" :src="file.url" @click="previewImage(index)" />
              <div class="delete-btn" @click="deleteFile(index)">×</div>
            </div>
            <div class="upload-btn" v-if="uploadedFiles.length < 5" @click="chooseImage">
              <div class="upload-icon">+</div>
              <div class="upload-text">上传证照</div>
            </div>
          </div>
          <div class="upload-tip">支持上传营业执照、法人身份证等证照材料，最多5张</div>
        </div>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="action-section">
      <div class="action-btn primary-btn" @click="handleSubmit">
        <span class="btn-text">提交申请</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      safeHeight: "",
      formData: {
        merchantName: "", // 商户名称
        creditCode: "", // 统一社会信用代码
        phone: "", // 联系电话
        contactPerson: "", // 联系人
        email: "", // 邮箱
        businessType: "", // 经营业态
        remarks: "", // 备注
      },
      uploadedFiles: [], // 已上传的文件
      businessTypes: [],
    };
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let height = systemInfo.safeAreaInsets.bottom;
    this.safeHeight = Number(height);
    this.getBusinessTypes();
  },
  methods: {
    // 获取经营业态数据
    async getBusinessTypes() {
      try {
        const res = await this.$api.getCoop({
          action_type: 'GetEnumLable',
          fieldexplainField: 'BUSINESS_TARGET',
          fieldenumIndex: 4000
        });

        if (res && res.Data && res.Data.List) {
          // 找到FIELDENUM_VALUE为'4600'的项
          const targetItem = res.Data.List.find(item => item.FIELDENUM_VALUE === '4600');

          if (targetItem && targetItem.fieldenumList) {
            // 将fieldenumList转换为需要的格式
            this.businessTypes = targetItem.fieldenumList.map(item => ({
              label: item.FIELDENUM_NAME,
              value: item.FIELDENUM_VALUE
            }));
          }
        }
      } catch (error) {
        console.error('获取经营业态数据失败:', error);
      }
    },

    // 选择单选项
    handleRadioChange(field, value) {
      this.formData[field] = value;
    },

    // 选择图片
    chooseImage() {
      const _this = this;
      uni.chooseImage({
        count: 5 - this.uploadedFiles.length,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success(res) {
          _this.uploadFiles(res.tempFilePaths);
        },
      });
    },

    // 上传文件
    uploadFiles(filePaths) {
      // 这里可以添加实际的上传逻辑
      filePaths.forEach((path) => {
        this.uploadedFiles.push({
          url: path,
          name: "证照材料",
        });
      });
    },

    // 删除文件
    deleteFile(index) {
      this.uploadedFiles.splice(index, 1);
    },

    // 预览图片
    previewImage(index) {
      const urls = this.uploadedFiles.map(file => file.url);
      uni.previewImage({
        current: index,
        urls: urls,
      });
    },

    // 验证表单
    validateForm() {
      if (!this.formData.merchantName.trim()) {
        uni.showToast({
          title: "请输入商户名称",
          icon: "none",
        });
        return false;
      }

      if (!this.formData.creditCode.trim()) {
        uni.showToast({
          title: "请输入统一社会信用代码",
          icon: "none",
        });
        return false;
      }

      if (this.formData.creditCode.length !== 18) {
        uni.showToast({
          title: "统一社会信用代码应为18位",
          icon: "none",
        });
        return false;
      }

      if (!this.formData.phone.trim()) {
        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.contactPerson.trim()) {
        uni.showToast({
          title: "请输入联系人姓名",
          icon: "none",
        });
        return false;
      }

      if (!this.formData.businessType) {
        uni.showToast({
          title: "请选择经营业态",
          icon: "none",
        });
        return false;
      }

      if (this.uploadedFiles.length === 0) {
        uni.showToast({
          title: "请上传证照材料",
          icon: "none",
        });
        return false;
      }

      return true;
    },

    // 提交申请
    handleSubmit() {
      if (!this.validateForm()) {
        return;
      }

      uni.showLoading({
        title: "提交中...",
        mask: true,
      });

      // 模拟提交过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showModal({
          title: "提交成功",
          content: "您的投资报名申请已提交，我们会尽快与您联系！",
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack();
            }
          },
        });
      }, 2000);
    },
  },
};
</script>

<style scoped lang="less">
.application-page {
  width: 100vw;
  min-height: 100vh;
  background: #f8fafc;
  overflow-y: scroll;

  .page-header {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    padding: 60rpx 40rpx 40rpx;
    text-align: center;

    .header-title {
      font-size: 30rpx;
      font-weight: 600;
      color: white;
      margin-bottom: 12rpx;
    }

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

  .form-section {
    padding: 40rpx 32rpx 160rpx;
    background: white;
    margin: -20rpx 32rpx 0;
    border-radius: 24rpx 24rpx 0 0;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
    border-bottom: 1rpx solid #f5f5f5;

    .form-item {
      margin-bottom: 40rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .item-label {
        font-size: 24rpx;
        color: #374151;
        font-weight: 500;
        margin-bottom: 16rpx;
        display: flex;
        align-items: center;

        .required {
          color: #ef4444;
          margin-right: 4rpx;
        }
      }

      .item-input {
        width: 100%;
        height: 66rpx;
        padding: 0 24rpx;
        border: 2rpx solid #e5e7eb;
        border-radius: 16rpx;
        font-size: 24rpx;
        color: #374151;
        background: #f9fafb;
        box-sizing: border-box;

        &:focus {
          border-color: #22c55e;
          background: white;
        }

        &::placeholder {
          color: #9ca3af;
        }
      }

      .item-textarea {
        width: 100%;
        min-height: 160rpx;
        padding: 20rpx 24rpx;
        border: 2rpx solid #e5e7eb;
        border-radius: 16rpx;
        font-size: 24rpx;
        color: #374151;
        background: #f9fafb;
        box-sizing: border-box;
        resize: none;

        &:focus {
          border-color: #22c55e;
          background: white;
        }

        &::placeholder {
          color: #9ca3af;
        }
      }

      .radio-group {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;

        .radio-item {
          display: flex;
          align-items: center;
          padding: 16rpx 24rpx;
          background: #f9fafb;
          border: 2rpx solid #e5e7eb;
          border-radius: 40rpx;
          transition: all 0.3s ease;

          .radio-icon {
            width: 32rpx;
            height: 32rpx;
            border: 2rpx solid #d1d5db;
            border-radius: 50%;
            margin-right: 12rpx;
            position: relative;
            transition: all 0.3s ease;

            &.checked {
              border-color: #22c55e;
              background: #22c55e;

              &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 12rpx;
                height: 12rpx;
                background: white;
                border-radius: 50%;
              }
            }
          }

          .radio-text {
            font-size: 24rpx;
            color: #374151;
          }

          &.active {
            background: #dcfce7;
            border-color: #22c55e;

            .radio-text {
              color: #15803d;
            }
          }
        }
      }

      .upload-section {
        .upload-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20rpx;
          margin-bottom: 16rpx;

          .upload-item {
            position: relative;
            width: 100%;
            height: 200rpx;
            border-radius: 16rpx;
            overflow: hidden;

            .upload-image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .delete-btn {
              position: absolute;
              top: 8rpx;
              right: 8rpx;
              width: 40rpx;
              height: 40rpx;
              background: rgba(0, 0, 0, 0.6);
              color: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 32rpx;
              line-height: 1;
            }
          }

          .upload-btn {
            width: 100%;
            height: 200rpx;
            border: 2rpx dashed #d1d5db;
            border-radius: 16rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f9fafb;

            .upload-icon {
              font-size: 48rpx;
              color: #9ca3af;
              margin-bottom: 8rpx;
            }

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

        .upload-tip {
          font-size: 24rpx;
          color: #9ca3af;
          line-height: 1.5;
        }
      }
    }
  }

  .action-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border-top: 1rpx solid #f0f0f0;
    padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
    z-index: 100;

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28rpx;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-weight: 600;
      transition: all 0.3s ease;
      border: 2rpx solid #e5e7eb;

      &.primary-btn {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: white;
        border-color: #22c55e;

        &:active {
          opacity: 0.9;
        }

        .btn-text {
          margin-right: 12rpx;
        }

        .btn-icon {
          font-size: 28rpx;
        }
      }
    }
  }
}

.application-page::-webkit-scrollbar {
  display: none;
}
</style>