<template>
    <div>
        <el-form>
            <el-form-item>
                <el-input placeholder="Search Message" prefix-icon="el-icon-search" v-model="searchMessage">
                    <el-button @click="searchMessage = ''" slot="append" icon="el-icon-refresh"></el-button>
                </el-input>
            </el-form-item>
        </el-form>
        <div style="height:500px;overflow:auto">
            <div v-for="m in messages.filter(m => m.subject.toLowerCase().includes(searchMessage) || m.body.toLowerCase().includes(searchMessage) || m.to.toLowerCase().includes(searchMessage))" 
                style="margin-bottom:10px;padding:15px;border-radius:3px;border:1px solid #ddd;margin-right:5px;"
                :key="m.id">
                <h4>{{m.subject}}</h4>
                <hr>
                <div style="font-weight:bold;">
                    User: {{m.user}}<br>
                    Recipients: {{m.to}}<br>
                    Time: {{m.created_at}}<br>
                </div>
                <hr>
                <p v-html="m.body.replace(/(?:\r\n|\r|\n)/g, '<br>')" style="text-align:justify"></p>
                <a :href="base_url + '/' + m.attachment" target="_blank" class="btn btn-sm btn-outline-secondary"><i class="el-icon-document"></i> View Attachment</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['data'],
    computed: {
        messages() {
            return this.$store.state.messages
        }
    },
    data: function() {
        return {
            base_url: BASE_URL,
            searchMessage: ''
        }
    }
}
</script>

<style lang="css" scoped>
.el-form {
    text-align: right;
}
</style>
