


<template>
    <div v-if="isValid" class="chattool_root">
        <chattool-off v-show="!isOpen"
                      v-on:clicked="onClicked"
                      v-bind:message="getLabel('chatbotOffMessage')"
                      v-bind:has-new-arrival-chat-message="hasNewArrivalChatMessage">
        </chattool-off>
        <chattool-on v-show="isOpen"
                     ref="chattool"
                     v-on:closed="onClicked"
                     v-bind:connection="connection"
                     v-bind:service-id="serviceId"
                     v-bind:lang-id="langId"
                     v-bind:preview="preview"
                     v-bind:force-emergency="forceEmergency"
                     v-bind:title="getLabel('chatbotOnTitle')"
                     v-bind:send-label="getLabel('sendButton')"
                     v-bind:keyword-placeholder="getLabel('keywordPlaceholder')"
                     v-bind:questionnaire-thumbs-up-label="getLabel('questionnaireThumbsUp')"
                     v-bind:questionnaire-thumbs-down-label="getLabel('questionnaireThumbsDown')"
                     v-bind:contact-us-via-chat-label="getLabel('contactUsViaChat')"
                     v-bind:show-chat-divide="showChatDivide"
                     v-bind:valid-chat="validChat"
                     v-bind:is-show="isOpen"
                     v-on:new-arrival-chat-message="onNewArrivalChatMessage"
        ></chattool-on>
    </div>
</template>

<script>
// export default { // そのままexportは使えないから
module.exports = {
    name: 'Chattool',
    components: {
        'chattool-off': httpVueLoader('https://chatbotserv.com/client/vue/chattooloff/ja/4f391516-6cdf-4ead-a467-0007a7e0bfe1'),
        'chattool-on': httpVueLoader('https://chatbotserv.com/client/vue/chattoolon/ja/4f391516-6cdf-4ead-a467-0007a7e0bfe1'),
    },
    props: {
        identify: {
            type: String,
        },
        lang: {
            type: String,
        },
        email: {
            type: String,
        },
        user_name: {
            type: String
        }
    },
    provide() {
        return {
            reload: this.reload 
        }
    },
    data: () => {
        return {
            isValid: false,
            isOpen: false,
            connection: null,
            serviceId: this.identify,
            langId: this.lang,
            preview: false,
            forceEmergency: false,
            labels: {},
            showChatDivide: -1,
            hasNewArrivalChatMessage: false,
            validChat: true, 
        }
    },
    created() {
        if (this.serviceId === undefined) {
            this.serviceId = this.identify;
        }
        if (this.langId === undefined) {
            this.langId = this.lang;
        }
        this.connection = new signalR.HubConnectionBuilder()
            .withUrl("https://chatbotserv.com/chatbot")
            .withAutomaticReconnect({
                nextRetryDelayInMilliseconds: function () {
                    return 5000;
                },
            })
            .build();
        this.connection.start()
            .then(function() {
                this.init(null);
            }.bind(this));
    },
    methods: {
        onNewArrivalChatMessage: function () {
            this.hasNewArrivalChatMessage = true;
        },
        onClicked: function () {
            this.hasNewArrivalChatMessage = false;            
            this.isOpen = !this.isOpen;
        },
        getLabel: function(key) {
            if (this.labels[key] !== undefined) {
                return this.labels[key];
            }
            return '';
        },
        init: function (callback) {
            this.labels = {};
            this.connection.invoke('ValidService', this.serviceId, this.langId, this.preview)
                .then(function(data) {
                    if (data.value.result == true) {
                        this.isValid = true;
                        this.labels = data.value.labels;
                        this.showChatDivide = data.value.show_chat_divide;
                        this.validChat = data.value.valid_chat;

                        if (callback !== null) {
                            callback();
                        }
                    } else {
                        this.isValid = false;
                    }
                }.bind(this))
                .catch(function(error) {
                    console.log(error);
                });
        },
        refresh: function() {
            this.init(function () {
                this.$refs.chattool.refresh();
            }.bind(this));
        },
        // リロード
        // https://qiita.com/gosairei1207/items/76fa984e39ae8fd8b093
        async reload() {
            if (this.isValid) {
                this.isValid = false;
                await this.$nextTick();
                this.isValid = true;
            }
        },
    },
}
</script>

<style scoped>
.chattool_root {
    font-size: 10px;
}
</style>
