<template>
    <el-dialog title="导入二维码" :visible.sync="dialogVisible" width="460px" class="dialog-info">
        <div class="info-wrp">
            <el-form ref="form" label-width="100px">
                <el-form-item label="导出范围">
                    <el-radio-group v-model="range" @change="rangeChange">
                        <el-radio label="0">勾选项</el-radio>
                        <el-radio label="1">本页</el-radio>
                        <el-radio label="2">全部</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择数量" v-show="range!=2">
                    已选择<span>{{ number }}</span>条
                </el-form-item>
                <p class="desc">
                    <i class="el-icon-warning"></i>导出图片以压缩包的形式下载
                </p>
                <div class="btn-group">
                    <el-row>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="downloadCode">导出</el-button>
                    </el-row>
                </div>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
    import api from '@/api/bike'
    import { downloadFile } from '@/utils'
    export default {
        name: "download-qcode",
        data() {
            return {
                dialogVisible: false,
                range: '0',
                plateArr: [],
                number: 0,
                params: {
                    troubleStatus: '',
                    putStatus: '',
                    keyword: undefined
                }
            }
        },
        methods: {
            open(array, query) {
                this.dialogVisible = true
                this.plateArr = array
                this.range = '0'
                this.rangeChange('0')

                this.params.troubleStatus = query.troubleStatus
                this.params.putStatus = query.putStatus
                this.params.keyword = query.keyword
            },
            rangeChange(val) {
                let arr = this.plateArr[Number(this.range)].split(',')
                if(this.range=='0'&&arr[0]=='') {
                    this.number = 0
                } else {
                    this.number = arr.length
                }
            },
            downloadCode() {
                if(this.range=='2') {
                    api.allQRCode(this.params).then(res => {
                        console.log(res)
                        downloadFile(res.results.fileUrl)
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    if(this.range=='0') {
                        let arr = this.plateArr[0].split(',')
                        if(arr[0]=='') {
                            this.$message.error('请勾选车辆');
                            return false
                        }
                    }
                    api.downloadQRCode({ plateNumbers: this.plateArr[Number(this.range)] }).then(res => {
                        console.log(res)
                        downloadFile(res.results.fileUrl)
                        // this.$message({
                        //     type: 'success',
                        //     message: '导出成功!'
                        // })
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
        .info-wrp {
            margin-top: -10px;
            .desc {
                color: #ccc;
                margin-left: 40px;
                i {
                    margin-right: 3px;
                }
            }
            .btn-group {
                text-align: center;
                margin-top: 40px;
            }
        }
    }
</style>