<template>
  <div class="date-input-group ">
    <select id="prdctnYear" v-model="localDateForm.year" class="year-select" @change="emitChanges">
      <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
    </select>
    <input type="text" id="prdctnMonth" placeholder="월" v-model="localDateForm.month" maxlength="2" @input="onlyNumberInput('month')" class="month-input">
    <input type="text" id="prdctnDay" placeholder="일" v-model="localDateForm.day" maxlength="2" @input="onlyNumberInput('day')" class="day-input">
  </div>
</template>
<script>
export default {
  name: "PrdctnSelectComponent",

  props: {
    // 초기값 또는 부모에서 전달하는 날짜 객체
    modelValue: {
      type: Object,
      default: () => ({
        year: new Date().getFullYear(),
        month: '',
        day: ''
      })
    },

    // 포맷팅된 날짜 문자열 (YYYYMMDD)
    value: {
      type: String,
      default: ''
    }
  },

  emits: ['update:modelValue', 'formatted-date'],

  data() {
    return {
      // 내부적으로 사용할 로컬 데이터
      localDateForm: {
        year: this.modelValue.year || new Date().getFullYear(),
        month: this.modelValue.month || '',
        day: this.modelValue.day || ''
      }
    };
  },

  computed: {
    // 년도 옵션 (현재부터 1970년까지)
    yearOptions() {
      const currentYear = new Date().getFullYear();
      const years = [];
      for (let year = currentYear; year >= 1970; year--) {
        years.push(year);
      }
      return years;
    },

    // 날짜 포맷팅 (YYYYMMDD 형식)
    formattedDate() {
      const year = this.localDateForm.year || '';
      const month = this.localDateForm.month || '00';
      const day = this.localDateForm.day || '00';

      if (!year) return '';
      return `${year}${month.padStart(2, '0')}${day.padStart(2, '0')}`;
    }
  },

  watch: {
    // 부모로부터 변경된 값 감지
    modelValue: {
      handler(newValue) {
        // 참조 공유가 아닌 값 복사로 변경
        this.localDateForm = {
          year: newValue.year || new Date().getFullYear(),
          month: newValue.month || '',
          day: newValue.day || ''
        };
      },
      deep: true,
      immediate: true
    },

    // 외부에서 전달된 포맷팅된 날짜값 감지
    value: {
      handler(newValue) {
        if (newValue && newValue !== this.formattedDate) {
          this.parsePrdctnYear(newValue);
        }
      },
      immediate: true
    }
  },

  created() {
    // 컴포넌트 생성 시 값이 있으면 파싱
    if (this.value) {
      this.parsePrdctnYear(this.value);
    }
  },

  methods: {
    // 값 변경 시 부모에게 전달
    emitChanges() {
      this.$emit('update:modelValue', { ...this.localDateForm });
      this.$emit('formatted-date', this.formattedDate);
    },

    // 숫자만 입력 가능하도록 제한
    onlyNumberInput(field) {
      this.localDateForm[field] = this.localDateForm[field].replace(/[^0-9]/g, '');

      // 월 입력 범위 제한 (1-12)
      if (field === 'month' && this.localDateForm.month) {
        const month = parseInt(this.localDateForm.month);
        if (month > 12) this.localDateForm.month = '12';
        if (month < 1) this.localDateForm.month = '01';
      }

      // 일 입력 범위 제한 (1-31)
      if (field === 'day' && this.localDateForm.day) {
        const day = parseInt(this.localDateForm.day);
        if (day > 31) this.localDateForm.day = '31';
        if (day < 1) this.localDateForm.day = '01';
      }

      // 값 변경 알림
      this.emitChanges();
    },

    // 날짜 문자열 파싱 메서드
    parsePrdctnYear(prdctnYear) {
      if (!prdctnYear) {
        this.localDateForm = {
          year: new Date().getFullYear(),
          month: '',
          day: ''
        };
        this.emitChanges();
        return;
      }

      const prdctnYearStr = String(prdctnYear);

      if (prdctnYearStr.length === 4) {
        // YYYY 형식인 경우
        this.localDateForm = {
          year: prdctnYearStr,
          month: '',
          day: ''
        };
      } else if (prdctnYearStr.length === 8) {
        // YYYYMMDD 형식인 경우
        const year = prdctnYearStr.substring(0, 4);
        let month = prdctnYearStr.substring(4, 6);
        month = month === '00' ? '' : month;
        let day = prdctnYearStr.substring(6, 8);
        day = day === '00' ? '' : day;

        this.localDateForm = { year, month, day };
      }

      // 값 변경 알림
      this.emitChanges();
    }
  }
};
</script>
<style scoped>
 
</style>