<template>
  <div class="deliberate-concealment">
    <div class="thead">
      <span style="width: 12%">排名</span>
      <span>隐匿类别</span>
      <span>隐匿物品</span>
      <span>隐匿数量</span>
      <span>风险等级</span>
    </div>
    <vue3-scroll-seamless
      :classOptions="classOptions"
      :dataList="list"
      class="scroll-wrap"
    >
      <div v-for="(item, index) of list" :key="index" class="tbody">
        <span :class="{ main: index < 3 }" class="index" style="width: 12%">{{ index + 1 }}</span>
        <span>{{ item.item_name }}</span>
        <span>{{ item.category_name }}</span>
        <span class="num">{{ item.total_quantity }}</span>
        <span
          :class="{ low: item.danger_level === 'LOW', medium: item.danger_level === 'MEDIUM', high: item.danger_level === 'HIGH'}"
        >
          {{ item.dict_label }}
        </span>
      </div>
    </vue3-scroll-seamless>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';

  const classOptions = {
    limitMoveNum: 6,
  };

  let list = ref([]);

  onMounted(() => {
    executeSqlByKeyAndParam('intentionally_concealing_the_situation', {}).then(res => {
      list.value = res.data;
    });
  });
</script>

<style lang="less" scoped>
  .deliberate-concealment {
    height: calc(100% - 50px);
    overflow: hidden;
  }

  .thead, .tbody {
    span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fbffff;
      font-size: 12px;
      padding: 0 4px;
      width: 22%;

      &.low, &.num {
        color: #91cc75;
      }

      &.medium {
        color: #fac858;
      }

      &.high {
        color: #ee6666;
      }
    }
  }

  .scroll-wrap {
    margin: 0 auto;
    overflow: hidden;
  }
</style>