<template>
    <div class="w-full rounded-md font-medium flex items-center">
        <div class="flex-grow border-b mr-1 ml-2"></div>
        <div class="text-center" v-if="isUser">{{ sentence?.user.value }}</div>
        <div class="text-center" v-else>{{ sentence?.staff.value }}</div>
        <div class="flex-grow border-b ml-1 mr-2"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import iconUrl from '@/assets/message_bank_card.png'
import { getUserMsg } from '@/utils/userMsg'
import { eRole } from '@/types/roleType'
import { CHAT_CONST_LIST } from '@/config/chat'


export default defineComponent({
    props: {
        fromMyself: Boolean,
        content: {
            required: true,
            type: Object as PropType<{ bank: string, name: string, account: string }>,
        }
    },
    setup(props) {
        const isUser = getUserMsg()?.role === eRole.user
        const sentence = CHAT_CONST_LIST.find(i => i.user.id === props?.content.bank)
        return { iconUrl, isUser, sentence, CHAT_CONST_LIST }
    },
})
</script>
