<template>
    <div class="main">
        <el-upload
                class="upload-demo"
                action="/api/file/uploadList"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :show-file-list="false"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
        >
            <el-button size="small" type="primary">上传</el-button>
        </el-upload>
        <table border="2">
            <tr>
                <th class="xh">序号</th>
                <th class="mc">文件名称</th>
                <th class="lx">文件类型</th>
                <th class="cz">操作</th>
            </tr>
            <tr v-if="list.length==0">
                <td colspan="4" class="noData" >
                    <span>暂无数据</span>
                </td>
            </tr>
            <tr v-else v-for="(item,index) in list"  :key="index" >
                <td class="xh">{{index+1}}</td>
                <td class="mc">{{item.filename}}</td>
                <td class="lx">{{item.filepostfix}}</td>
                <td class="cz">
                    <span @click="downloadFile(item.fileurl)">下载</span>
                    <span>/</span>
                    <span @click="loadFile(item.fileurl)">预览</span>
                    <span>/</span>
                    <span @click="deleteFile(item.bsm)">删除</span>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import {insertFile, getFileLis, downloadFile,loadFile,deleteFile} from "./../../../api/common"
    import {Message} from "element-ui"

    export default {
        name: "fjcl",
        data() {
            return {
                list: [
                    {
                        filename: '调查文档1',
                        filepostfix: 'doc',
                        fileurl: ''
                    }
                ],
                filesData: {
                    dylx: "",
                    glbsm: "",
                    list: [
                        {
                            filename: "",
                            filepostfix: "",
                            fileurl: ""
                        }
                    ]
                },
            }
        },
        mounted() {
            this.getFileList()
        },
        methods: {
            deleteFile(bsm){
                this.$confirm('将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteFile(bsm).then(res=>{
                        if (res.success) {
                            this.getFileList();
                        }else {
                            this.$message.error("删除失败")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            loadFile(url){
                loadFile(url).then(res=>{
                    if (res.success) {
                        window.open(res.message)
                    }
                })
            },
            downloadFile(url) {
                window.open(`/api/file/download?url=`+url);
            },
            getFileList() {
                console.log(this.$route.name,'NAME')
                switch (this.$route.name) {
                    case "宗地":
                        this.filesData.dylx = 'zd';
                        this.filesData.glbsm = this.$store.state.zdbsm
                        break;
                    case "自然幢":
                        this.filesData.dylx = 'zrz';
                        this.filesData.glbsm = this.$store.state.zrzbsm
                        break
                    case "多幢":
                        this.filesData.dylx = 'dz';
                        this.filesData.glbsm = this.$store.state.dzbsm
                        break
                    case "户":
                        this.filesData.dylx = 'h';
                        this.filesData.glbsm = this.$store.state.hbsm
                        break;
                    default:
                        break
                }
                getFileLis(this.filesData.glbsm ).then(res => {
                    if (res.success) {
                        this.list = res.result;
                    } else {

                    }
                })
            },
            uploadError(err, file, fileList) {
                console.log("上传文件失败", err)
            },
            uploadSuccess(res, file, fileList) {
                this.filesData.list = res.result;
                insertFile(this.filesData).then(res => {
                    if (res.success) {
                        Message.success("上传成功")
                        this.getFileList(this.filesData.glbsm)
                    } else {
                        Message.error(res.message)
                    }
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                console.log(fileList)
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }
        },
        watch: {}
    }
</script>

<style scoped lang="less">
    .main {
        box-sizing: border-box;
        padding: 18px;
        height: auto;
        width: 100%;
    }

    table {
        margin-top: 10px;
        cursor: pointer;
        background-color: #fff;
        font-size: 14px;
        width: 100%;
        td, th {
            text-align: center;
            height: 36px;
            min-width: 50px;
        }
        td span {
            color: blue;
        }
        .cz span:hover {
            color: blue;
            text-decoration: underline;
        }
        .xh{
            width: 100px;
        }
        .mc{
            width: 300px;
        }
        .lx{
            width: 120px;
        }
        .cz{
            width: 150px;
        }
        .noData span{
            color: #BBB;
        }
    }


</style>