<script setup lang="ts">
import {ref} from "vue";
import {ServerCloudRecord} from "../../store/modules/serverCloud";

const visible = ref(false);

const record = ref<ServerCloudRecord | null>(null);

const show = (r: ServerCloudRecord) => {
    record.value = r;
    visible.value = true;
};

defineExpose({
    show,
});
</script>

<template>
    <a-modal
        v-model:visible="visible"
        width="70vw"
        :footer="false"
        :esc-to-close="false"
        :mask-closable="false"
        title-align="start"
    >
        <template #title>
            {{ record?.title }}
        </template>
        <div style="height: calc(100vh - 15rem)">
            <div>
                <div v-for="d in record?.demo">
                    <div class="shadow rounded-lg p-3">
                        <!-- audio 类型 -->
                        <div v-if="d.type === 'audio'" class="p-3 bg-gray-200 rounded-lg mb-3">
                            <audio controls preload="none" style="width: 100%; max-height: 70vh">
                                <source :src="d.url1" type="audio/mpeg" />
                            </audio>
                            <div class="font-bold">{{ d.title1 }}</div>
                        </div>

                        <!-- audio2 类型 -->
                        <div v-else-if="d.type === 'audio2'" class="flex gap-3">
                            <div style="width: 50%" class="flex-shrink-0">
                                <div class="p-3 bg-gray-200 rounded-lg mb-3">
                                    <audio controls preload="none" style="width: 100%; max-height: 70vh">
                                        <source :src="d.url1" type="audio/mpeg" />
                                    </audio>
                                </div>
                                <div class="font-bold">{{ d.title1 }}</div>
                            </div>
                            <div class="flex-grow">
                                <div class="p-3 bg-gray-200 rounded-lg mb-3">
                                    <audio controls preload="none" style="width: 100%; max-height: 70vh">
                                        <source :src="d.url2" type="audio/mpeg" />
                                    </audio>
                                </div>
                                <div class="font-bold">{{ d.title2 }}</div>
                            </div>
                        </div>

                        <!-- video 类型 -->
                        <div v-else-if="d.type === 'video'" class="p-3 bg-gray-200 rounded-lg mb-3">
                            <video controls preload="none" style="width: 100%; max-height: 70vh">
                                <source :src="d.url1" type="video/mp4" />
                            </video>
                            <div class="font-bold">{{ d.title1 }}</div>
                        </div>

                        <!-- video2 类型 -->
                        <div v-else-if="d.type === 'video2'" class="flex gap-3">
                            <div style="width: 50%" class="flex-shrink-0">
                                <div class="p-3 bg-gray-200 rounded-lg mb-3">
                                    <video controls preload="none" style="width: 100%; max-height: 70vh">
                                        <source :src="d.url1" type="video/mp4" />
                                    </video>
                                </div>
                                <div class="font-bold">{{ d.title1 }}</div>
                            </div>
                            <div class="flex-grow">
                                <div class="p-3 bg-gray-200 rounded-lg mb-3">
                                    <video controls preload="none" style="width: 100%; max-height: 70vh">
                                        <source :src="d.url2" type="video/mp4" />
                                    </video>
                                </div>
                                <div class="font-bold">{{ d.title2 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a-modal>
</template>
