<script setup lang="ts">
import text2videoService from "@/api/service/text2videoService";
import utils from "@/utils/utils";
import {
  ElMessage, genFileId,
  type UploadInstance,
  type UploadProps,
  type UploadRawFile
} from "element-plus";
import { nextTick, onMounted, reactive, ref } from "vue";

const debug = ref(import.meta.env.MODE === 'production' ? false : true);
// const debug = ref(false);
const loading = ref(false);
const form = reactive({
  task_id: "",
  birth: "1976-01",
  sex_value: "男",
  sex_option: [
    {
      value: '男',
      label: '男',
    },
    {
      value: '女50岁退休',
      label: '女（普通）50岁退',
    },
    {
      value: '女55岁退休',
      label: '女（管理、灵活就业）55岁退',
    },
  ],
  retire_age: "",
  retire_date: "",
  how_long_to_retire: "",
});

onMounted(() => {
  // 初始化task_id
  form.task_id = utils.genDateTimeStr();
  console.log('页面加载，task_id=', form.task_id);
  document.title = "延迟退休年龄计算器";
});

const calculateRetirement = (birthStr: string, gender: string) => {
    console.log(birthStr)
    let parts = birthStr.split('-'); // 使用'-'作为分隔符来拆分字符串
    let birthYear = parseInt(parts[0], 10); // 年份
    let birthMonth = parseInt(parts[1], 10); // 月份

    const currentYear = new Date().getFullYear();
    const birthDate = new Date(`${birthYear}-${birthMonth < 10 ? '0' + birthMonth : birthMonth}-01`);
    let retirementAge, delayMonths, retirementYear, retirementMonth;

    if (gender === '男') {
        retirementAge = 60;
        delayMonths = Math.ceil(((birthYear - 1965)*12 + birthMonth) / 4);
    } else if (gender === '女50岁退休') {
        retirementAge = 50;
        delayMonths = Math.ceil(((birthYear - 1975)*12 + birthMonth) / 2);
    } else if (gender === '女55岁退休') {
        retirementAge = 55;
        delayMonths = Math.ceil(((birthYear - 1970)*12 + birthMonth) / 4);
    } else {
        console.log("Invalid gender input. Please choose '男', '女50岁退休', or '女55岁退休'.");
        return;
    }

    if (birthYear >= 1977 && gender == '男') {
      delayMonths = 36;
    } else if (birthYear >= 1985 && gender == '女50岁退休') {
      delayMonths = 60;
    } else if (birthYear >= 1982 && gender == '女55岁退休') {
      delayMonths = 36;
    }

    retirementAge += Math.floor(delayMonths / 12);
    console.log(retirementAge, delayMonths)


    let retirementDate = new Date(birthDate);
    console.log(retirementDate)

    retirementDate.setFullYear(retirementDate.getFullYear() + retirementAge);
    retirementDate.setMonth(retirementDate.getMonth() + delayMonths % 12);
    console.log(retirementDate)

    retirementYear = retirementDate.getFullYear();
    retirementMonth = retirementDate.getMonth() + 1; // getMonth() returns 0-11
    console.log(retirementYear, retirementMonth)

    let yearsUntilRetirement = retirementDate.getFullYear() - currentYear -1;
    let monthsUntilRetirement = (retirementDate.getMonth() - new Date().getMonth() + 12) % 12 -1;
    if (monthsUntilRetirement < 0) {
        yearsUntilRetirement--;
        monthsUntilRetirement += 12;
    }

    if ((birthYear < 1965 && gender == '男') ||
        (birthYear < 1975 && gender == '女50岁退休') ||
        (birthYear < 1970 && gender == '女55岁退休')) {
          form.retire_age = `您已退休`;
          form.retire_date = `您已退休`;
          form.how_long_to_retire = `您已退休`;

    } else {
      form.retire_age = `${retirementAge}岁+${delayMonths % 12}个月`;
      form.retire_date = `${retirementYear}-${retirementMonth < 10 ? '0' + retirementMonth : retirementMonth}-01`;
      form.how_long_to_retire = `${yearsUntilRetirement}年${monthsUntilRetirement}个月`;
    }

};
</script>

<!-- ============================================================================================================ -->
<!-- ============================================================================================================ -->
<!-- ============================================================================================================ -->

<template>
  <main class="home-container">
    <!-- 标题 -->
    <el-divider content-position="left">延迟退休年龄计算器</el-divider>
    <el-form :model="form" label-width="114px" v-loading="loading">
      <!-- 输入出生年月 -->
      <el-form-item label="出生年月">
        <el-date-picker
          v-model="form.birth"
          type="month"
          placeholder="Pick a month"
          format="YYYY-MM"
          value-format="YYYY-MM"
        />
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别">
        <el-select
          v-model="form.sex_value"
          placeholder="Select"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in form.sex_option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 计算 -->
      <el-form-item>
        <el-button type="primary" @click="calculateRetirement(form.birth, form.sex_value)"
          >开始计算</el-button
        >
      </el-form-item>
      <!-- 结果 -->
      <el-form-item label="您的退休年龄">
        <el-text class="mx-1">{{ form.retire_age }}</el-text>
      </el-form-item>
      <el-form-item label="您的退休日期">
        <el-text class="mx-1">{{ form.retire_date }}</el-text>
      </el-form-item>
      <el-form-item label="距离退休还有">
        <el-text class="mx-1">{{ form.how_long_to_retire }}</el-text>
      </el-form-item>
    </el-form>
  </main>
</template>

<style lang="scss" scoped>
.home-container {
  width: 100%;
}
</style>