<script lang="ts" setup>
import { IconAlarm, IconX } from '@computing/opendesign-icons';
import { ref } from 'vue';
defineProps({
  content: {
    type: String,
    required: true,
    default: '',
  },
  showClose: {
    type: Boolean,
    required: true,
    default: false,
  },
});
const show = ref(true);
function close() {
  show.value = false;
}
</script>
<template>
  <div v-if="show" class="alarm-alert">
    <el-icon class="alarm-icon" :size="16">
      <IconAlarm />
    </el-icon>
    <div class="alarm-content">
      {{ content }}
    </div>

    <el-icon v-if="showClose" class="close-icon" size="16" @click="close()">
      <IconX />
    </el-icon>
  </div>
</template>
<style scoped lang="scss">
.alarm-alert {
  display: flex;
  line-height: 16px;
  background: var(--o-color-major-secondary);
  padding: 8px 16px;
  border-radius: 4px;
  border: var(--o-color-major);
  .alarm-content {
    font-size: 12px;
    color: var(--o-text-color-primary);
    overflow: hidden;
    transition: all 0.2s;
    white-space: pre-wrap;
    height: auto;
    margin-left: 8px;
    width: 100%;
    line-height: 16px;
  }

  .close-icon {
    float: right;
  }
  .el-icon {
    color: #9ea4b3;
  }
}
</style>
