<template>
  <view v-if="notifyText" class="notify-bar">
    <view class="notify-line"></view>
    <view class="notify-text">{{ notifyText }}</view>
    <view class="notify-line"></view>
  </view>
  <view class="system-message">
    <view class="system-text">{{ text }}</view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  message: {
    type: Object,
    default: () => ({})
  }
});

const payload = computed(() => props.message?.payload || {});

const extension = computed(() => {
  try {
    return JSON.parse(payload.value.extension);
  } catch (e) {
    return {};
  }
});

const text = computed(() => extension.value.patient || payload.value.data || '')

const notifyText = computed(() => extension.value.notifyText || '')

</script>

<style scoped lang="scss">
@import "../chat.scss";

.notify-bar {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.notify-line {
  flex-grow: 1;
  min-width: 30rpx;
  height: 1px;
  background: #ddd;
}

.notify-text {
  margin: 0 20rpx;
  font-size: 24rpx;
  color: red;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>