<template>
    <div>
        <el-dialog v-dialogDrag :close-on-click-modal="false"
                title="属性导入"
                :visible.sync="isVisible"
                width="30%"
                :before-close="close">
                <div class="wrap">
                    <div class="main-button">
                        <el-upload
                                class="upload-demo"
                                action="/api/tx/excelGeo/import"
                                :data="sxdrData"
                                :on-success="uploadSuccess"
                                :show-file-list="false"
                                multiple
                        >
                            <el-button type="primary" icon="iconfont iconshangchuan">上传</el-button>
                        </el-upload>
                    </div>
                    <el-button type="primary" class="download" @click="downloadTemplate">下载模板</el-button>
                </div>
            <ul>
                <li v-for="(item,index) in errorData" :key="index">{{item}}</li>
            </ul>
            <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <!-- <el-button type="primary" @click="confirm">确 定</el-button> -->
  </span>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: "sxdr",
        props: {
            sxdrVisible: {
                type: Boolean,
                default: false
            },
            dylx: {
                type: String,
            },
            bsm: {
                type: String
            }
        },
        data() {
            return {
                isVisible: false,
                sxdrData: {
                    bsm: '',
                    type:''
                },
                errorData: []
            }
        },
        mounted() {
            this.$store.state.sxdrType = '';
        },
        methods: {
            cancel(){
                this.close()
            },
            confirm(){
                console.log("确定....")
            },
            loading() {
                this.$store.state.sxdrType = this.dylx;
            },
            reset() {
                this.errorData = [];
                this.sxdrData = {bsm: ''};
            },
            close() {
                this.$emit('close')
                this.reset();
            },
            downloadTemplate() {
                let url= `/api/tx/excelGeo/template?type=${this.dylx}`
                let elemIF = document.createElement("iframe");
                elemIF.src = url;
                elemIF.style.display = "none";
                document.body.appendChild(elemIF)
            },
            uploadSuccess(res, file, fileList) {
                this.errorData = [];
                if (res.success) {
                    this.$message.success("上传成功")
                    this.loading();
                    this.close()
                } else {
                    if (res.result == null) {
                        this.$message.error(res.message)
                    } else {
                        this.$message.error("上传失败")
                        this.errorData = res.result;
                    }
                }
            },
            uploadError(err, file, fileList) {
                console.log("上传文件失败", err)
            },
        },
        watch: {
            sxdrVisible(val) {
                this.isVisible = val;
            },
            dylx(val) {
                this.sxdrData.type=val;
            },
            bsm(val) {
                this.sxdrData.bsm = val;
            }
        }
    }
</script>

<style scoped lang="less">
    .wrap{
        width: 100%;
        height: 30px;
        position: relative;
        .main-button {
            display: -webkit-flex;
            display: flex;
            flex-direction: column-reverse;
            flex-wrap: nowrap;
            position: absolute;
            left: 165px;
            top: 18px;
        }
        .download{
            position: absolute;
            left: 300px;
            top: 18px;
        }
    }


    ul {
        margin-top: 40px;
        li {
            line-height: 20px;
            color: red;
        }
    }
</style>