<template>
    <div class="file">
        <Card :bordered="false" dis-hover>
            <bingo-list
                :columns="columns"
                :pageSetting="pageSetting"
                :page="true"
                :showBtnType="'all'"
                :showBtnOutNum="2"
                :toolbarNew="true"
                ref="bingoList"
                :searchList="searchList"
                :queryData="queryData"
                :isSearch="true"
                :isSearchAdvance="true"
                :showSwitchBtn="false"
                :showNewBtn="false"
                :isCustomData="true"
                :dataApi="Api"
                :data="fileList"
                :processData="processData"
                @on-query-submit="querySubmit"
                @on-edit-btn="onEditBtn"
                @get-data="getData"
            >
                <template slot="toolbarNew">
                    <Upload
                    class="file-upload"
                    :action="uploadUrl"
                    :headers="fileHeaders"
                    :show-upload-list="false"
                    :on-success="handleSuccess"
                    >
                        <Button icon="ios-cloud-upload-outline">上传</Button>
                    </Upload>
                    <Upload
                    class="file-upload"
                    :action="batchUploadUrl"
                    :headers="fileHeaders"
                    multiple
                    :show-upload-list="false"
                    :on-success="handleSuccessBatch"
                    >
                        <Button icon="ios-cloud-upload-outline">批量上传</Button>
                    </Upload>
                </template>
                <template slot="action" slot-scope="{ row, index }">
                    <Button
                        class="btn-more"
                        size="small"
                        @click="download(row)"
                    >
                    <i class="icon iconfont iconxiazai1"></i>
                    <span class="font">下载</span></Button
                    >
                </template>
                <template slot="tableFun">
                    <span class="f-line"></span>
                    <span class="f-sel f-auth" @click="onDownloadBtnAll"
                        ><i class="f-ico icon iconfont iconxiazai1"></i>批量下载</span
                    >
                </template>
                <!-- 高级搜索 -->
                <template slot="queryForm">
                    <bingo-grid-item>
                        <bingo-form-item label="文件名称">
                            <Input
                                v-model="queryData.fileName"
                                placeholder="请输入文件名称"
                            />
                        </bingo-form-item>
                    </bingo-grid-item>
                </template>
            </bingo-list>
        </Card>
        <Modal v-model="isShowNewForm" title="修改" @on-ok="onOk" :width="900">
            <Form ref="formAdd" :model="formAdd" label-position="right" :label-width="80">
                <Row>
                    <Col :span="12">
                        <FormItem label="文件名称">
                            <Input type="text" v-model="formAdd.fileName" placeholder="请输入文件名称">
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import bingoList from '@/components/bingo-list';
    import Api from '@/api/platform/file';
    import module from '@/mixins/module';
    import setting from '@/setting';
    import util from '@/utils/tool'
    export default {
        name:'plat-file',
        data () {
            return {
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '文件名称',
                        key: 'name'
                    },
                    {
                        title: '类型',
                        key: 'type'
                    },
                    {
                        title: '大小',
                        key: 'size'
                    },
                    {
                        title: '创建人',
                        key: 'creator'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '修改人',
                        key: 'modifier'
                    },
                    {
                        title: '修改时间',
                        key: 'modifyTime'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        width: 200
                    }
                ],
                Api: Api,
                pageSetting: {
                    pageNum: 1,
                    pageSize: 20,
                    showSizer: true
                },
                // 搜索的字段
                searchList: [
                    {
                        label: '文件名称',
                        value: 'name',
                        type: 'input'
                    }
                ],
                tableData: [],
                queryData: {
                    name: ''
                },
                queryObj: {},
                isShowNewForm: false,
                formAdd: {
                    name: ''
                },
                grid: {
                    xl: 12,
                    lg: 13,
                    md: 13,
                    sm: 24,
                    xs: 24
                },
                uploadUrl: setting.apiBaseURL + Api.uploadUrl,
                batchUploadUrl: setting.apiBaseURL + Api.batchUploadUrl,
                fileList: [],
                fileHeaders: {}
            };
        },
        created () {
            this.fileHeaders = this.getHeaders();
            this.getData();
        },
        mixins: [module],
        methods: {
            // 弹出层查询
            querySubmit (obj) {
                if (obj) {
                    this.queryObj = obj;
                }
                this.$refs.bingoList.getTableData(this.queryObj);
            },
            // 修改确定
            onOk () {
                Api.editTable(this.formAdd).then(res => {
                    this.$Message.success('修改成功');
                    this.$refs.bingoList.getTableData();
                })
            },
            // 编辑
            onEditBtn (id) {
                Api.getTableById(id).then(res => {
                    this.formAdd = res;
                    this.isShowNewForm = true;
                })
            },
            // 下载
            download () {},
            // 列表
            getData (searchObj) {
                let data = {};
                data = Object.assign(data, searchObj);
                Api.tableList(data).then(res => {
                    this.fileList = res;
                    this.$refs.bingoList.handleMatch();
                })
            },
            // 上传成功
            handleSuccess (res, file) {
                file.size = this.formatSize(file.size);
                this.fileList.push(file);
                this.$refs.bingoList.handleMatch();
            },
            // 批量上传成功
            handleSuccessBatch (res, file) {
                file.size = this.formatSize(file.size);
                this.fileList.push(file);
                this.$refs.bingoList.handleMatch();
            },
            // 文件大小
            formatSize (size) {
                let fileSize = ''
                if (size < 1024 * 1000) {
                    fileSize = `${(size / 1024).toFixed(2)}KB`
                } else {
                    fileSize = `${(size / 1024 / 1000).toFixed(2)}MB`
                }
                return fileSize
            },
            // 处理数据
            processData (data) {
                data.forEach(item => {
                    if (item.createTime) {
                        item.createTime = util.format(new Date(item.createTime), 'yyyy-MM-dd');
                    }
                    if (item.modifyTime) {
                        item.modifyTime = util.format(new Date(item.modifyTime), 'yyyy-MM-dd')
                    }
                });
            },
            onDownloadBtnAll () {}
        },
        components: { bingoList }
    };
</script>
