<template>
  <div class="warn" v-infinite-scroll="init" :infinite-scroll-disabled="finished"
       infinite-scroll-watch-disabled="finished">
    <template v-if="warnList.length > 0">
      <div class="warn_item" v-for="item in warnList" :key="item.id">
        <div class="icon_warn"></div>
        <div>
          <div class="warn_title">{{item.warningType}}</div>
          <div class="warn_content">{{item.warningContent}}</div>
          <div class="warn_time">触发时间：{{item.warningTime}}</div>
        </div>
      </div>
    </template>
    <nut-empty v-else description="无预警数据"></nut-empty>
  </div>
</template>

<script>
export default {
  name: "Warn"
}
</script>
<script setup>
  import { onMounted, ref} from 'vue';
  import { getWarnList } from "../../utils/api";

  const warnList = ref([])
  const current = ref(1);
  const size = ref(10);
  const finished = ref(false);
  const init = () => {
    if(finished.value) {
      return
    } else {
      let params = {
        current: current.value,
        size: size.value,
        type: 4
      }
      getWarnList(params).then((res) => {
        warnList.value = warnList.value.concat(res.data.records)
        if(res.data.records.length < size.value) {
          finished.value = true;
          return;
        }
        current.value++;
      })
    }
  }

  onMounted(() => {
    // init()
  })
</script>

<style scoped>
  .warn {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .warn_item {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #E6E6E6;
    display: flex;
    align-items: center;
  }
  .icon_warn {
    width: 30px;
    height: 30px;
    margin-left: 20px;
    margin-right: 20px;
    background: url("../../assets/images/warn/warnOrgin.png") no-repeat;
    background-size: 100% 100%;
  }
  .warn_title {
    font-size: 14px;
    color: #FF6700;
  }
  .warn_content {
    font-size: 12px;
  }
  .warn_time {
    font-size: 12px;
    color: #808080;
  }
</style>
