{{define "inboundInfoModal"}}
{{template "component/inboundInfo"}}
<a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' @ok="infoModal.ok"
         :closable="true" :mask-closable="true"
         ok-text='{{ i18n "pages.inbounds.copyLink"}}' cancel-text='{{ i18n "close" }}' :ok-button-props="infoModal.okBtnPros">
    <inbound-info :db-inbound="dbInbound" :inbound="inbound"></inbound-info>
</a-modal>
<script>

    const infoModal = {
        visible: false,
        inbound: new Inbound(),
        dbInbound: new DBInbound(),
        clipboard: null,
        okBtnPros: {
            attrs: {
                id: "inbound-info-modal-ok-btn",
                style: "",
            },
        },
        show(dbInbound) {
            this.inbound = dbInbound.toInbound();
            this.dbInbound = new DBInbound(dbInbound);
            this.visible = true;

            if (dbInbound.hasLink()) {
                this.okBtnPros.attrs.style = "";
            } else {
                this.okBtnPros.attrs.style = "display: none";
            }

            if (this.clipboard == null) {
                infoModalApp.$nextTick(() => {
                    this.clipboard = new ClipboardJS(`#${this.okBtnPros.attrs.id}`, {
                        text: () => this.dbInbound.genLink(),
                    });
                    this.clipboard.on('success', () => app.$message.success('{{ i18n "copySuccess" }}'));
                });
            }
        },
        close() {
            infoModal.visible = false;
        },
    };

    const infoModalApp = new Vue({
        delimiters: ['[[', ']]'],
        el: '#inbound-info-modal',
        data: {
            infoModal,
            get dbInbound() {
                return this.infoModal.dbInbound;
            },
            get inbound() {
                return this.infoModal.inbound;
            }
        },
    });

</script>
{{end}}