<template>
    <el-dialog title="导入车辆" :visible.sync="dialogVisible" width="600px" class="dialog-info">
        <div class="import" v-show="isImport" v-loading="importing">
            <div class="upload-wrp">
                <div class="upload-main" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)"
                     @dragleave="dragleave($event)" :class="{mainover: isOver}">
                    <i class="el-icon-upload icon-upload"></i>
                    <p class="text" v-show="!file">点击或将文件拖拽到这里导入</p>
                    <p class="text file-name" v-show="file">
                        {{ file.name }}
                    </p>
                    <p class="desc">支持扩展名：.xls .xlsx</p>
                    <input type="file" ref="inputFile" @change="uploadFile($event)" class="input-upload">
                </div>
            </div>
            <div class="handle">
                <p class="download" @click="downloadTemplate">点击下载导入车辆模板</p>
                <p class="clear" @click="clearFile" v-show="file">删除文件</p>
            </div>
            <div class="btn-group">
                <el-row>
                    <el-button @click="dialogVisible = false" style="margin-right: 20px">关闭</el-button>
                    <el-button type="primary" @click="importFile">导入</el-button>
                </el-row>
            </div>
        </div>
        <div class="results" v-show="!isImport">
            <div class="res-head">
                <i class="el-icon-success"></i>
                <p>导入车辆完成！</p>
                <p>成功数：{{ results.successNum }}条；重复数：{{ results.repeatNum }}条；失败数：{{ results.failNum }}条</p>
            </div>
            <div class="lists">
                <div v-show="results.repeatList.length!=0">
                    <p>重复列表</p>
                    <el-table size="mini" :data="results.repeatList" border :header-cell-style="{background:'rgba(200,200,200, .1)'}">
                        <el-table-column prop="plateNumber" label="车牌号" align="center" width="180"></el-table-column>
                        <el-table-column prop="bikebox" label="设备号" align="center"></el-table-column>
                        <el-table-column prop="reason" label="重复原因" align="center"></el-table-column>
                    </el-table>
                </div>
                <div v-show="results.failList.length!=0">
                    <p>失败列表</p>
                    <el-table size="mini" :data="results.failList" border :header-cell-style="{background:'rgba(200,200,200, .1)'}">
                        <el-table-column prop="plateNumber" label="车牌号" align="center" width="180"></el-table-column>
                        <el-table-column prop="bikebox" label="设备号" align="center"></el-table-column>
                        <el-table-column prop="reason" label="失败原因" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import { downloadFile } from '@/utils'
    import api from '@/api/bike'
    export default {
        name: "import-template",
        data() {
            return {
                dialogVisible: false,
                isImport: true,
                importing: false,
                isOver: false,
                file: '',
                results: {
                    successNum: 0,
                    failNum: 0,
                    repeatNum: 0,
                    failList: [],
                    repeatList: []
                }
            }
        },
        methods: {
            open() {
                this.isImport = true
                this.dialogVisible = true
                this.clearFile()
            },
            dragenter(el) {
                el.stopPropagation();
                el.preventDefault();
            },
            dragover(el) {
                el.stopPropagation();
                el.preventDefault();
                this.isOver = true
            },
            dragleave(el) {
                el.stopPropagation();
                el.preventDefault();
                this.isOver = false
            },
            drop(el) {
                el.stopPropagation();
                el.preventDefault();
                // this.fileList(el.dataTransfer.files);
                this.isExcel(el.dataTransfer.files[0])
            },
            uploadFile(ev) {
                // console.log(ev.target.files)
                this.isExcel(ev.target.files[0])
            },
            isExcel(file) {
                let type = file.name.split('.')[1]
                if(type=='xlsx'||type=='xls') {
                    this.file = file
                } else {
                    this.$message({
                        type: 'info',
                        message: '只支持.xls、.xlsx格式'
                    });
                }
            },
            downloadTemplate() {
                downloadFile('iznaer-sbike-customer/file/导入车辆模板.xlsx')
            },
            clearFile() {
                this.file = ''
                if(this.$refs.inputFile) this.$refs.inputFile.value = ''
            },
            importFile() {
                if(this.file) {
                    this.importing = true
                    api.importBike({ file: this.file }).then(res => {
                        console.log(res)
                        this.importing = false
                        this.isImport = false
                        this.results = res.results
                        if(this.results.successNum!=0) this.$emit('updateList')
                    }).catch(err => {
                        console.log(err)
                        setTimeout(() => {
                            this.importing = false
                        }, 2000)
                    })
                } else {
                    this.$message({
                        type: 'info',
                        message: '请选择文件'
                    });
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
        top: -5vh;
        .import {
            .upload-wrp {
                .upload-main {
                    margin: 0px auto;
                    width: 400px;
                    height: 200px;
                    background-color: #f6f6f6;
                    text-align: center;
                    position: relative;
                    i.icon-upload {
                        font-size: 70px;
                        margin-top: 30px;
                        /*color: #409EFF;*/
                    }
                    i.icon-close {
                        color: #99a9bf;
                        cursor: pointer;
                    }
                    p {
                        line-height: 1;
                    }
                    p.text {
                        line-height: 1.2;
                        margin: 0 30px;
                        font-weight: bold;
                        font-size: 1rem;
                    }
                    p.file-text {
                        color: #409EFF;
                        z-index: 10;
                    }
                    p.desc {
                        color: #99a9bf;
                    }
                    .input-upload {
                        width: 400px;
                        height: 200px;
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
                .mainover {
                    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                }
            }
            .handle {
                width: 100%;
                display: flex;
                margin: 0 80px;
                p {
                    color: #409EFF;
                    cursor: pointer;
                    &:hover {
                        text-decoration: underline;
                    }
                }
                .download {
                    width: 345px;
                }
                .clear {
                    text-align: right;
                }
            }

            .btn-group {
                text-align: center;
                margin-top: 20px;
            }
        }
        .results {
            .res-head {
                text-align: center;
                margin-bottom: 30px;
                i {
                    font-size: 70px;
                }
            }
        }
    }
</style>
