<template>
    <div>
        <el-dialog
            :title='(type=="WIFI"?"WIFI":"群组")+"二维码"'
            :visible.sync='dialogVisible'
            width='60%'>
            <el-form v-show='type=="WIFI" && !qrcodeUrl' label-width='100px' :model='wifiForm' :rules='wifiFormRules'
                     ref='wifiForm'>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item prop='wifi' label='WIFI名称:'>
                            <el-input v-model='wifiForm.wifi' autocomplete='off'
                                      placeholder='请输入WIFI名称'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item prop='password' label='WIFI密码:'>
                            <el-input v-model='wifiForm.password' autocomplete='off'
                                      placeholder='请输入WIFI密码'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class='paycode'>
                <img class='qrcode' id='qrcode' :src='qrcodeUrl' v-show='qrcodeUrl'>
            </div>
            <div class='button-class'>
                <el-button @click='getQRCode(wifiForm)' v-show='type=="WIFI" && !qrcodeUrl'>生成WIFI二维码</el-button>
                <el-button @click='downloadAppCodeImg' v-show='qrcodeUrl'>点击下载二维码</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { Loading } from 'element-ui';
import axios from 'axios';

let loading;
let options = {};
export default {
    name: 'qrCode',
    watch: {},
    data() {
        return {
            dialogVisible: false,
            groupData: {},
            qrcodeUrl: '',
            type: '',
            wifiForm: {
                wifi: '',
                password: ''
            },
            wifiFormRules: {
                wifi: [
                    { required: true, message: '请输入WIFI名称', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入WIFI密码', trigger: 'blur' }
                ]
            }
        };
    },
    created() {

    },
    methods: {
        show(data, type) {
            this.qrcodeUrl = '';
            this.type = type;
            this.dialogVisible = true;
            if (this.type == 'GROUP') {
                this.groupData = data;
                //封装小程序码参数
                let params = {
                    groupId: this.groupData.id,
                    timeStamp: new Date().getTime(),
                    type: 'GROUP'
                };
                //获取二维码
                this.getQRCode(params);
                return;
            }
        },
        // 下载二维码
        downloadAppCodeImg() {
            let canvasData = document
                .getElementById('qrcode');
            let a = document.createElement('a');
            a.href = canvasData.src;
            a.download = (this.groupData.name ? this.groupData.name : 'WIFI') + '.png';
            a.click();
        },
        getQRCode(scene) {
            let _this = this;
            //定义表单验证结果变量
            let validateResult = true;
            //如果类型是WIFI，参数需要加上时间戳&type要赋值成WIFI
            if (this.type == 'WIFI') {
                scene.timeStamp = new Date().getTime();
                scene.type = 'WIFI';
                //验证表单参数
                _this.$refs['wifiForm'].validate((valid) => {
                    validateResult = valid;
                    if (valid) {
                    } else {
                        return false;
                    }
                });
            }
            if (!validateResult) {
                return;
            }
            //使用加载loading组件,等到二维码数据渲染完了再关闭
            loading = Loading.service(options);
            axios({
                url: _this.$axios.defaults.baseURL + '/api/wechat/getQrCode',
                method: 'post',
                data: scene,
                responseType: 'blob'
            }).then(res => {
                let blob = new Blob([res.data]);   // 返回的文件流数据
                let url = window.URL.createObjectURL(blob);  // 将它转化为路径
                _this.qrcodeUrl = url;
                //关闭转loading
                loading.close();
            });
        }
    }
};
</script>

<style scoped>

.el-button {
    margin-top: 20px;
}

.paycode {
    display: flex;
    justify-content: center;
}

.button-class {
    display: flex;
    justify-content: right;
}

.qrcode {
    width: 300px;
    height: 300px;
}

</style>