<template>
    <div id="flfg_flfg">
        <div class="search">
            <el-select v-model="valueSelectFile_type">
                <el-option label="置顶" value="1"></el-option>
                <el-option label="上传时间" value="2"></el-option>
            </el-select>
            <el-select v-model="valueSelect" placeholder="请选择" clearable>
                <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                    <el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-option-group>
            </el-select>
            <el-input v-model="input"></el-input>
            <div class="button-transform" @click="transferModel()" v-show="multipleSelection.length > 0">转移模块</div>
            <div class="button-delete" @click="deleteAll()" v-show="multipleSelection.length > 0">批量删除</div>
            <div class="button-upload" @click="dialogVisibleModule = true">修改模块名称</div>
            <div class="button-upload" @click="uploadData()">批量上传</div>
            <div class="button-search" @click="search()">站内搜索</div>
        </div>
        <div class="searchResult">
            <el-table ref="multipleTable" :data="literatureList" tooltip-effect="dark" style="width: 100%;"
                height="calc(100% - 60px)" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="类别" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            :style="{ backgroundColor: returnColor(scope.row.folder), borderColor: returnColor(scope.row.folder) }"
                            effect="dark">{{ returnName(scope.row.folder) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="文件名" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span><span style="font-size:12px;color:red;">{{ scope.row.stick != null ? '[置顶]' : '' }}</span>{{
                            scope.row.originName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="日期" align="center"></el-table-column>
                <el-table-column prop="image" label="是否有图片" align="center" :formatter="fileData">
                </el-table-column>
                <el-table-column label="操作" align="center" width="500">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="viewLiterature(scope.row)">预览</el-button>
                        <!-- <el-button size="mini" type="success" @click="editFile(scope.row)">编辑</el-button> -->
                        <el-button size="mini" type="success" @click="upLoadImg(scope.row)">上传图片</el-button>
                        <el-button size="mini" type="danger" @click="deleteLiterature(scope.row)">删除</el-button>
                        <el-button size="mini" type="danger" @click="deleteLiteratureImg(scope.row)"
                            :disabled="scope.row.image == null || scope.row.image == '' ? true : false">删除图片</el-button>
                        <el-button size="mini" type="success" @click="top(scope.row)">{{ scope.row.stick == null ? '置顶' :
                            '取消置顶' }}</el-button>
                        <el-button size="mini" type="primary" @click="downloadLiterature(scope.row)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-div">
                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper"
                    :current-page="currentPage" @current-change="handleCurrentChange" @size-change="handleSizeChange"
                    :page-size="everySize" :total="total" :page-sizes="[10, 20, 50, 100]">
                </el-pagination>
            </div>
        </div>

        <!-- 批量上传文件 -->
        <el-dialog title="批量上传文件" :visible.sync="dialogVisible" width="25%" :before-close="handleClose" center>
            <el-form ref="form" label-width="120px">
                <el-form-item label="文件板块">
                    <el-select v-model="value" placeholder="请选择" clearable>
                        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="选取文件">
                    <el-upload class="upload-demo" action=""
                        accept=".docx,.doc,.pdf,.DOCX,.DOC,.PDF,.PPT,.ppt,.pptx,.PPTX,.mlf,.MLF,.xls,.xlsx,.XLS,.XLSX"
                        :on-remove="handleRemove" :on-change="handleChange" :file-list="fileList" :auto-upload="false"
                        multiple>
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">支持导入doc,ppt,xls,mlf,pdf</div>
                    </el-upload>
                </el-form-item>

                <el-form-item label="上传图片" v-if="fileList.length == 1">
                    <el-upload class="upload-demo" accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG" action=""
                        :on-change="handleChangeImgSingle" :file-list="imgList" :auto-upload="false" :limit="1"
                        :on-exceed="handleExceed">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能选择一张图片！</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="defineUpload">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改文献所在板块 -->
        <el-dialog title="修改文献所在板块" :visible.sync="dialogVisibleFolder" width="35%" :before-close="handleClose" center>
            <el-form ref="form" label-width="120px">
                <el-form-item label="转移到">
                    <el-radio-group v-model="radio">
                        <el-radio v-for="(item, index) in transferRadios" :label="item.id" border :key="index">{{ item.name
                        }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item align="center">
                    <el-button size="mini" @click="dialogVisibleFolder = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="defineUploadFolder">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 给法律法规增加图片 -->
        <el-dialog title="新增图片" :visible.sync="dialogVisibleImg" width="25%" :before-close="handleClose" center>
            <el-form ref="form" label-width="120px">
                <el-form-item label="上传图片">
                    <el-upload class="upload-demo" action="" accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                        :on-change="handleChangeImg" :file-list="fileListImg" :auto-upload="false" :limit="1"
                        :on-exceed="handleExceed">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能选择一张图片</div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="dialogVisibleImg = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="defineUploadImg">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改模块名称 -->
        <el-dialog class="changeModuleName" title="修改模块名称" :visible.sync="dialogVisibleModule" width="40%"
            :before-close="handleClose" center>
            <el-form ref="form">
                <el-form-item v-for="(item, index) in moduleName" :key="index">
                    <h3>{{ item.label }}</h3>
                    <el-input v-for="(item1, index1) in item.options" v-model="item1.name" :key="index1"></el-input>
                </el-form-item>
                <el-form-item align="center">
                    <el-button size="mini" @click="dialogVisibleModule = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="defineUpdateModuleName">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { get, fileUpload, startLoading, endLoading, download, delete_util, post } from '../../util/http_util';
import {
    queryLiterature, uploadLiterature, removeLiterature, addPictureToLiterature, bulkStickLiterature, removeLiteratureByBatch, bulkChangeLiteratureFolder,
    updateLiteratureFolder, queryLiteratureFolder, previewPdf,downloadFile
} from "../../api/xxxl/llxx"
export default {
    name: 'flfggl',
    inject: ['reload'],
    data() {
        return {
            input: '',
            options: [],
            value: '',
            valueSelect: '',
            imgList: [],
            fileList: [],
            fileListImg: [],
            currentPage: 1,
            total: 0,
            dialogVisible: false,
            dialogVisibleFolder: false,
            dialogVisibleImg: false,
            literatureList: [],
            multipleSelection: [],
            radio: '',
            transferRadios: [],
            colorList: ['#409eff', '#F56C6C', '#67C23A', '#E6A23C', '#909399', '#303133'],
            everySize: 10,
            selectFile: {},
            moduleList: [],
            moduleName: [],
            dialogVisibleModule: false,
            valueSelectFile_type: '1',
        }
    },
    methods: {
        search() {
            this.queryLiterature(1, this.everySize, this.input, this.valueSelect);
        },
        uploadData() {
            this.dialogVisible = true;
            this.fileList = [];
            this.imgList = [];
        },
        //查询上传的文件
        queryLiterature(pageNum, pageSize, title, type) {
            let titleUrl = title == '' ? null : title;
            let typeUrl = type == '' ? null : type;;
            let type_stick = this.valueSelectFile_type == "1";
            queryLiterature('法律法规', pageNum, pageSize, titleUrl, typeUrl, type_stick).then(res => {
                this.literatureList = res.list;
                this.total = res.totals;
                this.currentPage = pageNum;
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        handleSizeChange(val) {
            this.everySize = val;
            this.currentPage = 1;
            this.queryLiterature(1, val, this.input, this.valueSelect);
        },
        defineUpload() {
            if (this.value != "" && this.fileList.length > 0) {
                for (let i = 0; i < this.fileList.length; i++) {
                    let fd = new FormData();
                    fd.append("file", this.fileList[i].raw);
                    fd.append("folder", this.value);
                    fd.append("module", '法律法规');
                    this.imgList.length == 1 && fd.append('image', this.imgList[0].raw);
                    uploadLiterature(fd).then(res => {
                        if (res == 1) {
                            this.$message.success('上传成功！');
                            this.valueSelectFile_type = '2';
                            this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                        }
                    }).catch(err => {
                        this.$message.warning(err.message);
                        // if (err instanceof Object) {
                        //     this.$message({
                        //         type: 'info',
                        //         message: err.message
                        //     });
                        // } else {
                        //     this.$message({
                        //         type: 'info',
                        //         message: '删除失败'
                        //     });
                        // }
                    });
                }
                this.dialogVisible = false;
            } else {
                this.$message.warning('未选择上传模块或未选择文件！');
            }
        },
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.queryLiterature(pageNum, this.everySize, this.input, this.valueSelect);
        },
        handleClose(done) {
            done();
        },
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-20);
        },
        //以pdf形式预览
        viewLiterature(item) {
            // window.open('api/rest/document/viewLiterature/' + item.folder + '/' + item.name);
            previewPdf('LiteraturePDF', item.name);
        },
        //修改文件
        editFile(item) {
            this.$router.push({ name: "文档" + this.$route.meta.type_name, params: { folder: item.folder, name: item.name, originName: item.originName } });
            // download('api/rest/document/downloadLiterature/' + item.folder + '/' + item.name, item.originName);
        },
        //删除文件
        deleteLiterature(item) {
            this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(res => {
                    return removeLiterature(item.folder, item.name);
                })
                .then(res => {
                    if (res == 1) {
                        this.$message.success('删除成功！');
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    } else {
                        throw "删除失败";
                    }
                })
                .catch(err => {
                    this.$message.warning(err.message);
                });
        },
        //删除文件图片
        deleteLiteratureImg(item) {
            this.$confirm('此操作将永久删除图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                startLoading();
                let fd = new FormData();
                fd.append('name', item.name);
                fd.append('folder', item.folder);
                addPictureToLiterature(fd).then(res => {
                    if (res == 1) {
                        this.$message.success('图片删除成功！');
                        this.dialogVisibleImg = false;
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    } else {
                        this.$message.error('图片删除失败！');
                    }
                    endLoading();
                }).catch(err => {
                    this.$message.warning(err.message);
                    endLoading();
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //返回中文名
        returnName(type) {
            return this.moduleList.filter(item => item.id == type)[0] && this.moduleList.filter(item => item.id == type)[0].name;
        },
        handleSelectionChange(val) {
            let list = [];
            for (let i = 0; i < val.length; i++) {
                let obj = {};
                obj.bucket = val[i].folder;
                obj.name = val[i].name;
                list.push(obj);
            }
            this.multipleSelection = list;
        },
        //批量删除
        deleteAll() {
            this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeLiteratureByBatch(this.multipleSelection).then(res => {
                    if (res == this.multipleSelection.length) {
                        this.$message.success('删除成功！');
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        transferModel() {
            if (this.multipleSelection.length > 0) {
                this.dialogVisibleFolder = true;
            } else {
                this.$message.warning('未选中任何文献！');
            }
        },
        //修改文献所在板块
        defineUploadFolder() {
            if (this.radio != '') {
                let list = [];
                this.multipleSelection.forEach(res => {
                    let obj = {};
                    obj.name = res.name;
                    obj.newFolder = this.radio;
                    obj.oldFolder = res.bucket;
                    list.push(obj);
                })
                bulkChangeLiteratureFolder(list).then(res => {
                    if (res == list.length) {
                        this.$message.success('转移成功！');
                        this.dialogVisibleFolder = false;
                        this.queryLiterature(this.currentPage, this.everySize, this.input, this.valueSelect);
                    } else {
                        this.$message.error('转移失败！');
                    }
                }).catch(err => {
                    this.$message.warning(err.message);
                });
            } else {
                this.$message.warning('未选择要转移的板块！');
            }
        },
        //返回颜色
        returnColor(val) {
            if (val == "1" || val == "2" || val == "3" || val == "4" || val == "5" || val == "6" || val == "7" || val == "8" || val == "9") {
                return this.colorList[0];
            } else if (val == "10" || val == "11" || val == "12") {
                return this.colorList[1];
            } else if (val == "13" || val == "14" || val == "15") {
                return this.colorList[2];
            } else {
                return this.colorList[3];
            }
        },
        //批量上传文献时  只选择单个文件时 上传图片
        handleChangeImgSingle(file, imgList) {
            this.imgList = imgList.splice(-1);
        },
        //给文献增加图片
        handleChangeImg(file, fileListImg) {
            this.fileListImg = fileListImg.slice(-5);
        },
        //上传图片
        upLoadImg(item) {
            this.fileListImg = [];
            this.dialogVisibleImg = true;
            this.selectFile = item;

        },
        defineUploadImg() {
            if (this.fileListImg.length > 0) {
                startLoading();
                let fd = new FormData();
                fd.append('name', this.selectFile.name);
                fd.append('folder', this.selectFile.folder);
                fd.append('file', this.fileListImg[0].raw);
                addPictureToLiterature(fd).then(res => {
                    if (res == 1) {
                        this.$message.success('新增图片成功！');
                        this.dialogVisibleImg = false;
                        this.search();
                    } else {
                        this.$message.error('图片新增失败！');
                    }
                    endLoading();
                }).catch(err => {
                    this.$message.warning(err.message);
                    endLoading();
                });
            } else {
                this.$message.warning('未选择图片！');
            }
        },
        fileData(row) {
            if (row.image != null && row.image != '') {
                return '有';
            } else {
                return '无';
            }
        },
        handleExceed(files, fileListImg) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件`);
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
        },
        //置顶
        top(row) {
            let obj = {};
            obj.id = row.id;
            obj.stick = row.stick == null ? 1 : 0;
            let message = obj.stick == 1 ? '置顶' : '取消置顶';
            bulkStickLiterature([obj]).then(res => {
                if (res == 1) {
                    this.search();
                    this.$message.success(message + '成功！');
                } else {
                    this.$message.error(message + '失败！');
                }
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        //确定修改模块名称
        defineUpdateModuleName() {
            let tmpList = [];
            this.moduleName.forEach(el => {
                el.options.forEach(item => {
                    let obj = {};
                    obj.id = item.id;
                    obj.name = item.name;
                    tmpList.push(obj);
                })
            });;
            updateLiteratureFolder(tmpList).then(res => {
                if (res == tmpList.length) {
                    this.$message.success('模块名称修改成功！');
                    this.dialogVisibleModule = false;
                    this.reload();
                } else {
                    this.$message.error('模块名称修改失败！');
                }
            }).catch(err => {
                this.$message.warning(err.message);
                console.log(err);
            });
        },
        //下载文件
        downloadLiterature(row){
            downloadFile('Literature',row.name);
        }
    },
    activated() {
        //查询板块名称
        queryLiteratureFolder('法律法规').then(res => {
            this.moduleList = res;
            this.transferRadios = res;
            let arrListModule = [
                {
                    label: '国际法',
                    options: []
                },
                {
                    label: '对内内部法规',
                    options: []
                },
                {
                    label: '我国内军内法规',
                    options: []
                }
            ];
            arrListModule[0].options = res.filter(item => item.remark == '国际法');
            arrListModule[1].options = res.filter(item => item.remark == '对内内部法规');
            arrListModule[2].options = res.filter(item => item.remark == '我国内军内法规');
            this.options = arrListModule;
            this.moduleName = JSON.parse(JSON.stringify(arrListModule));
        })
            .then((res) => {
                this.queryLiterature(1, this.everySize, null, null);
            }).catch(err => {
                this.$message.warning(err.message);
            });
    }
}
</script>

<style lang="scss">
#flfg_flfg {
    width: 99%;
    height: 96%;
    padding: 40px;
    box-sizing: border-box;
    overflow-y: auto;

    .search {
        width: 100%;
        height: 50px;
        text-align: right;

        .el-input {
            width: 200px;
            margin-right: 15px;

            input {
                height: 30px;
                color: white;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-input__icon {
                line-height: 30px;
            }
        }

        .button-search {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-upload {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-delete {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .button-transform {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-right: 10px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    .searchResult {
        width: 100%;
        height: calc(100% - 50px);
        overflow-y: auto;

        .el-table tr {
            background-color: transparent !important;
            color: #ffffffc7;
        }

        .el-table thead tr {
            height: 40px;
            background: url(../../assets/img/setting/tr1.png) no-repeat;
            background-size: 100% 100%;
        }

        .el-table th {
            background-color: transparent;
        }

        tbody tr {
            border-bottom: 1px solid #252631;
        }

        .el-table td {
            border-bottom: 1px solid #252631;
            border-right: unset;
        }

        .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: #82848a78;
        }

        .el-table th {
            border: unset;
            // background-color: #263b5d !important;
        }

        .el-table--fit {
            background: none !important;
            border: unset;
        }

        .el-icon-delete-solid {
            color: red;
            cursor: pointer;
            font-size: 18px;
        }

        .el-icon-edit {
            color: #1172d8;
            cursor: pointer;
            font-size: 20px;
        }

        .el-icon-view {
            color: #00ffff;
            font-size: 20px;
            cursor: pointer;
        }

        .el-table--group::after,
        .el-table--border::after,
        .el-table::before {
            background-color: unset;
        }

        .pagination-div {
            width: 100%;
            height: 50px;

            .el-pagination {
                margin-top: 9px;
                text-align: right;

                .el-pagination__total {
                    color: white;
                }

                .el-pagination__jump {
                    color: white;
                }
            }

            .myPagination.is-background .el-pager li:not(.disabled).active {
                color: #fff;
                border: 1px solid #146a80;
                box-shadow: 0 0 10px #1b6097;
                background-color: #1d2d46;
            }
        }
    }

    .el-dialog {
        color: white;
        background: #1d2d46 !important;

        .el-dialog__header {
            .el-dialog__title {
                color: white;
            }
        }

        .el-dialog__body {
            .el-form {
                .el-form-item {
                    .el-form-item__label {
                        color: white;
                    }

                    .el-form-item__content {
                        color: white;

                        .el-upload__tip {
                            color: white;
                        }

                        .el-upload-list__item {
                            &:hover {
                                background: #628ed4;
                            }

                            .el-upload-list__item-name {
                                color: white;
                            }

                            .el-upload-list__item-name [class^='el-icon'] {
                                color: white;
                            }
                        }
                    }

                    .el-radio-group {
                        .el-radio {
                            margin-top: 10px;
                            color: white;
                        }

                        .el-radio.is-bordered+.el-radio.is-bordered {
                            margin-left: 0px;
                        }
                    }
                }
            }

            .el-input__inner {
                color: white !important;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }

            .el-icon-document {
                height: auto;
            }
        }
    }

    .changeModuleName {
        .el-input {
            width: calc(100%/3 - 10px);
            margin-top: 5px;
            margin-left: 10px;
        }
    }
}
</style>