<template>
  <view >
    <up-radio-group v-model="useTimeType" placement="row">
      <up-radio
        v-for="item in useTimeTypeList"
        :key="item.value"
        :value="item.value"
        :name="item.value"
        :label="item.label"
      ></up-radio>
    </up-radio-group>

    <view class="u-flex u-m-t-30 box" v-if="useTimeType=='custom'">
        <view class="u-flex u-flex-1">
            <view class="item " @click="pirckerShow(startValue, 'startValue')">
        <text class="u-m-r-12" v-if="!startValue">开始时间</text>
        <text class="u-m-r-12" v-else>{{ startValue }}</text>
      </view>
      <view class="u-m-l-8 u-m-r-8" style="padding: 0 30rpx;">—</view>
      <view class="item " @click="pirckerShow(endValue, 'endValue')">
        <text class="u-m-r-12" v-if="!endValue">结束时间</text>
        <text class="u-m-r-12" v-else>{{ endValue }}</text>
      </view>
        </view>

      <up-icon name="clock"></up-icon>
    </view>

    <up-datetime-picker
      :show="show"
      v-model="value1"
      closeOnClickOverlay
      @close="close"
      @cancel="close"
      @confirm="confirm"
      mode="time"
    ></up-datetime-picker>
  </view>
</template>
  
  <script setup>
import { computed, ref } from "vue";
const useTimeType = defineModel("useTimeType", {
  type: String,
  default: "all",
});
const useTimeTypeList = [
  {
    value: "all",
    label: "全时段可用",
  },
  {
    value: "custom",
    label: "指定时间段可用",
  },
];
import dayjs from "dayjs";
const startValue = defineModel("startValue", {
  type: String,
  default: "",
});
const endValue = defineModel("endValue", {
  type: String,
  default: "",
});

function close() {
  show.value = false;
}
const value1 = ref('');
const show = ref(false);
const nowKey = ref("");

function pirckerShow(date, key) {
  nowKey.value = key;
  show.value = true;
  value1.value = date||''
}

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

  if (nowKey.value == "startValue") {
    startValue.value=e.value
  } else if (nowKey.value == "endValue") {
    endValue.value = e.value;
  }
  value1.value = e.value;
  show.value = false;
}
</script>
  
  <style lang="scss" scoped>
.item {
  font-size: 28rpx;
  color: #666;
  line-height: 48rpx;
  padding: 0 12rpx;
  display: flex;
  
}
.box{
    border: 2rpx solid #dddfe6;
    padding: 16rpx 30rpx;
    box-sizing: border-box;
    width: 564rpx;
    border-radius: 4rpx;
    overflow: hidden;
}
</style>
  