<template>
  <div class="select">
    <div class="select addTimeBox">
      <div class="addTime">创建时间：</div>
      <a-range-picker
        :value="dateTime"
        style="width: 420px"
        format="YYYY-MM-DD"
        valueFormat="YYYY-MM-DD"
        separator="至"
        :placeholder="['      开始时间', '        结束时间']"
        @change="change"
      />
    </div>
  </div>
</template>
<script setup>
import {defineEmits,ref} from "vue";

const emit = defineEmits(["update:beginTime", "update:endTime"]);

const dateTime = ref([null,null]);

const resetTime = () => {
  dateTime.value = [null,null]
  emit("update:beginTime", null);
  emit("update:endTime", null);
}

function change(e) {
  console.log(e)
  dateTime.value = [e[0],e[1]]
  emit("update:beginTime", e[0]);
  emit("update:endTime", e[1]);
}

//暴露resetTime方法
defineExpose({
  resetTime
});
</script>
<style  lang="scss">
.addTimeBox {
  position: relative;
  display: flex;
  align-items: center;

.addTime {
  position: absolute;
  z-index: 10;
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.4);
}

.ant-picker {
  padding-left: 85px;
}

.ant-picker-range .ant-picker-active-bar {
  margin-left: 85px;
}
}
</style>