<template>
    <div class="container">
        <header class="mb-20">
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="文件名">
                            <el-input
                                placeholder="文件名"
                                v-model="query.fileName"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flex between">
                <el-button type="primary" @click="handleShowAdd">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    上传知识</el-button
                >
                <div>
                    <el-button type="primary" @click="getList">
                        <template #icon>
                            <icon name="el-icon-Search" />
                        </template>
                        查询</el-button
                    >
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <div class="table-container">
            <el-table :data="users">
                <el-table-column label="文件名" prop="fileName" />
                <el-table-column label="文件路径" prop="filePath" />
                <el-table-column
                    label="创建时间"
                    prop="createTime"
                    width="200"
                />
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button
                            type="primary"
                            link
                            @click="download(row.filePath)"
                            v-perms="['user:edit']"
                            >下载文件</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :page-sizes="[10, 20, 50]"
                v-model:page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>

    <el-dialog
        title="上传知识"
        v-model="show"
    >
        <el-upload
            drag
            :action="`${BASE_PATH}/book`"
            :headers="{ Authorization: getToken() }"
            multiple
            v-model:file-list="fileList"
            @success="handleSuccess"
            accept="application/pdf,text/plain,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            class="mt-20"
        >
            <el-icon class="el-icon--upload"
                    ><upload-filled
                /></el-icon>
                <div class="el-upload__text">
                    <p>点击或拖拽文件到此区域上传</p>
                </div>
        </el-upload>
        <footer class="flex end mt-20">
            <el-button @click="show = false" size="large">取消</el-button>
            <el-button type="primary" size="large">确定</el-button>
        </footer>
    </el-dialog>

</template>
<script setup>
import { getToken } from "@/utils/token";
import { BASE_PATH } from "@/api/request";
import { listBook } from "@/api/mobileSupervision/book";
import feedback from "@/utils/feedback";

const users = ref([]);
const query = ref({
    current: 1,
    size: 10,
});
const total = ref(0);
function getList() {
    listBook(query.value).then((data) => {
        users.value = data.records;
        total.value = data.total;
    });
}

function reset() {
    query.value = {
        current: 1,
        size: 10,
    };
    getList();
}

getList();

const show = ref(false);

function handleShowAdd() {
    show.value = true;
}

const fileList = ref([])

function handleSuccess() {
    getList()
}

function download(filePath) {
    window.open(`${BASE_PATH}/file/stream/${filePath}`);
}
</script>
<style lang="scss" scoped>
</style>