<template>
  <div>
    <div class="d-flex align-items-center">
      <div class="grid-item-text" @click="showDate">{{ name }}</div>
      <van-icon name="close" v-if="name !== initialName" @click="clearName" />
      <van-icon name="arrow-down" v-else @click="showDate" />
    </div>
    <van-calendar v-model:show="showCalendar" @select="onDateConfirm" :show-confirm="false" switch-mode="year-month"
      :default-date="defaultDate" />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import moment from 'moment'
let showCalendar = ref(false)
let name: any = ref('')
let defaultDate: any = ref()
let prop = defineProps({
  initialName: String,
  selectDate: String
})

onMounted(() => {
  nextTick(() => {
    name.value = prop.selectDate
  })
})

const showDate = () => {
  defaultDate.value = name.value === prop.initialName ? null : new Date(name.value)
  showCalendar.value = true
}
const clearName = () => {
  name.value = prop.initialName
  emit('refresh', name.value)
}
const onDateConfirm = (e: any) => {
  name.value = moment(e).format('YYYY-MM-DD')
  showCalendar.value = false
  emit('refresh', name.value)
}
const emit = defineEmits(['refresh'])
</script>
<style lang="scss"></style>