<template>
    <div class="main">
        <el-upload
                class="upload-demo"
                action="/api/file/uploadList"
                :data="fileData"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :show-file-list="false"
                multiple
                :on-exceed="handleExceed"
                :disabled="isDisabled"
        >
            <el-button size="small" type="primary" :disabled="isDisabled" icon="iconfont iconshangchuan">上传</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.bsm)">预览</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 {queryStatus} from "@api/search"

    export default {
        name: "fjcl",
        data() {
            return {
                fileData: {
                    glbsm: '',
                    dylx: ''
                },
                list: []
            }
        },
        mounted() {
            this.getFileList()
        },
        created(){

        },
        props: {
            isDisabled:{
                type:Boolean,
                default:false
            }
        },
        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(bsm) {
                loadFile(bsm).then(res => {
                    if (res.success) {
                        window.open(res.message)
                    }
                })
            },
            downloadFile(url) {
                // window.open(`/api/file/download?url=` + url);
                let downloadUrl= `/api/file/download?url=${url}`
                let elemIF = document.createElement("iframe");
                elemIF.src = downloadUrl;
                elemIF.style.display = "none";
                document.body.appendChild(elemIF)
            },
            getFileList() {
                switch (this.$route.name) {
                    case "宗地":
                        this.fileData.dylx = 'zd';
                        this.fileData.glbsm = this.$store.state.zdbsm;
                        break;
                    case "自然幢":
                        this.fileData.dylx = 'zrz';
                        this.fileData.glbsm = this.$store.state.zrzbsm;
                        break;
                    case "多幢":
                        this.fileData.dylx = 'dz';
                        this.fileData.glbsm = this.$store.state.dzbsm;
                        break;
                    case "户":
                        this.fileData.dylx = 'h';
                        this.fileData.glbsm = this.$store.state.hbsm;
                        break;
                    default:
                        break
                }
                getFileLis(this.fileData.glbsm).then(res => {
                    if (res.success) {
                        this.list = res.result;
                    } else {

                    }
                })
            },
            uploadError(err, file, fileList) {
                console.log("上传文件失败", err)
            },
            uploadSuccess(res, file, fileList) {
                this.getFileList();
            },
            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} 个文件`);
                this.$message.warning("上传失败")
            },
            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>