<script setup lang="ts">
import {onMounted, ref} from "vue";
import TaskBatchDeleteAction from "../../../components/Server/TaskBatchDeleteAction.vue";
import TaskBatchDownloadAction from "../../../components/Server/TaskBatchDownloadAction.vue";
import TaskDeleteAction from "../../../components/Server/TaskDeleteAction.vue";
import TaskDownloadAction from "../../../components/Server/TaskDownloadAction.vue";
import TaskDuration from "../../../components/Server/TaskDuration.vue";
import TaskTitleField from "../../../components/Server/TaskTitleField.vue";
import AudioPlayer from "../../../components/common/AudioPlayer.vue";
import TaskBizStatus from "../../../components/common/TaskBizStatus.vue";
import VideoPlayer from "../../../components/common/VideoPlayer.vue";
import {useCheckAll} from "../../../components/common/check-all";
import {TaskRecord, TaskService} from "../../../service/TaskService";
import {usePaginate} from "../../../hooks/paginate";
import {useTaskChangeRefresh} from "../../../hooks/task";
import VideoGenFlowCreate from "./components/VideoGenFlowCreate.vue";
import ServerNameVersion from "../../../components/Server/ServerNameVersion.vue";
import VideoGenFormViewBody from "../../Video/components/VideoGenFormViewBody.vue";
import SoundGenerateFormViewBody from "../../Sound/components/SoundGenerateFormViewBody.vue";
import TextTruncateView from "../../../components/TextTruncateView.vue";

const videoGenFlowCreate = ref<InstanceType<typeof VideoGenFlowCreate> | null>(null);

const {page, records, recordsForPage} = usePaginate<TaskRecord>();

const {mergeCheck, isIndeterminate, isAllChecked, onCheckAll, checkRecords} = useCheckAll({
    records: recordsForPage,
});

useTaskChangeRefresh("VideoGenFlow", () => {
    setTimeout(doRefresh, 1000);
});

const doRefresh = async () => {
    records.value = mergeCheck(await TaskService.list("VideoGenFlow"));
};

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

<template>
    <div class="p-5">
        <div class="app-header mb-4 flex items-center">
            <div class="flex-grow flex items-end">
                <div class="text-3xl font-bold">数字人一键合成</div>
                <div class="text-gray-400 ml-3">快速完成文本输入→音频合成→数字人合成</div>
            </div>
            <div class="flex items-center">
                <a-tooltip v-if="0" :content="'清空历史'" position="right" mini>
                    <a-button class="ml-1">
                        <template #icon>
                            <icon-delete/>
                        </template>
                    </a-button>
                </a-tooltip>
            </div>
        </div>
        <div>
            <VideoGenFlowCreate ref="videoGenFlowCreate" @submitted="doRefresh"/>
            <div v-if="records.length > 0">
                <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"
                            >
                                全选
                            </a-checkbox>
                        </div>
                        <TaskBatchDeleteAction :records="checkRecords" @update="doRefresh"/>
                        <TaskBatchDownloadAction :records="checkRecords"/>
                    </div>
                    <div>
                        <a-pagination
                            v-model:current="page"
                            :total="records.length"
                            :page-size="10"
                            show-total
                            simple
                        />
                    </div>
                </div>
                <div v-for="r in recordsForPage" :key="r.id">
                    <div class="rounded-xl shadow border p-4 mt-4 hover:shadow-lg">
                        <div class="flex items-center gap-1">
                            <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="">
                                    <TaskTitleField
                                        :record="r"
                                        @title-click="r['_check'] = !r['_check']"
                                        @update="v => (r.title = v)"
                                    />
                                </div>
                            </div>
                            <div class="flex-grow"></div>
                            <TaskDuration :start="r.startTime" :end="r.endTime"/>
                            <TaskBizStatus :status="r.status" :status-msg="r.statusMsg"/>
                        </div>
                        <div class="mt-3 flex gap-1">
                            <ServerNameVersion :record="r"/>
                            <VideoGenFormViewBody :data="r.modelConfig"/>
                        </div>
                        <div class="mt-3 flex gap-1" v-if="r.modelConfig.soundGenerate">
                            <SoundGenerateFormViewBody :data="r.modelConfig.soundGenerate"/>
                        </div>
                        <div class="pt-4 flex">
                            <div class="flex-grow">
                                <div class="bg-gray-100 rounded-lg p-2 mb-3">
                                    <TextTruncateView :text="r.modelConfig.text"/>
                                </div>
                                <div v-if="r.status === 'success' && r.result.urlSound">
                                    <AudioPlayer show-wave :url="'file://' + r.result.urlSound"/>
                                </div>
                            </div>
                            <div class="flex-shrink-0 ml-8">
                                <div
                                    class="p-2 rounded shadow bg-gray-300"
                                    v-if="r.status === 'success' && r.result.url"
                                >
                                    <div class="w-48 h-48" v-if="r.result.url">
                                        <VideoPlayer :url="'file://' + r.result.url"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pt-4 flex items-center">
                            <div class="text-gray-400 flex-grow">
                                <timeago :datetime="r['createdAt'] * 1000"/>
                            </div>
                            <div class="">
                                <TaskDownloadAction :record="r"/>
                                <TaskDeleteAction :record="r" @update="doRefresh"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <m-empty v-else/>
        </div>
    </div>
</template>
