

<template>
    <div class="ui_chatbot_choices">
        <table>
            <tbody>
            <tr v-for="choice in choice_list">
                <td v-bind:data-id="choice.id"
                    v-bind:class="tdClass"
                    @click="$emit('selected', choice)">
                    <img src="https://chatbotserv.com/img/right_arrow.png" alt="right_arrow">{{ choice.text }}
                </td>
            </tr>
            </tbody>
        </table>
        <span class="ui_chatbot_timestamp">{{timestamp()}}</span>
    </div>
</template>

<script>
module.exports = {
    name: "choice_list",
    props: ['choice_list', 'connection'],
    data: function () {
        return {
        }
    },
    computed: {
        tdClass: function () {
            return this.connection.connectionState === 'Connected' ? '' : 'disabled';
        },
    },
}
</script>

<style scoped>
/*
 * 選択肢スタイル
 */
.ui_chatbot_choices {
    padding-left: 50px;
    padding-right: 4px;
    margin: 10px 0;
}

.ui_chatbot_choices .ui_chatbot_timestamp {
    font-size: 10px;
    display: block;
    margin-right: 5px;
    line-height: normal;
}

/* semantics-ui などから移行 */
.ui_chatbot_choices table {
    font-size: 14px;
    width: 100%;
    background: #fff;
    margin: 1em 0 0 0;
    border: 1px solid rgba(34,36,38,.15);
    box-shadow: none;
    border-radius: .28571429rem;
    text-align: left;
    color: rgba(0,0,0,.87);
    border-collapse: separate;
    border-spacing: 0;
    line-height: 1.0em;
    font-weight: 400;
    padding: 0;
}
.ui_chatbot_choices table:first-child {
    margin-top: 0;
}
.ui_chatbot_choices table:last-child {
    margin-bottom: 0;
}
.ui_chatbot_choices table tr {
    line-height: 1.0em;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
.ui_chatbot_choices table tr:first-child td {
    border-top: none;
}
.ui_chatbot_choices table tr td:first-child {
    border-left: none;
}
.ui_chatbot_choices table tr td {
    cursor: pointer;
    padding: .78571429em .78571429em;
    text-align: inherit;
    line-height: 1.0em;
    font-weight: 400;
    margin: 0;
    border: 1px solid rgba(34,36,38,.15);
    box-shadow: none;
    border-spacing: 0;
    border-bottom: none;
    border-right: none;
}
.ui_chatbot_choices table tr td.disabled {
    cursor: default;
    pointer-events: none!important;
}
.ui_chatbot_choices table tr:hover td:not(.disabled) {
    background-color: rgba(238, 241, 239, 0.5);
}
.ui_chatbot_choices table tbody tr td img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    margin-right:  5px;
}
</style>
