<template>
  <div class="time_box">
    <van-field
      v-model="startTimeval"
      label-width="60px"
      placeholder="开始日期"
      input-align="left"
      right-icon="arrow-down"
      readonly
      @click.stop="onClickTime('start')"
    ></van-field>
    <div class="relevance">至</div>
    <van-field
      v-model="endTimeVal"
      label-width="60px"
      input-align="left"
      right-icon="arrow-down"
      placeholder="结束日期"
      @click.stop="onClickTime('end')"
      readonly
    ></van-field>
  </div>
</template>
<script setup>
import { ref, onMounted, watch, defineProps, defineEmits } from "vue";
import { dateFormat } from "../utils/tools.js";
const props = defineProps({
  startTime: String,
  endTime: String,
});
watch(
  () => props.endTime,
  (newValue) => {
    endTimeVal.value = newValue;
  }
);
watch(
  () => props.startTime,
  (newValue) => {
    startTimeval.value = newValue;
  }
);

const emits = defineEmits(["update:startTime", "update:endTime"]);
const startTimeval = ref(""); //开始时间
const endTimeVal = ref(""); //结束时间
const timeType = ref("start");
function onClickTime(val) {
  timeType.value = val;
  if (val == "start") {
    emits("update:startTime", val);
  } else {
    emits("update:endTime", val);
  }
}
</script>
<style lang="scss" scoped>
.time_box {
  display: flex;
  padding: 0 3vw;
  margin-bottom: 4vw;

  .relevance {
    position: relative;
    bottom: 0;
    line-height: 33.5px;
    margin: 0 2.5vw;
  }
}
</style>
