<script setup>
import { q } from "#imports";
import { ref, watch } from "vue";
const { system } = await q({
  system: {
    database: {
      events: true
    }
  }
});
const selected = ref([]);
const eventDetail = ref(null);
watch(selected, async (newSelected) => {
  if (newSelected.length > 0) {
    const name = newSelected[0].Db + "." + newSelected[0].Name;
    const event = await getEvent(name);
    eventDetail.value = event;
  } else {
    eventDetail.value = null;
  }
}, { deep: true });
const getEvent = async (name) => {
  const { system: system2 } = await q({
    system: {
      database: {
        event: {
          __args: {
            name
          }
        }
      }
    }
  });
  return system2.database.event;
};
</script>

<template>
    <l-page>

        <q-table :rows="system.database.events" :pagination="{ rowsPerPage: 0 }" v-model:selected="selected"
            row-key="Name" selection="single" />

        <!-- 顯示選中的事件詳細內容 -->
        <div v-if="eventDetail" class="q-mt-md">
            <q-card>
                <q-card-section>
                    <div class="text-h6">事件詳細資料 - {{ eventDetail.Event }}</div>
                </q-card-section>
                <q-card-section>
                    <div class="row q-gutter-md">
                        <div class="col-12 col-md-6">
                            <q-card flat bordered>
                                <q-card-section>
                                    <div class="text-subtitle1 text-weight-bold">基本資訊</div>
                                    <q-separator class="q-my-sm" />
                                    <div class="q-gutter-sm">
                                        <div><strong>事件名稱:</strong> {{ eventDetail.Event }}</div>
                                        <div>
                                            <strong>SQL 模式:</strong>
                                            <div class="q-mt-xs text-caption"
                                                style="word-break: break-all; line-height: 1.3;">
                                                {{ eventDetail.sql_mode }}
                                            </div>
                                        </div>
                                        <div><strong>時區:</strong> {{ eventDetail.time_zone }}</div>
                                        <div><strong>字符集:</strong> {{ eventDetail.character_set_client }}</div>
                                        <div><strong>連接校對:</strong> {{ eventDetail.collation_connection }}</div>
                                        <div><strong>資料庫校對:</strong> {{ eventDetail['Database Collation'] }}</div>
                                    </div>
                                </q-card-section>
                            </q-card>
                        </div>
                        <div class="col-12 col-md-6">
                            <q-card flat bordered>
                                <q-card-section>
                                    <div class="text-subtitle1 text-weight-bold">事件定義</div>
                                    <q-separator class="q-my-sm" />
                                    <pre class="q-pa-sm bg-grey-1" style="white-space: pre-wrap; font-size: 12px;">{{
                                        eventDetail['Create Event'] }}</pre>
                                </q-card-section>
                            </q-card>
                        </div>
                    </div>
                </q-card-section>
            </q-card>
        </div>

    </l-page>
</template>
