<template>
  <view>
    <view class="u-flex">
      <view class="item" @click="pirckerShow(startDate, 'startDate')">
        <text class="u-m-r-12" v-if="!startDate">请选择日期范围</text>
        <text class="u-m-r-12" v-else>{{ startDate }}</text>
        <up-icon name="arrow-down" size="14"></up-icon>
      </view>
      <view class="u-m-l-8 u-m-r-8">—</view>
      <view class="item" @click="pirckerShow(endDate, 'endDate')">
        <text class="u-m-r-12" v-if="!endDate">请选择日期范围</text>
        <text class="u-m-r-12" v-else>{{ endDate }}</text>
        <up-icon name="arrow-down" size="14"></up-icon>
      </view>
    </view>

    <up-datetime-picker
      :show="show"
      v-model="value1"
      closeOnClickOverlay
      @close="close"
      @cancel="close"
      @confirm="confirm"
      mode="date"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import dayjs from "dayjs";
const startDate = defineModel("startDate", {
  type: String,
  default: "",
});
const endDate = defineModel("endDate", {
  type: String,
  default: "",
});

const minDate = ref(0);
const maxDate = ref(dayjs().add(80, "year").valueOf());
function close() {
  show.value = false;
}
const value1 = ref(Date.now());
const show = ref(false);
const nowKey = ref("");

function pirckerShow(date, key) {
  nowKey.value = key;
  console.log(date);
  show.value = true;
}

function confirm(e) {
  console.log(e);

  if (nowKey.value == "startDate") {
    startDate.value = dayjs(e.value).format("YYYY-MM-DD");
  } else if (nowKey.value == "endDate") {
    endDate.value = dayjs(e.value).format("YYYY-MM-DD");
  }
  value1.value = e.value
  show.value = false;

}
</script>

<style lang="scss" scoped>
.item {
  font-size: 28rpx;
  color: #666;
  line-height: 64rpx;
  border: 2rpx solid #dddfe6;
  padding: 0 12rpx;
  display: flex;
}
</style>
