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

const props = defineProps({
  CalendarWidth: {
    type: String,
    default: '250px'
  },
  CalendarTitle: {
    type: String
  },
  Date: {
    type: Array
  },
  isDisabled: {
    type: Boolean,
    default: false
  }
})
const ETDDate = ref(props.Date)
watch(
  () => props.Date,
  (current) => {
    ETDDate.value = current
  }
)
const emit = defineEmits(['DateRangeChange', 'DateChange'])
const open = ref(false)
const isShowExtra = ref(true)

const DateList = ref()
const daterange = (val: any) => {
  if (DateList.value.length == 2 && val != undefined) {
    emit('DateChange', DateList.value)
  }
}
const ChangeToday = (val: any) => {
  if (val == 'Earliest') {
    // ETDDate.value = [dayjs(), dayjs()]
    ETDDate.value[0] = dayjs()
    const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
    DateList.value[0] = date1
    daterange(DateList.value[1])
  } else {
    ETDDate.value[1] = dayjs()
    const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
    DateList.value[1] = date1
    daterange(DateList.value[0])
  }
}
const handleCalendarOpen = (date: any) => {
  open.value = !open.value
  if (open.value == false) {
    if (date.length != 2) {
      DateList.value = []
      ETDDate.value = []
    }
  }
}
const Earliest = () => {
  ETDDate.value[0] = dayjs('Oct-05-2009')
  const date1 = moment(String(ETDDate.value[0])).format('MM/DD/YYYY')
  DateList.value[0] = date1
  daterange(DateList.value[1])
}
const Latest = () => {
  ETDDate.value[1] = dayjs()
  const date1 = moment(String(ETDDate.value[1])).format('MM/DD/YYYY')
  DateList.value[1] = date1
  daterange(DateList.value[0])
}
const changeRangeData = (value: any) => {
  if (value != '') {
    const rangedata = {
      title: props.CalendarTitle,
      data: value
    }
    emit('DateRangeChange', rangedata)
    emit('DateChange', value)
  }
}
const handlePanelChange = (value: any, mode: any) => {
  if (mode[0] == 'year' || mode[0] == 'month') {
    isShowExtra.value = false
  } else {
    isShowExtra.value = true
  }
}
//预设范围
const rangePresets = ref([
  { label: 'Current Month', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
  {
    label: 'Last Month',
    value: [
      dayjs().startOf('month').subtract(1, 'month'),
      dayjs().endOf('month').subtract(1, 'month')
    ]
  },
  { label: 'This Year', value: [dayjs().startOf('year'), dayjs().endOf('year')] }
])
const placeholder = computed(() => {
  if (props.isDisabled) {
    return ['No Start Limit', 'No End Limit']
  } else {
    return ['Start Time', 'End Time']
  }
})
</script>
<template>
  <div>
    <a-range-picker
      separator="To"
      :showToday="false"
      :allowClear="false"
      :style="{ width: props.CalendarWidth }"
      :open="open"
      style="height: 40px"
      :presets="rangePresets"
      :disabled="props.isDisabled"
      @change="changeRangeData"
      :placeholder="placeholder"
      format="MMM-DD-YYYY"
      valueFormat="MM/DD/YYYY"
      @openChange="handleCalendarOpen(ETDDate)"
      @panelChange="handlePanelChange"
      v-model:value="ETDDate"
    >
      <template #suffixIcon>
        <span class="iconfont_icon">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-icon_date_b"></use>
          </svg>
        </span>
      </template>
      <template #renderExtraFooter v-if="isShowExtra">
        <div class="calender_flex">
          <div class="footer_left">
            <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
            <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
              >Today</el-button
            >
          </div>
          <div class="footer_left footer_right">
            <el-button @click="Latest" class="el-button--noborder">Latest Time</el-button>
            <el-button class="el-button--noborder" @click="ChangeToday('Latest')">Today</el-button>
          </div>
        </div>
      </template>
    </a-range-picker>
  </div>
</template>

<style lang="scss" scoped>
.calender_flex {
  display: flex;
  justify-content: space-between;
}
.footer_left {
  display: flex;
  flex: 50%;
  padding: 0 4px 0 0;
  height: 48px;
  display: flex;
  align-items: center;
}
.footer_right {
  border-left: 1px solid var(--color-border);
  padding-left: 8px;
}
.el-button--noborder {
  color: var(--color-theme);
}
.ETD_title {
  font-size: var(--font-size-2);
  margin-bottom: 4px;
  color: var(--color-neutral-2);
}
:deep(.ant-picker-range) {
  padding: 4px 8px;
}
</style>