<script setup>
import {QCalendarScheduler} from '@quasar/quasar-ui-qcalendar/src/QCalendarScheduler'
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass'
import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass'
import '@quasar/quasar-ui-qcalendar/src/QCalendarScheduler.sass'
import {computed, ref} from "vue";
import dayjs from "dayjs";
import {useQuasar} from "quasar";

const quasar = useQuasar()

const open = defineModel("open")

const selectedTime = defineModel("time", {
  default: {
    section: 0,
    weekday: 1
  }
})

const func = defineEmits([
  'onClose', 'onOk'
])

const cellHeight = 110

const today = dayjs()
const displayDate = today.format("YYYY-MM-DD")

const resources = [
  {id: 0, name: '1~2'},
  {id: 1, name: '3~4'},
  {id: 2, name: '5~6'},
  {id: 3, name: '7~8'},
  {id: 4, name: '9~10'},
  {id: 5, name: '11~12'},
]

function generateTimeGrid(scope) {
  const result = []
  const section = scope.resourceIndex

  for (let weekday = 1; weekday <= 7; weekday++) {
    const time = {
      weekday: weekday,
      section: section
    }

    result.push({
      time: time,
      left: getLeft(scope, time),
      width: getWidth(scope),
      selected: time.weekday === selectedTime.value.weekday && time.section === selectedTime.value.section
    })
  }

  return result
}

function getStyle(event) {
  return {
    position: 'absolute',
    left: event.left,
    width: event.width,
    height: cellHeight + 'px',
  }
}

function getLeft(scope, time) {
  const left = (time.weekday - 1) * parseFloat(scope.cellWidth)
  return left + (scope.cellWidth.endsWith('%') ? '%' : 'px')
}

function getWidth(scope) {
  const cellWidth = parseFloat(scope.cellWidth)
  return cellWidth + 'px'
}

function action() {
  func('onOk', selectedTime.value)
}

function setTime(time) {
  selectedTime.value = time
}

const weekdayMap = {
  1: "星期一",
  2: "星期二",
  3: "星期三",
  4: "星期四",
  5: "星期五",
  6: "星期六",
  0: "星期日",
}

</script>

<template>
  <q-dialog persistent no-esc-dismiss no-shake transition-show="fade" transition-hide="fade"
            v-model="open">
    <q-card class="class-dialog">
      <div class="sticky top-0 bg-white z-10">
        <q-card-section>
          <div class="text-h6">选择时间</div>
        </q-card-section>
      </div>

      <q-separator/>

      <q-card-section class="">
        <div class="w-full max-w-full calendar-container">
          <q-calendar-scheduler
              class="w-full" bordered style="--calendar-resources-width: 40px"
              :weekdays="[1,2,3,4,5,6,0]"
              v-model="displayDate"
              :now="displayDate"
              view="week"
              v-model:model-resources="resources" resource-key="id" resource-label="name"
              :resource-height="cellHeight"
              locale="zh-HANS"
          >

            <template #head-day="{ scope }">
              <div class="text-center h-full">
                {{ weekdayMap[scope.timestamp.weekday] }}
              </div>
            </template>

            <template #resource-days="{ scope }">
              <template v-for="grid in generateTimeGrid(scope)" :key="grid">
                <q-btn multi-line no-caps
                       :flat="grid.time.weekday !== selectedTime.weekday || grid.time.section !== selectedTime.section"
                       class="course-card flex-center p-1 cursor-default"
                       @click="setTime(grid.time)"
                       :icon="grid.selected ? 'done' : ''"
                       color="green"
                       :style="getStyle(grid)"
                />
              </template>
            </template>
          </q-calendar-scheduler>
        </div>
      </q-card-section>

      <q-separator/>

      <div class="sticky bottom-0 bg-white z-10">
        <q-card-actions align="right" class="sticky bottom-0">
          <slot name="actions"></slot>
          <q-btn flat v-close-popup>算了</q-btn>
          <q-btn flat @click="action" v-close-popup>好的</q-btn>
        </q-card-actions>
      </div>
    </q-card>
  </q-dialog>

</template>

<style lang="sass" scoped>
.class-dialog
  min-width: 85vw
//min-h
*
  transition: all 0.2s linear 0s

.course-count-text
  font-size: 0.6rem

@media not all and (min-width: 400px)
  .course-card
    padding: 2px
  .course-text
    font-size: 0.6rem
  .week-selector
    width: 100%
</style>
