<template>
  <view>
    <view @click="open">
      <slot v-if="$slots.default"> </slot>
      <view v-else class="choose-goods u-flex u-row-between">
        <text class="color-999" v-if="!startTime && !endTime"
          >请选择日期范围</text
        >
        <text class="color-333 u-font-24 u-m-r-32 " v-else
          >{{ startTime }} - {{ endTime }}</text
        >
        <view class="u-flex" v-if="startTime&&endTime" @click.stop="clear">
          <up-icon name="close" size="14"></up-icon>
        </view>
        <up-icon size="14" name="arrow-right" v-else ></up-icon>

      </view>
    </view>
    <my-date-pickerview
      @confirm="datePickerConfirm"
      mode="all"
      ref="datePicker"
    ></my-date-pickerview>
  </view>
</template>

<script setup>
import { ref } from "vue";
const datePicker = ref(null);
const startTime = defineModel("startTime", {
  default: () => "",
  type: String,
});
const endTime = defineModel("endTime", {
  default: () => "",
  type: String,
});

function clear(){
  startTime.value = "";
  endTime.value = "";
}
function open() {
  datePicker.value.toggle();
}
function datePickerConfirm(e) {
  startTime.value = e.start;
  endTime.value = e.end;
  console.log(e);
}
</script>
<style lang="scss">
.popup-content {
  background: #fff;
  width: 640rpx;
  border-radius: 18rpx;
}
.top {
  padding: 40rpx 48rpx;
  border-bottom: 1px solid #d9d9d9;
}
.bottom {
  padding: 48rpx 52rpx;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d9d9d9;
  gap: 50rpx;
  .btn {
    flex: 1;
    text-align: center;
    padding: 18rpx 60rpx;
    border-radius: 100rpx;
    font-size: 32rpx;
    border: 2rpx solid transparent;
    &.success {
      background-color: $my-main-color;
      color: #fff;
    }
    &.cancel {
      border-color: #d9d9d9;
      box-shadow: 0 4rpx 0 0 #00000005;
    }
  }
}
.item {
  padding: 10rpx 30rpx;
  border: 1px solid #d9d9d9;
  margin: 10rpx;
  border-radius: 8rpx;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px transparent;
  &.selected {
    border-color: $my-main-color;
    box-shadow: 0 0 10px $my-main-color;
  }
}
.choose-goods {
  display: flex;
  padding: 24rpx;
  align-items: center;
  border-radius: 8rpx;
  border: 2rpx solid #d9d9d9;
  background: #fff;
  font-size: 28rpx;
  font-weight: 400;
  min-height: 90rpx;
}
</style>
