<template>
  <div class="overflow-auto" style="height: 300px">
    <div v-for="(list, idx) in state.listData" :key="idx">
      <div style="font-weight: bolder; font-size: 16px" class="fl-py-sm">
        {{ list.date }}
      </div>
      <div
        v-for="(time, timeIdx) in list.time"
        :key="'time_' + timeIdx"
        class="fl-pa-sm list-time-item cursor"
        @click="handleCalendarClick(list)"
      >
        <span class="fl-mr-sm">{{ time.hour }}</span
        ><span>{{ time.dothing }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
const state = reactive({
  listData: [
    {
      date: "2022-06-29",
      time: [
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
      ],
    },
    {
      date: "2022-06-02",
      time: [
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
      ],
    },
    {
      date: "2022-08-17",
      time: [
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
      ],
    },
    {
      date: "2022-07-01",
      time: [
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
      ],
    },
    {
      date: "2022-07-01",
      time: [
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
      ],
    },
    {
      date: "2022-07-01",
      time: [
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
        { hour: "00:00", dothing: "xxx" },
      ],
    },
  ],
});

const emits = defineEmits(["triggerContainerClick"]);
const handleCalendarClick = (rowData) => {
  emits("triggerContainerClick", rowData.date);
};
</script>
<style scoped>
.list-time-item:hover {
  border-radius: 20px;
  background-color: rgb(139, 134, 134);
}
</style>
