<template>
  <div class="d-flex align-items-center  flex-wrap ">
    <!-- Checkbox to toggle timepicker visibility -->
    <div class="form-check form-switch">
      <input
          type="checkbox"
          class="form-check-input"
          role="switch"
          id="showTimepicker"
          v-model="showTimepicker"
      />
      <label class="form-check-label me-4" for="showTimepicker">{{ title }}</label>
    </div>
    <div v-if="showTimepicker">
      <VueTimepicker
          v-for="(picker, index) in pickers"
          :key="index"
          :picker="picker"
          class="mt-2 ms-2"
          :placeholder="index"
          v-model="time[index]"
          @change="updateTime(index)"
      >
        <template v-slot:icon>
          <i class="bi bi-clock"></i>
        </template>
      </VueTimepicker>
    </div>
  </div>
</template>

<script>
import VueTimepicker from "vue3-timepicker";
export default {
  name: "TimePicker",
  props: {
    title: String,
    pickers: {
      type: Object,
      required: true,
      default: () => ({
        time: "00:00",
      }),
    },
    enable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showTimepicker: false,
      time: {}, // 本地时间数据
    };
  },
  components: {
    VueTimepicker,
  },
  mounted() {
    this.showTimepicker = this.enable;
    this.time = { ...this.pickers }; // 初始化 time 数据
  },
  methods: {
    updateTime() {
      this.$emit("update:pickers", Object.assign({}, this.time, this.showTimepicker)); // 确保事件名称和父组件一致
    },
  },
};
</script>

<style>
</style>
