<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 @click="loadFile(item.fileurl)">预览</span>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import {insertFile, getFileLis, downloadFile,loadFile} 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() {
            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
                default:
                    break
            }
            this.getFileList(this.filesData.glbsm)
        },
        methods: {
            loadFile(url){
                loadFile(url).then(res=>{
                    if (res.success) {
                        window.open(res.message)
                    }
                })
            },
            downloadFile(url) {
                window.open(`/api/file/download?url=`+url);
            },
            getFileList(bsm) {
                getFileLis(bsm).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: 80%;
    }

    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>