<!--
 * @Description: 报警等级列表
 * @Author: 王晓颖
 * @Date: 2021-08-09 11:32:10
 -->
<template>
  <app-container>
    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small" @change="changePage">
      <template slot="columns">
        <el-table-column label="报警等级" align="center" width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.hasAlarmLevel" type="success" size="small">已设置</el-tag>
            <el-tag v-else type="info" size="small">未设置</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">查看报警等级</el-button>
          </template>
        </el-table-column>
      </template>
    </normal-table>
    <sensor-level ref="sensorLevel"/>
  </app-container>
</template>

<script>
  import { getAlarmLevelList } from '@/api/environment/alarmLevel'
  import SensorLevel from "./sensorLevel";
  export default {
    name: "listLevel",
    components: {SensorLevel},
    data(){
      return {
        listQuery: {
          keywords: '',
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          offset: 1,
          limit: 20
        }, // 筛选条件
        columns: [
          {
            text: '参数名称',
            value: 'name'
          },
          {
            text: '参数编码',
            value: 'sensor'
          },
          {
            text: '单位',
            value: 'unit'
          }
        ], // 显示列
        timeRange: [], // 时间范围
        list: [], // 列表数据
        total: 0, // 数据总数
        listLoading: true, // 列表加载动画
        tableOption: {
          head: {
            show: true, // 是否需要标题栏，
            text: '报警等级' // 标题名称
          },
          options: {
            needIndex: true, // 是否需要序号列
            border: false
          },
          toolsOption: {
            selectColumns: false, // 是否需要筛选列
            refresh: false // 是否需要刷新按钮
          }
        } // 表格属性
      }
    },
    created(){
      this.fetchData()
    },
    methods: {
      // 获取数据
      fetchData() {
        this.listLoading = true
        getAlarmLevelList().then(res =>{
          this.list = res.data
          // this.list = [
          //   { id:'1', sensorName: 'PM2.5', sensor: '11203', unit: 'ug/m3', hasAlarmLevel: true },
          //   { id:'1', sensorName: 'PM2.5', sensor: '11203', unit: 'ug/m3', hasAlarmLevel: true },
          //   { id:'1', sensorName: 'PM2.5', sensor: '11203', unit: 'ug/m3', hasAlarmLevel: true },
          //   { id:'1', sensorName: 'PM2.5', sensor: '11203', unit: 'ug/m3', hasAlarmLevel: true }
          // ]
          this.total = res.data.length
          this.listLoading = false
        })
      },
      // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
      changePage(val) {
        if (val && val.size) {
          this.listQuery.limit = val.size
        }
        if (val && val.page) {
          this.listQuery.offset = val.page
        }
        this.fetchData()
      },
      // 查看详情
      goDetail(row){
        this.$refs.sensorLevel.initDialog(row)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>