<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>
