<template>
  <div class="min-h-screen bg-primary py-10">
    <div class="max-w-3xl mx-auto p-8 bg-white rounded-2xl shadow-lg">
      <h1 class="text-3xl font-bold mb-6 text-center text-secondary">
        永平中学校友会入会申请表
      </h1>

      <p class="text-sm text-gray-600 my-6 text-center leading-relaxed">
        兹申请加入成为永平中学校友会会员，愿遵守会规及议决案，并填此表为据。<br />
        入会费 <span class="font-bold text-secondary">RM60 / 年</span>。<br />
        填写此表格之后，会有理事联系您协商入会费事宜。
      </p>

      <el-form :model="form" :rules="rules" ref="formRef" label-width="130px" status-icon>
        <!-- 中文姓名 -->
        <el-form-item label="中文姓名" prop="chineseName">
          <el-input v-model="form.chineseName" placeholder="请输入中文姓名" />
        </el-form-item>

        <!-- 英文姓名 (自动转大写) -->
        <el-form-item label="英文姓名" prop="englishName">
          <el-input v-model="form.englishName" placeholder="请输入英文姓名" @input="toUpperCaseEnglish" />
        </el-form-item>

        <!-- IC -->
        <el-form-item label="IC" prop="ic">
          <el-input v-model="form.ic" placeholder="000000-00-0000" v-maska="'######-##-####'" />
        </el-form-item>

        <!-- 电邮 -->
        <el-form-item label="电邮" prop="email">
          <el-input v-model="form.email" placeholder="选填 / 国外必填"
            v-maska="['###-#######', '###-########', '+#############']" />
        </el-form-item>

        <!-- 电话 -->
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话（使用 WhatsApp 号码为佳，可加入校友会群组）" />
        </el-form-item>

        <!-- 毕业层次 -->
        <el-form-item label="毕业层次" prop="educationLevel">
          <el-radio-group v-model="form.educationLevel">
            <el-radio label="初中毕业">初中毕业</el-radio>
            <el-radio label="高中毕业">高中毕业</el-radio>
            <el-radio label="辍学/转学肄业">辍学/转学肄业</el-radio>
            <el-radio label="不确定">不确定</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 毕业年份 -->
        <el-form-item label="毕业年份" prop="gradYear">
          <el-input-number v-model="form.gradYear" :min="1957" :max="currentYear" :step="1"
            :disabled="form.unknownGradYear" />
          <el-checkbox v-model="form.unknownGradYear">毕业年份不详</el-checkbox>
          <span class="text-sm text-gray-500 ml-2" v-if="graduationBatch">
            您是第 <span class="font-bold">{{ graduationBatch }}</span> 届毕业生
          </span>
        </el-form-item>



        <!-- 婚姻状态 -->
        <el-form-item label="婚姻状态" prop="maritalStatus">
          <el-radio-group v-model="form.maritalStatus">
            <el-radio label="未婚">未婚</el-radio>
            <el-radio label="已婚">已婚</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 国家选择 -->
        <el-form-item label="国家" prop="country">
          <el-select v-model="form.country" placeholder="请选择国家">
            <el-option label="马来西亚" value="马来西亚" />
            <el-option label="新加坡" value="新加坡" />
            <el-option label="中国" value="中国" />
            <el-option label="美国" value="美国" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>

        <!-- 详细地址 -->
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea" v-model="form.address" placeholder="请输入现居详细地址" />
        </el-form-item>

        <!-- 提交按钮 -->
        <div class="text-center mt-8">
          <el-button type="warning"
            class="bg-secondary border-none px-8 py-2 rounded-xl text-white font-bold shadow hover:scale-105 transition"
            @click="handleSubmit">
            提交申请
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { vMaska } from 'maska/vue'

const currentYear = new Date().getFullYear();
const formRef = ref(null);

const form = reactive({
  chineseName: "",
  englishName: "",
  ic: "",
  email: "",
  phone: "",
  gradYear: null,
  maritalStatus: "",
  country: "",
  address: "",
});

// 英文名自动转大写
const toUpperCaseEnglish = () => {
  form.englishName = form.englishName.toUpperCase();
};

// 1966 年为第一届高中生毕业年份。由此根据 gradYear 计算毕业届别
const graduationBatch = computed(() => {
  if (form.gradYear) {
    if (form.educationLevel === "高中毕业") {
      return form.gradYear - 1965; // 高中届别
    } else if (form.educationLevel === "初中毕业") {
      return form.gradYear - 1958; // 假设 1959 第一届初中
    }
  }
  return null;
});


// 表单验证规则
const rules = {
  chineseName: [{ required: true, message: "请输入中文姓名", trigger: "blur" }],
  englishName: [{ required: true, message: "请输入英文姓名", trigger: "blur" }],
  ic: [
    { required: true, message: "请输入 IC", trigger: "blur" },
    {
      pattern: /^\d{6}-\d{2}-\d{4}$/,
      message: "格式应为 000000-00-0000",
      trigger: "blur",
    },
  ],
  email: [
    {
      validator: (rule, value, callback) => {
        if (!value && form.country !== "马来西亚") {
          callback(new Error("国外居住必须填写电邮"));
        } else if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
          callback(new Error("请输入有效的电邮地址"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  phone: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (/^01\d{1}-\d{7,8}$/.test(value)) {
          callback();
        } else if (/^\+\d{1,3}\s?\d+$/.test(value)) {
          callback();
        } else {
          callback(new Error("请输入马来西亚号 (01x-xxxxxxx) 或带区号的号码"));
        }
      },
      trigger: "blur",
    },
  ],
  educationLevel: [
    { required: true, message: "请选择毕业层次", trigger: "change" },
  ],
  gradYear: [
    {
      validator: (rule, value, callback) => {
        if (!form.unknownGradYear && !value) {
          callback(new Error("请输入毕业年份或勾选“毕业年份不详”"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  maritalStatus: [
    { required: true, message: "请选择婚姻状态", trigger: "change" },
  ],
  country: [{ required: true, message: "请选择国家", trigger: "change" }],
  address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
};

// 提交
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success("提交成功！理事会将尽快联系您。");
    } else {
      ElMessage.error("请完善表单信息");
    }
  });
};
</script>
