<template>
  <uv-navbar :fixed="false" title="申请成为分销员" left-arrow @leftClick="$onClickLeft" />
  <view class="page">
    <!-- 头部导航 -->
    <!-- <view class="header">
      <image
        class="back-icon"
        src="/static/images/back.png"
        @tap="goBack"
      ></image>
      <text class="header-title">填写信息</text>
    </view> -->

    <!-- 表单 -->
    <view class="form-container" style=" padding: 40rpx 20rpx;  border-radius: 20rpx;">
      <!-- 姓名 -->
      <view class="form-item" style="">
        <text class="form-label">姓名<text style="color: red;"> *</text></text>
        <input class="form-input" type="text" v-model="formData.name" placeholder="请输入姓名"
          placeholder-class="placeholder" />
      </view>

      <!-- 电话 -->
      <view class="form-item">
        <text class="form-label">电话<text style="color: red;"> *</text></text>
        <input class="form-input" type="number" v-model="formData.phone" placeholder="请输入电话"
          placeholder-class="placeholder" maxlength="11" />
      </view>

      <!-- 工作单位 -->
      <view class="form-item">
        <text class="form-label">工作单位</text>
        <input class="form-input" type="text" v-model="formData.workUnit" placeholder="请输入工作单位"
          placeholder-class="placeholder" />
      </view>

      <!-- 银行卡号 -->
      <view class="form-item">
        <text class="form-label">银行卡号<text style="color: red;"> *</text></text>
        <input class="form-input" type="number" v-model="formData.bankCardNumber" placeholder="请输入银行卡号（结算佣金时需要）"
          placeholder-class="placeholder" />
      </view>

      <!-- 收款人姓名 -->
      <view class="form-item">
        <text class="form-label">开户名<text style="color: red;"> *</text></text>
        <input class="form-input" type="text" v-model="formData.recipientName" placeholder="请输入开户名（结算佣金时需要）"
          placeholder-class="placeholder" />
      </view>

      <!-- 开户行 -->
      <view class="form-item">
        <text class="form-label">开户行<text style="color: red;"> *</text></text>
        <input class="form-input" type="text" v-model="formData.bankName" placeholder="请输入开户行（结算佣金时需要）"
          placeholder-class="placeholder" />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="action-area">
      <view class="submit-btn" @tap="submitForm">提交</view>
      <view class="benefit-box">
        <view class="benefit-title" style="font-weight: bold; font-size: 36rpx;">为什么要加入我们？</view>
        <view class="benefit-item">
          <text class="benefit-text">加入我们的分销团队，不仅能共享潜力巨大的健康市场红利，更是爱的传递。</text>
        </view>
        <view class="benefit-item">
          <text class="benefit-text">高比例佣金回报、轻松销售模式已备好；</text>
        </view>
        <view class="benefit-title" style="font-weight: bold; font-size: 36rpx;">如何加入我们？</view>
        <view class="benefit-item">
          <text class="benefit-text">填写分销员申请表，审批通过即可获得专属分销码，客户扫码下单即可赚取收益，一起用爱创造价值！</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useMainStore } from "@/store/store";
import { storeToRefs } from "pinia";
import { createDistributor } from "@/api/distributor";

const main = useMainStore();
const { isLogin, member } = storeToRefs(main);

// 表单数据
const formData = reactive({
  id: "", // ID
  name: "", // 姓名
  phone: "", // 电话
  workUnit: "", // 工作单位
  recipientName: "", // 收款人姓名
  bankCardNumber: "", // 银行卡号
  bankName: "", // 开户行
});

// 表单校验规则
const validateForm = () => {
  if (!formData.name) {
    uni.showToast({
      title: "请输入姓名",
      icon: "none",
    });
    return false;
  }

  if (!formData.phone) {
    uni.showToast({
      title: "请输入电话",
      icon: "none",
    });
    return false;
  }

  // 手机号码验证
  const phoneRegex = /^1\d{10}$/;
  if (!phoneRegex.test(formData.phone)) {
    uni.showToast({
      title: "请输入正确的手机号码",
      icon: "none",
    });
    return false;
  }

  // 银行卡号可以选填，但如果填了则校验
  if (formData.bankCardNumber) {
    // 简单校验：银行卡号长度应在16-19位之间
    if (
      formData.bankCardNumber.length < 16 ||
      formData.bankCardNumber.length > 19
    ) {
      uni.showToast({
        title: "请输入正确的银行卡号",
        icon: "none",
      });
      return false;
    }
  }

  // 如果填写了银行卡号，收款人和开户行必填
  if (
    formData.bankCardNumber &&
    (!formData.recipientName || !formData.bankName)
  ) {
    uni.showToast({
      title: "请完整填写银行卡信息",
      icon: "none",
    });
    return false;
  }

  return true;
};

// 提交表单
const submitForm = async () => {
  if (!validateForm()) return;
  uni.showLoading({
    title: "提交中...",
  });

  // 调用分销商申请接口
  const requestData = {
    memberId: member.value.id, // ID 可选
    name: formData.name,
    phone: formData.phone,
    workUnit: formData.workUnit || "", // 工作单位可选
    recipientName: formData.recipientName, // 收款人姓名可选
    bankCardNumber: formData.bankCardNumber, // 银行卡号可选
    bankName: formData.bankName, // 开户行可选
  };

  let data = await createDistributor(requestData);
  if (data) {
    uni.showToast({
      title: "申请提交成功",
      icon: "success",
    });

    // 延迟返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 页面加载
onLoad((options) => {
  if (!isLogin.value) {
    uni.navigateTo({ url: "/pages/components/pages/login/login" });
  }

  // 获取传入的id参数并赋值
  if (options && options.id) {
    formData.id = options.id;
  }
});
</script>

<style scoped>
@import "./fenxiaorequestform.css";

.benefit-box {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  border: 1rpx solid #eee;
}

.benefit-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  text-align: center;
}

.benefit-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.benefit-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.benefit-text {
  font-size: 28rpx;
  color: #666;
  flex: 1;
}
</style>
