<!--
 * @Title: 
 * @Description: 通知公告附件列表
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form"
            :permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot-scope="{ row, index }" slot="menu">
                <el-button type="text" size="small" icon="el-icon-document" @click="downloadAttachFile(row)">下载附件
                </el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getPage } from "@/api/notice/noticeattach.js";
import { mapGetters } from "vuex";

export default {
    props: {
        id: {
            type: [Number],
            required: true
        },
    },
    name: 'noticeattach',
    data() {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 80,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                addBtn: false,
                selection: true,
                dialogClickModal: false,
                printBtn: false,
                excelBtn: false,
                filterBtn: false,
                refreshBtn: true,
                columnBtn: false,
                column: [
                    {
                        label: "附件名称",
                        prop: "attachName",
                        span: 24,
                    },
                    {
                        label: "上传日期",
                        prop: "createTime",
                        type: "date",
                        format: "yyyy-MM-dd hh:mm:ss",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        sapn: 24,
                    },
                ]
            },
            data: []
        };
    },
    computed: {
        ...mapGetters(["permission"]),
        permissionList() {
            return {
                // addBtn: this.vaildData(this.permission.notice_add, false),
                // viewBtn: this.vaildData(this.permission.notice_view, false),
                // delBtn: this.vaildData(this.permission.notice_delete, false),
                // editBtn: this.vaildData(this.permission.notice_edit, false)
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        }
    },
    methods: {
        init() {
            this.onLoad();
        },
        getBlob(url) {
            return new Promise(resolve => {
                const xhr = new XMLHttpRequest();
                xhr.open("GET", url, true);
                xhr.responseType = "blob";
                xhr.crossOrigin = "*";
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        resolve(xhr.response);
                    }
                };
                xhr.send();
            })
        },
        saveAs(blob, filename) {
            const link = document.createElement('a');
            const body = document.querySelector("body");
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            link.style.display = "none";
            body.appendChild(link);
            link.click();
            body.removeChild(link);
            window.URL.revokeObjectURL(link.href);
        },
        downloadAttachFile(row) {
            this.getBlob(this.website.ossServer + row.attachUrl).then(res => {
                this.saveAs(res, row.attachName);
            });
            //  window.open(this.website.ossServer + row.attachUrl);
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            params['groupId'] = this.id;
            this.loading = true;
            getPage(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                this.loading = false;
                this.selectionClear();
            });

        }
    }
};
</script>

<style></style>
