<script lang="ts" setup>
import { ref, watch } from 'vue'
import moment from 'moment'

const props = defineProps({
  MonthStartDate: {
    type: String
  },
  MonthEndDate: {
    type: String
  },
  isETDToETA: {
    type: Boolean,
    default: false
  }
})
const startDate = ref(props.MonthStartDate)
const EndDate = ref(props.MonthEndDate)
watch(
  () => props.MonthStartDate,
  (current) => {
    startDate.value = current
  }
)
watch(
  () => props.MonthEndDate,
  (current) => {
    EndDate.value = current
  }
)
const emit = defineEmits(['DateChange'])
const StartChange = (val: any) => {
  if (!props.isETDToETA) {
    const nextMonth = new Date(val)
    let currentYear = nextMonth.getFullYear() + 1
    let currentMonth = nextMonth.getMonth() + 2
    let current = currentYear + '-' + currentMonth
    EndDate.value = current
  }
  const date1 = moment(String(val)).format('MM/YYYY')
  const date2 = moment(EndDate.value).format('MM/YYYY')
  emit('DateChange', date1, date2)
}
const EndChange = (val: any) => {
  if (!props.isETDToETA) {
    const nextMonth = new Date(val)
    let currentYear = nextMonth.getFullYear() - 1
    let currentMonth = nextMonth.getMonth()
    let current = currentYear + '-' + currentMonth
    startDate.value = current
  }
  const date1 = moment(startDate.value).format('MM/YYYY')
  const date2 = moment(String(val)).format('MM/YYYY')
  emit('DateChange', date1, date2)
}
</script>

<template>
  <div>
    <el-date-picker
      style="width: 120px"
      v-model="startDate"
      format="MMM-YYYY"
      type="month"
      @change="StartChange"
      :clearable="false"
      placeholder="Start month"
      placement="bottom"
    />
    <el-date-picker
      style="width: 120px; margin-left: 8px"
      v-model="EndDate"
      format="MMM-YYYY"
      type="month"
      @change="EndChange"
      :clearable="false"
      placeholder="End month"
      placement="bottom"
    />
  </div>
</template>