<template>
  <div class="tips">
    <div v-for="item in list" :class="item.level" class="tips-item">
      <div class="title-content">
        {{ item.title }}
        <span>{{ item.levelName }}</span>
      </div>
      <span class="container">{{ item.content }}</span>
      <div class="footer">
        <span>{{ item.time }}</span>
        <span class="btn">处理</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, onUnmounted, ref } from 'vue';

  const list = ref([
    {
      title: '安检员操作不规范',
      content: 'T3航站楼B区3号通道，行李检查未按标准流程操作',
      time: '5分钟前',
      level: 'high',
      levelName: '紧急',
    },
    {
      title: '安检员仪容仪表不达标',
      content: 'T1航站楼A区1号通道，安检员着装不整齐',
      time: '12分钟前',
      level: 'middle',
      levelName: '中等',
    },
  ]);
  onMounted(() => {

  });

  onUnmounted(() => {

  });
</script>

<style lang="less" scoped>
  .tips {
    height: calc(100% - 50px);
    padding: 10px 20px;

    &:hover {
      overflow: auto;
    }
  }

  .tips-item {
    display: flex;
    flex-flow: column;
    width: 100%;
    padding: 12px;
    border: 1px solid #5B3F49;
    border-radius: 8px;
    background: #423B48;
    font-size: 16px;
    color: #fbffff;

    &:not(:last-child) {
      margin-bottom: 12px;
    }

    .title-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        display: inline-flex;
        background: #64404B;
        border-radius: 10px;
        padding: 4px 8px;
        color: #DD5754;
        font-size: 12px;
      }
    }

    &.middle {
      border-color: #545041;
      background: #444543;

      .title-content {
        span {
          color: #E0A63F;
          background: #665A3E;
        }
      }
    }

    .container {
      margin: 12px 0;
      font-size: 14px;
    }

    .footer {
      font-size: 12px;
      color: #8D909B;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .btn {
        color: #314FAA;
      }
    }
  }
</style>
