<script lang="ts">
import {
  getResourceDisplayText,
} from '../../../../../../common/zkan-utils.js';
import { computed, type PropType } from 'vue';
import type { Resource } from '../../../../../../composables/resourcestore';
import type { Event } from '../../../../../../composables/eventstore';


export default {
  name: 'PageMasterTimetableResourcesIndex_EventList',
  props: {
    events: { type: Array as PropType<Event[]>, required: true },
    excludeResourceIDs: { type: Array as PropType<string[]>, default: [] }
  },
  setup(props) {
    return { getResourceDisplayText };
  },
}
</script>

<template>
<table>
  <thead>
    <tr>
      <th>ID</th><th>振替</th><th>枠</th><th>日付</th><th>時間帯</th>
      <th>リソース</th><th>メモ</th><th>色</th><th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="e of events" :key="e.id">
      <td>
        <event-link :event="e">{{ `...${e.id.slice(-4)}` }}</event-link>
      </td>
      <td>
        <template v-if="e.eventChangeTo">
          <template v-if="e.eventChangeTo.toEvent">
            →<EventLink
              v-if="e.eventChangeTo.toEvent"
              :event="e.eventChangeTo.toEvent"
            >振替先</EventLink>
          </template>
          <template v-else>取消済み</template>
        </template>
        <template v-if="e.eventChangeFrom">
          ←<EventLink
            :event="e.eventChangeFrom.fromEvent"
          >振替元</EventLink>
        </template>
      </td>
      <td>{{ e.type === 'lesson' ? e.frame : '[N/A]' }}</td>
      <td><date-time :value="e.startTime.date()" /></td>
      <td>{{ e.timeLabel?.label ?? '[無し]'}}</td>
      <td>
        <ul style="margin: 0;">
          <li v-for="r of e.resources.filter(
            r => !excludeResourceIDs.includes(r.id)
          )" :key="r.id">
            {{ getResourceDisplayText(r) }}
          </li>
        </ul>
      </td>
      <td>{{ e.memo }}</td>
      <td>
        <span class="colorbox" :style="{'--colorbox-color': e.color}"></span>
      </td>
      <td>
        <router-link :to="`/master/timetable/events/${e.id}/index`">
          詳細
        </router-link>
      </td>
    </tr>
  </tbody>
</table>
</template>

<style scoped>
.colorbox {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: solid 1px #000000;
  vertical-align: middle;
  background-color: var(--colorbox-color);
}
</style>
