<!--
 * @Author: your name
 * @Date: 2022-04-11 15:07:47
 * @LastEditTime: 2022-04-14 18:00:06
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
  <div class="charsCom all-flex-h">
    <div class="title">报警设备</div>

    <div class="four all-flex-h">
      <div class="top flex">
        <div>设备编号</div>
        <div>设备类型</div>
        <div>预警信息</div>
        <div>预警时间</div>
      </div>
      <div class="scroll-wrapper">
        <div v-if="loading" class="loading">加载中...</div>
        <Scroll v-else-if="inforList.length > 0" :dataList="inforList">
          <template v-slot="{ dataList }">
            <ScroItem
              v-for="(item, index) in dataList"
              :key="item.fConGasProInforId"
              :data="item"
              :index="index"
            />
          </template>
        </Scroll>
        <div v-else class="no-data">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import { listDetectorReportData } from "@/api/detector/detectorReportData";
import Scroll from "./Scroll";
import ScroItem from "./ScroItem";
import {getInfo} from "@/api/login";
export default {
  components: {
    Scroll,
    ScroItem
  },
  data() {
    return {
      notStarted:0,
      completed:0,
      inProgress:0,
      loading: false,
      user:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isCancelAlarm:0
      },
      inforList:[],
      arr: [
      ],
    };
  },
  mounted() {},
  created() {
    this.getuserInfo();
  },
  methods: {
    getuserInfo(){
      getInfo().then(response => {
        this.user = response.user.roles[0]
        this.getList();
      });
    },
    getList() {
      this.loading = true;
      listDetectorReportData(this.queryParams).then(response => {
        this.inforList = response.rows;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.charsCom {
  width: 100%;
  height: 100%;
}
.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 22px;
}
.two {
  box-shadow: 0px 0px 3px 1px #dddddd;
  height: 28px;
  font-size: 14px;
  margin-bottom: 15px;
  > div {
    line-height: 28px;
    flex: 1;
    text-align: center;
    &.left {
      color: #1f8df3;
    }
    &.middle {
      flex: 1;
      color: #03c4f1;
    }
    &.right {
      color: #ffc337;
    }
  }
}
.three {
  font-size: 16px;
  margin-bottom: 10px;
  > div {
    flex: 1;
    line-height: 24px;
    text-align: center;
  }
}
.four {
  flex: 1;
  font-size: 14px;
  // 这个解决子元素overhidden失效问题
  min-height: 0;
  >.top {
    background: rgba(24, 144, 255, 0.1);
    height: 29px;
    line-height: 29px;
    > div {
      flex: 1;
      text-align: center;
    }
  }
  .scroll-wrapper {
    // font-size: 14px;
    flex: 1;
    // 这个解决子元素overhidden失效问题
    min-height: 0;
    // background: red;
    // overflow: hidden;
    // position:relative;
  }
}

.loading, .no-data {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}
</style>
