<script lang="ts" setup>
import dayjs, { Dayjs } from 'dayjs'
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()
const valueFormatDate = 'MM/DD/YYYY'
// type RangeValue = [Dayjs, Dayjs]
// const ETDDate = ref<RangeValue>()
const props = defineProps({
  CalendarWidth: {
    type: String,
    default: '368px'
  },
  CalendarTitle: {
    type: String
  },
  Date: {
    type: Array
  },
  isType: {
    type: Boolean,
    default: false
  }
})
const ETDDate = ref([])
watch(
  () => props.Date,
  (current: any) => {
    if (current?.length == 2) {
      ETDDate.value = [
        current[0] ? dayjs(current[0]).format(valueFormatDate) : '',
        current[1] ? dayjs(current[1]).format(valueFormatDate) : ''
      ]
    }
  },
  { immediate: true, deep: true }
)

const emit = defineEmits(['DateRangeChange', 'DateChange'])
const open = ref(false)
const Disabled = ref([false, false])
const isShowExtra = ref(true)

const DateList = ref()
DateList.value = []
const daterange = (val: any) => {
  if (DateList.value.length == 2 && val != undefined) {
    const rangedata = {
      title: props.CalendarTitle,
      data: DateList.value
    }
    emit('DateRangeChange', rangedata)
  }
}
const ChangeToday = (val: any) => {
  if (val == 'Earliest') {
    // ETDDate.value = [dayjs(), dayjs()]
    ETDDate.value[0] = dayjs()
    const date1 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
    DateList.value[0] = date1
    daterange(DateList.value[1])
  } else {
    ETDDate.value[1] = dayjs()
    const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
    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 = dayjs(String(ETDDate.value[0])).format(valueFormatDate)
  DateList.value[0] = date1
  daterange(DateList.value[1])
}
const Latest = () => {
  ETDDate.value[1] = dayjs()
  const date1 = dayjs(String(ETDDate.value[1])).format(valueFormatDate)
  DateList.value[1] = date1
  daterange(DateList.value[0])
}
const changeRangeData = (value: any) => {
  DateList.value = value
  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 isTwoDate = (date: any) => {
  console.log(date)
}
</script>
<template>
  <div>
    <div class="ETD_title">{{ props.CalendarTitle }}</div>
    <a-range-picker
      separator="To"
      :showToday="false"
      :style="{
        width: props.CalendarWidth,
        backgroundColor: props.isType ? 'var(--more-type-bg-color)' : 'var(--management-bg-color)'
      }"
      :open="open"
      :disabled="Disabled"
      @change="changeRangeData"
      :placeholder="['Start Time', 'End Time']"
      :format="userStore.dateFormat"
      valueFormat="MM/DD/YYYY"
      @openChange="handleCalendarOpen(ETDDate)"
      @panelChange="handlePanelChange"
      v-model:value="ETDDate"
    >
      <template #suffixIcon>
        <span class="iconfont_icon">
          <svg class="iconfont icon_suffix" 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 0 0 5px;
  height: 48px;
  display: flex;
  align-items: center;
}
.footer_right {
  border-left: 1px solid var(--border-color-2);
  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);
}
.iconfont_icon {
  margin-right: 0;
}
.iconfont {
  width: 14px;
  height: 14px;
}
.icon_suffix {
  fill: var(--color-neutral-1);
}
</style>
