<script setup lang="ts">
import LiveServerAvailableNotice from "./components/LiveServerAvailableNotice.vue";
import {computed, onMounted, ref} from "vue";
import {StorageRecord, StorageService} from "../../service/StorageService";
import {Dialog} from "../../lib/dialog";
import {t} from "../../lang";
import {useCheckAll} from "../../components/common/check-all";
import StorageBatchDeleteAction from "../../components/Server/StorageBatchDeleteAction.vue";
import {EventTypes, eventTypeToLabel} from "./util";
import {LiveKnowledgeContentType} from "../../types/Live";

const loading = ref(false);
const records = ref<StorageRecord[]>([]);
const page = ref(1);
const pageSize = ref(100);
const recordsForPage = computed(() => {
    return records.value
        .filter(r => {
            if (filter.value.type) {
                if (r.title !== filter.value.type) {
                    return false;
                }
            }
            return true;
        })
        .slice((page.value - 1) * pageSize.value, page.value * pageSize.value);
});
const {mergeCheck, isIndeterminate, isAllChecked, onCheckAll, checkRecords} = useCheckAll({
    records: recordsForPage,
});

const filter = ref({
    type: "" as LiveKnowledgeContentType["type"],
});

const doRefresh = async () => {
    loading.value = true;
    records.value = await StorageService.list("LiveTalk");
    loading.value = false;
};

const doDelete = async (record: StorageRecord) => {
    await Dialog.confirm(t("确认删除？"));
    await StorageService.delete(record);
    await doRefresh();
};

const doClear = async () => {
    await Dialog.confirm(t("确认清空？"));
    await StorageService.clear("LiveTalk");
    await doRefresh();
};

onMounted(() => {
    doRefresh();
});
</script>

<template>
    <div class="p-5">
        <div class="mb-4 flex items-center">
            <div class="text-3xl font-bold flex-grow">播报历史</div>
            <div class="flex items-center">
                <a-button class="ml-1" @click="doRefresh()" v-if="!loading && records.length > 0">
                    <template #icon>
                        <icon-refresh />
                    </template>
                    刷新
                </a-button>
                <a-button class="ml-1" @click="doClear()" v-if="!loading && records.length > 0">
                    <template #icon>
                        <icon-delete />
                    </template>
                    清空
                </a-button>
            </div>
        </div>
        <div>
            <LiveServerAvailableNotice />
            <div v-if="loading">
                <m-loading />
            </div>
            <div v-else-if="records.length === 0" class="py-20">
                <m-empty />
            </div>
            <div v-else-if="records.length > 0" class="mb-3">
                <div class="rounded-xl shadow border p-4 mt-4 hover:shadow-lg flex items-center">
                    <div class="flex-grow flex items-center">
                        <div class="mr-3">
                            <a-checkbox
                                :model-value="isAllChecked"
                                :indeterminate="isIndeterminate"
                                @change="onCheckAll"
                            >
                                {{ $t("全选") }}
                            </a-checkbox>
                        </div>
                        <StorageBatchDeleteAction :records="checkRecords" @update="doRefresh" />
                    </div>
                    <div>
                        <a-pagination
                            v-model:current="page"
                            :total="records.length"
                            :page-size="10"
                            show-total
                            simple
                        />
                    </div>
                </div>
            </div>
            <div v-if="records.length > 0 && recordsForPage.length === 0" class="py-20">
                <m-empty />
            </div>
            <div v-for="r in recordsForPage" :key="r.id" class="mb-3">
                <div class="rounded-xl shadow border p-4 hover:shadow-lg">
                    <div class="flex items-center">
                        <div class="inline-flex items-start bg-blue-100 rounded-full px-2 leading-8 h-8 mr-2">
                            <div class="mr-2 h-8 pt-0.5">
                                <a-checkbox v-model="r['_check']" />
                            </div>
                            <div class="">
                                {{ r.title }}
                            </div>
                        </div>
                        <div class="text-gray-400">
                            <timeago :datetime="r['createdAt'] * 1000" />
                        </div>
                        <div class="flex-grow"></div>
                        <div class="flex items-center">
                            <a-button @click="doDelete(r)" class="ml-1" size="mini">
                                <template #icon>
                                    <icon-delete />
                                </template>
                            </a-button>
                        </div>
                    </div>
                    <div class="pt-3">
                        {{ r.content.content }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
