


<template>
    <div class="ui_chattool_on_frame_open" v-cloak>
        <div class="ui_chattool_on">
            <div v-bind:class="headerClass">
                <img class="ui_chattool_on_close_image" src="https://chatbotserv.com/img/close.png" @click="$emit('closed')">
                <div class="ui_chattool_on_title">&#x30C1;&#x30E3;&#x30C3;&#x30C8;bot&#x306B;&#x3054;&#x8CEA;&#x554F;&#x304F;&#x3060;&#x3055;&#x3044;</div>
                <img v-show="isConnect" class="ui_chattool_on_connection_image" src="https://chatbotserv.com/img/connect.png">
                <img v-show="!isConnect" class="ui_chattool_on_connection_image" src="https://chatbotserv.com/img/disconnect.png">
                <div class="ui_chattool_tab" v-if="isShowTab">
                    <div v-bind:class="chatbotTabItemClass" @click="onTabSelected('Chatbot')">Chatbot</div>
                    <div v-bind:class="chatTabItemClass" @click="onTabSelected('Chat')">
                        Chat <img v-show="hasNewArrivalMessage" class="ui_chattool_new_arrival_message" src="https://chatbotserv.com/img/new_message.png">
                    </div>
                </div>
            </div>
            <div class="ui_chattool_body">
                <chatbot-body v-show="selectTab == 'Chatbot'"
                              ref="chatbot"
                              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:is-show-tab="isShowTab"
                              v-bind:send-label="sendLabel"
                              v-bind:keyword-placeholder="keywordPlaceholder"
                              v-bind:questionnaire-thumbs-up-label="questionnaireThumbsUpLabel"
                              v-bind:questionnaire-thumbs-down-label="questionnaireThumbsDownLabel"
                              v-bind:contact-us-via-chat-label="contactUsViaChatLabel"
                              v-on:questionnaire-thumbs-down="onQuestionnaireThumbsDown"
                              v-on:move-chat="onMoveChat"></chatbot-body>
                <chat-body v-show="selectTab == 'Chat'"
                           v-bind:is-show="selectTab == 'Chat'"
                           v-bind:service-id="serviceId"
                           v-bind:lang-id="langId"
                           v-bind:preview="preview"
                           v-on:chat-finished="onChatFinished"
                           v-on:new-arrival-message="onNewArrivalMessage"></chat-body>
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {
    name: "ChattoolOn",
    inject: ['reload'],
    props: [
        "connection", "service-id", "lang-id", "preview", 'force-emergency',
        "title", "send-label", "keyword-placeholder", "questionnaire-thumbs-up-label", "questionnaire-thumbs-down-label",
        "contact-us-via-chat-label",
        "show-chat-divide", "valid-chat", 'is-show',
    ],
    components: {
        'chatbot-body': httpVueLoader('https://chatbotserv.com/client/chatbotvue/chatbotbody/ja/4f391516-6cdf-4ead-a467-0007a7e0bfe1'),
        'chat-body': httpVueLoader('https://chatbotserv.com/client/chatvue/chatbody/ja/4f391516-6cdf-4ead-a467-0007a7e0bfe1'),
    },
    data: function() {
        return {
            isShowTab: false,
            selectTab: 'Chatbot',
            hasNewArrivalMessage: false,
        }
    },
    created: function () {
        this.adjustChat(false, this.validChat);
        window.addEventListener('resize', this.onWindowResized);
        const vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    },
    destroyed: function () {
        window.removeEventListener('resize', this.onWindowResized);
    },
    methods: { // 省略形式(アロー関数)だと、内部から呼び出せない
        onWindowResized: function () {
            const vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        },
        refresh: function () {
            this.$refs.chatbot.refresh();
        },
        onTabSelected: function(name) {
            if (this.selectTab !== name) {
                this.selectTab = name;
                if (this.selectTab === 'Chat') {
                    this.hasNewArrivalMessage = false;
                }
            }
        },
        onQuestionnaireThumbsDown: function (isValidChat) {
            this.adjustChat(true, isValidChat);
        },
        adjustChat: function (isCountUp, isValidChat) {
            let count = 0;
            if (this.$cookie.get('questionnaire_thumbs_down_count') != null) {
                count = parseInt(this.$cookie.get('questionnaire_thumbs_down_count'));
            }
            if (isCountUp) {
                count = count + 1;
                this.$cookie.set('questionnaire_thumbs_down_count', count);
            }
            // Chat表示判定
            if (isValidChat && this.showChatDivide > 0) {
                if (count >= this.showChatDivide) {
                    if (!this.isShowTab) {
                        this.isShowTab = true;
                    }
                }
            }
        },
        onMoveChat: function () {
            this.selectTab = 'Chat';
        },
        onChatFinished: function () {
            // this.isShowTab = false;
            // this.selectTab = 'Chatbot';
            this.reload();
        },
        onNewArrivalMessage: function () {
            if (!this.isShow) {
                this.hasNewArrivalMessage = true;
                this.$emit('new-arrival-chat-message');
            } else {
                if (this.selectTab !== 'Chat') {
                    this.hasNewArrivalMessage = true;
                }
            }
        },
    },
    computed: {
        chatbotTabItemClass: function () {
            return this.selectTab === 'Chatbot' ? 'item active' : 'item';
        },
        chatTabItemClass: function () {
            return this.selectTab === 'Chat' ? 'item active' : 'item';
        },
        isConnect: function () {
            return this.connection.connectionState === 'Connected';
        },
        headerClass: function () {
            return this.isShowTab ? 'ui_chattool_header_with_tab' : 'ui_chattool_header';
        },
    },
    watch: {
        isShow: function (val) {
            if (val) {
                if (this.selectTab === 'Chat') {
                    this.hasNewArrivalMessage = false;
                }
            }
        },
    },
}
</script>

<style scoped>
.ui_chattool_on_frame_open {
    position: fixed;
    background-color: transparent;
    right: 0px;
    bottom: 0px;
    z-index: 100000;
    width: 420px;
    height: 600px;
}

/* semantics-ui などから移行 */
.ui_chattool_on {
    border-radius: 0.28571429rem 0.28571429rem 0em 0em;
    font-size: 16px;
    margin: 0;
    top: 0px;
    bottom: 0px;
    border: 1px solid #D4D4D5;
    box-shadow: none;
    padding: 2px;
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    line-height: 1.28571429em;
    text-transform: none;
    color: rgba(0, 0, 0, 0.87);
    left: 0;
    z-index: 10;
    transition: all .5s ease;
    background-color: #E5BD55;
}
.ui_chattool_header_with_tab {
    height: 63px;
    padding-top: 5px;
    padding-left: 5px;
}
.ui_chattool_header {
    padding: 5px;
}
@media only screen and (max-width: 1024px) {
    .ui_chattool_on_frame_open {
        width: 100vw !important;
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
    }
    .ui_chattool_on {
        height: 100% !important;
        display: grid !important;
        grid-template-rows: auto 1fr !important;
    }
    .ui_chattool_body {
        display: grid;
        grid-template-rows: 1fr !important;
        padding-bottom: 5px !important;
    }
}
@media only screen and (max-width: 480px) {
    .ui_chattool_on_frame_open {
        width: 100vw !important;
        min-height: 100vh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
    }
    .ui_chattool_on {
        height: 100% !important;
        display: grid !important;
        grid-template-rows: auto 1fr !important;
    }
    .ui_chattool_body {
        display: grid;
        grid-template-rows: 1fr !important;
        padding-bottom: 5px !important;
    }
}
@media only screen and (max-width: 767px) {
    .ui_chattool_on_frame_open {
        width: 100vw !important;
        min-height: 100vh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
    }
    .ui_chattool_on {
        height: 100% !important;
        display: grid !important;
        grid-template-rows: auto 1fr !important;
    }
    .ui_chattool_body {
        display: grid;
        grid-template-rows: 1fr !important;
        padding-bottom: 5px !important;
    }
}
@media only screen and (max-width: 1023px) {
    .ui_chattool_on_frame_open {
        width: 100vw !important;
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
    }
    .ui_chattool_on {
        height: 100% !important;
        display: grid !important;
        grid-template-rows: auto 1fr !important;
    }
    .ui_chattool_body {
        display: grid;
        grid-template-rows: 1fr !important;
        padding-bottom: 5px !important;
    }
}
.ui_chattool_on img.ui_chattool_on_close_image {
    display: inline-block;
    max-width: 100%;
    height: auto;
    width:  20px;
    margin-left: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    cursor: pointer;
}
.ui_chattool_on_title {
    padding-left: 7.5px;
    display: inline-block;
    font-weight: bold;
}
img.ui_chattool_on_connection_image {
    width: 30px;
    right: 15px;
    position: absolute;
}
img.ui_chattool_new_arrival_message {
    margin-left: 10px;
}
.ui_chattool_tab {
    width: 100%;
    bottom: 0;
    top: 0;
    box-shadow: none !important;
    border: none;
    background: none transparent;
    border-bottom: 1px solid #D4D4D5;
    display: flex;
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: normal;
    min-height: 35px;
    margin: 0;
}
.ui_chattool_tab .item.active {
    background: none #FFFFFF;
    color: rgba(0, 0, 0, 0.95);
    border-top-width: 1px;
    border-color: #D4D4D5;
    font-weight: bold;
    margin-bottom: -1px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0.28571429rem 0.28571429rem 0px 0px !important;
    cursor: auto;
}
.ui_chattool_tab .item {
    background: transparent;
    border-bottom: none;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 2px solid transparent;
    padding: 2px 5px;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    align-items: center;
    cursor: pointer;
}
</style>
