<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"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
        >
            <el-button size="small" type="primary">上传</el-button>
        </el-upload>
        <table border="2">
            <tr>
                <th>序号</th>
                <th>文件名称</th>
                <th>文件类型</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in list" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.wjmc}}</td>
                <td>{{item.wjlx}}</td>
                <td>
                    <span>下载</span>
                    <span>预览</span>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import {insertFile} from "./../../../api/common"
    import {Message} from "element-ui"
    export default {
        name: "fjcl",
        data() {
            return {
                list: [
                    {
                        wjmc: '调查文档1',
                        wjlx: 'doc',
                        url: ''
                    },
                    {
                        wjmc: '调查文档2',
                        wjlx: 'doc',
                        url: ''
                    },
                    {
                        wjmc: '调查文档3',
                        wjlx: 'doc',
                        url: ''
                    },
                    {
                        wjmc: '调查文档4',
                        wjlx: 'doc',
                        url: ''
                    },
                ],
                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
          }
        },
        methods: {
            uploadError(err,file,fileList){
                console.log("上传文件失败",err)
            },
            uploadSuccess(res, file, fileList) {
                this.filesData.list = res.result;
                console.log(res,"res=========")
                insertFile(this.filesData).then(res=>{
                    if (res.success) {
                        Message.warning("上传成功")
                    }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;
        background-color: #fff;
        font-size: 14px;
        width: 100%;
        td, th {
            text-align: center;
            height: 36px;
            min-width: 50px;
        }
    }


</style>