<template>
    <div class="container" style="overflow: auto;">
        <el-page-header style="margin: 10px;" @back="router.push('/manage');">
            <template #content>
                <span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
            </template>
            <template #extra>
                <el-dropdown trigger="click">
                    <el-button>
                        操作<v-icon size="20px">mdi-chevron-down</v-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="download"><v-icon
                                    size="20px">mdi-download</v-icon>下载</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </el-page-header>
        <div class="colbox" id="main">
            <div style="flex-grow: 1;" class="card">
                <el-table :data="table" style="height:calc(100% - 10px);overflow: auto;border-radius: 10px;">
                    <el-table-column type="index" />
                    <el-table-column prop="word" label="单词" />
                    <el-table-column prop="type" label="词性" />
                    <el-table-column prop="trans" label="翻译" />
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import { ElMessage } from 'element-plus';
import axios from 'axios';

interface WordEntry {
    word: string;
    type: string;
    trans: string;
}

const table = ref<WordEntry[]>([]);
const set = ref('');
const book = ref('');
const id = ref('');
const name = ref('default');

const route = useRoute();
const router = useRouter();
const store = useMainStore();

const download = () => {
    store.wordsets.fromArray(table.value, book.value, name.value);
    ElMessage("下载完毕");
};

const goBack = () => {
    router.push('/manage');
};

onMounted(() => {
    set.value = route.query.set as string;
    book.value = route.query.book as string;
    id.value = route.query.id as string;
    name.value = (route.query.name as string) || "default";

    if (set.value && book.value && id.value) {
        axios.get("wordset/detail", {
            params: {
                set: set.value,
                book: book.value,
                id: id.value
            }
        }).then(res => {
            table.value = res.data;
        });
    }
});
</script>

<style scoped>
@media screen and (max-width: 500px) {
    #main {
        flex-direction: column;
        overflow: scroll;
    }

    .container {
        padding: 10px;
        height: calc(100% - 20px);
    }

    .title {
        font-size: 25px;
        min-height: 50px;
    }
}

@media screen and (min-width: 500px) {
    .title {
        font-size: 35px;
        min-height: 60px;
    }
}

.container {
    padding: 10px;
    padding-top: 0;
}

#main {
    height: calc(100% - 50px);
}

.el-table {
    --el-table-bg-color: #FFFFFF00;
    --el-table-tr-bg-color: #FFFFFF00;
}
</style>