<template>
  <div class="demo-date-picker" style="display: flex; align-items: center">
    <span>预约日期：</span>
      <el-date-picker
          v-model="value"
          type="date"
          placeholder="请选择预约日期"
          :size="size"
          style="width: 150px"
          @change="handleChangeDate"
      />
    </div>
</template>

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

const size = ref<'default' | 'large' | 'small'>('default')

const value = ref('')
let val = ''
import dayjs from "dayjs"
import emitter from "@/utils/emitter";
const handleChangeDate = (e:any) => {
  val = dayjs(e).format('YYYY-MM-DD')
  emitter.emit('getReservationDate', val)
}

onMounted(() => {
  emitter.on('clearReservationDate', () => {
    value.value = ''
    console.log(value.value)
  })
})

</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>