<template>
    <div v-loading="pageLoading">
        <el-form :model="form" label-position="top">
            <el-form-item label="门店收款码">
                <canvas ref="canvas" id="QRCode_header" style="width: 227px;height: 227px;"></canvas>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码</el-button>
                <!-- <el-button type="primary" @click="downloadImgHandle(form.paymentQrcode)">下载收款码样式</el-button> -->
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import QRCode from 'qrcode'
import { tbShopInfo, tbShopInfoPut } from "@/api/user";
export default {
    data() {
        return {
            pageLoading: false,
            form: {
                paymentQrcode: ''
            }
        }
    },
    mounted() {
        this.tbShopInfo();
    },
    methods: {
        // 下载图片
        downloadImgHandle(url) {
            if (url) {
                this.saveCanvasAsImage(this.$refs.canvas, 'pay_code')
            }
        },
        saveCanvasAsImage(canvas, filename) {
            // 获取canvas的数据URL
            const dataURL = canvas.toDataURL('image/png');

            // 创建一个a标签用于下载
            const downloadLink = document.createElement('a');
            downloadLink.href = dataURL;
            downloadLink.download = filename;
            document.body.appendChild(downloadLink);

            // 触发下载
            downloadLink.click();

            // 清理临时元素
            document.body.removeChild(downloadLink);
        },
        // 获取店铺详情
        async tbShopInfo() {
            try {
                this.pageLoading = true
                const shopId = localStorage.getItem("shopId");
                const res = await tbShopInfo(shopId);
                this.pageLoading = false
                this.form.paymentQrcode = res.paymentQrcode;

                QRCode.toCanvas(this.$refs.canvas, this.form.paymentQrcode, function (error) {
                    console.log(error);
                })
            } catch (error) {
                console.log(error);
            }
        },
    }
}
</script>