{{define "qrcodeModal"}}
<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
         :closable="true"
         :class="themeSwitcher.darkCardClass"
         :footer="null"
         width="300px">
    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
        {{ i18n "pages.inbounds.clickOnQRcode" }}
    </a-tag>
    <template v-if="app.subSettings.enable && qrModal.subId">
        <a-divider>Subscription</a-divider>
        <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" style="width: 100%; height: 100%;"></canvas>
    </template>
    <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
    <template v-for="(row, index) in qrModal.qrcodes">
        <a-tag color="orange" style="margin-top: 10px;display: block;text-align: center;">[[ row.remark ]]</a-tag>
        <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas>
    </template>
</a-modal>

<script>

    const qrModal = {
        title: '',
        clientIndex: 0,
        inbound: new Inbound(),
        dbInbound: new DBInbound(),
        client: null,
        qrcodes: [],
        clipboard: null,
        visible: false,
        subId: '',
        show: function (title = '', dbInbound = new DBInbound(), clientIndex = 0) {
            this.title = title;
            this.clientIndex = clientIndex;
            this.dbInbound = dbInbound;
            this.inbound = dbInbound.toInbound();
            settings = JSON.parse(this.inbound.settings);
            this.client = settings.clients[clientIndex];
            remark = [this.dbInbound.remark, ( this.client ? this.client.email : '')].filter(Boolean).join('-');
            address = this.dbInbound.address;
            this.subId = '';
            this.qrcodes = [];
            if (this.inbound.tls && !ObjectUtil.isArrEmpty(this.inbound.stream.tls.settings.domains)) {
                this.inbound.stream.tls.settings.domains.forEach((domain) => {
                    remarkText = [remark, domain.remark].filter(Boolean).join('-');
                    this.qrcodes.push({
                        remark: remarkText,
                        link: this.inbound.genLink(domain.domain, remarkText, clientIndex)
                    });
                });
            } else {
                this.qrcodes.push({
                    remark: remark,
                    link: this.inbound.genLink(address, remark, clientIndex)
                });
            }
            this.visible = true;
        },
        close: function () {
            this.visible = false;
        },
    };

    const qrModalApp = new Vue({
        delimiters: ['[[', ']]'],
        el: '#qrcode-modal',
        data: {
            qrModal: qrModal,
        },
        methods: {
            copyToClipboard(elmentId, content) {
                this.qrModal.clipboard = new ClipboardJS('#' + elmentId, {
                    text: () => content,
                });
                this.qrModal.clipboard.on('success', () => {
                    app.$message.success('{{ i18n "copied" }}')
                    this.qrModal.clipboard.destroy();
                });
            },
            setQrCode(elmentId, content) {
                new QRious({
                    element: document.querySelector('#' + elmentId),
                    size: 260,
                    value: content,
                });
            },
            genSubLink(subID) {
                const { domain: host, port, tls: isTLS, path: base } = app.subSettings;
                return buildURL({ host, port, isTLS, base, path: subID+'?name='+remark });
            }
        },
        updated() {
            if (qrModal.client && qrModal.client.subId) {
                qrModal.subId = qrModal.client.subId;
                this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
            }
            qrModal.qrcodes.forEach((element, index) => {
                this.setQrCode("qrCode-" + index, element.link);
            });
        }
    });

</script>
{{end}}