<template>
    <div>
        <el-card class="el-card">
            <el-form :inline="true">
                <el-form-item>
            <span style="color: #000; margin-left: 10px; margin-right: 6px"
            >日期:</span
            >
                    <el-date-picker
                        :picker-options="pickerOptions"
                        v-model="dateRange"
                        type="daterange"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button-group>
                        <el-button type="primary" icon="search" @click="download()"
                        >手动下载
                        </el-button
                        >
                        <el-button @click="getList">刷新</el-button>
                    </el-button-group>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="tableData" border stripe>
                <el-table-column label="文件名" align="center" prop="fileName"
                                 width="200">
                </el-table-column>
                <el-table-column label="下载类型" prop="downloadType" :show-overflow-tooltip="true" width="80">
                    <template slot-scope="scope">
                        <span>{{ getDownloadType(scope.row.downloadType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="行数" align="center" prop="count" :show-overflow-tooltip="true"/>
                <el-table-column label="文件大小" align="center" prop="fileSize" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{ getFileSize(scope.row.fileSize) }}
                    </template>
                </el-table-column>
                <el-table-column label="起始日期" align="center" prop="startDate" :show-overflow-tooltip="true"/>
                <el-table-column label="结束日期" align="center" prop="endDate" :show-overflow-tooltip="true"/>
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="downloadFile(scope.row)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.page"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="queryParams.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {getFileList, exportToFile, getFile} from "@/api/UDIDownload/fileInfo";

export default {
    name: "fileInfo",
    data() {
        return {
            tableData: [],
            loading: false,
            total: 0,
            dateRange: [],
            queryParams: {
                page: 1,
                limit: 15
            },
            downloadTypeOptions: [{value: "", label: "全部"}, {value: "auto", label: "自动"}, {
                value: "manual",
                label: "手动"
            }],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getList();
            this.page++;
        },
        getList() {
            this.loading = true;
            getFileList(this.queryParams).then(res => {
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        /**
         * 重新下载文件
         */
        download() {
            if (this.dateRange == null || this.dateRange == "") {
                this.$message.error("请选择日期");
                return;
            }
            exportToFile(this.addDateRange({}, this.dateRange));
            this.$message.info("已发送下载指令，请稍等查看日志,防止同时下载！");
        },
        downloadFile(row) {
            let param = {
                fileName: row.fileName
            };
            getFile(param).then((res) => {
                this.$message.success("开始下载");
                this.download(res, row.fileName);
            }).catch((error) => {
                this.$message.error("下载失败");
            })
        },
        //处理下载流
        download(content, fileName) {
            const blob = new Blob([content]) //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
            const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
            let dom = document.createElement('a')//设置一个隐藏的a标签，href为输出流，设置download
            dom.style.display = 'none'
            dom.href = url
            dom.setAttribute('download', fileName)//指示浏览器下载url,而不是导航到它；因此将提示用户将其保存为本地文件
            document.body.appendChild(dom)
            dom.click()
        },
        getDownloadType(type) {
            return this.selectDictLabel(this.downloadTypeOptions, type);
        },
        getFileSize(size) {
            let res = "";
            if (size > 0) {
                if (size > 1000 * 1000)
                    res = (size / (1000 * 1000)).toFixed(2) + "M";
                else if (size > 1000)
                    res = (size / 1000).toFixed(2) + "k";
                else
                    res = size + "byte";
            }
            return res;
        }
    }
}
</script>

<style scoped>
a {
    text-decoration: none;
    color: #3683be;
}
</style>
