<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">
      <template slot="columns">
        <el-table-column label="报警开关" align="center" width="90">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.alarmOpen=='1'" type="success" size="small">开</el-tag>
            <el-tag v-else-if="scope.row.alarmOpen=='0'" type="info" size="small">关</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button v-if="scope.row.alarmOpen" type="text" size="small" @click.stop="edit(scope.row)">修改规则</el-button>
            <el-button v-if="scope.row.alarmOpen" type="text" size="small" @click.stop="deleteRule(scope.row)">删除规则</el-button>
            <el-button v-if="!scope.row.alarmOpen" type="text" size="small" @click.stop="add(scope.row)">新增规则</el-button>
          </template>
        </el-table-column>
      </template>
    </normal-table>
    <edit-alarm-rule ref="editAlarmRule" @watchChild="fetchData"/>
  </app-container>
</template>

<script>
import { getToiletListPage, } from '@/api/environment/device'
import EditAlarmRule from "./editAlarmRule";
export default {
  name: 'DeviceAlarmRuleList',
  components: {EditAlarmRule},
  data() {
    return {
      listQuery: {
        deviceNo: '', // 关键字
        sensor: '', // 在线状态
      }, // 筛选条件
      columns: [
        {
          text: '参数名称',
          value: 'sensorName',
          align: 'center',
          width: 160
        },
        {
          text: '参数编码',
          value: 'sensor',
          align: 'center'
        },
        {
          text: '单位',
          value: 'unit',
          align: 'center'
        },
        {
          text: '报警阈值',
          value: 'alarmThreshold',
          align: 'center'
        }
      ], // 显示列
      timeRange: [], // 时间范围
      list: [], // 列表数据
      total: 0, // 数据总数
      listLoading: true, // 列表加载动画
      typeList: [],
      fileList: [],
      tableOption: {
        head: {
          show: true, // 是否需要标题栏，
          text: '数据列表' // 标题名称
        },
        options: {
          needIndex: false // 是否需要序号列
        },
        toolsOption: {
          selectColumns: false, // 是否需要筛选列
          refresh: false // 是否需要刷新按钮
        }
      }, // 表格属性
      editShow: false // 编辑页面是否显示
    }
  },
  created() {
    if (this.$route.query && this.$route.query.deviceNo) {
      const deviceNo = this.$route.query.deviceNo
      this.listQuery.deviceNo = deviceNo
      this.tableOption.head.text = deviceNo+'设备参数报警规则'
      // this.changeTab(this.$route.query.deviceType)
    }
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      // getToiletListPage(this.listQuery).then(response => {
      //   this.list = response.data.rows
        this.list = [
            {id:'1', deviceNo:'2021030803100001', sensorName:'PM2.5', sensor:'a34004', unit:'ug/m³', alarmThreshold: 3.5, alarmOpen:'1' },
            {id:'1', deviceNo:'2021030803100001', sensorName:'PM10', sensor:'a34004', unit:'ug/m³', alarmThreshold: 3.5, alarmOpen:'0' },
            {id:'1', deviceNo:'2021030803100001', sensorName:'TSP', sensor:'a34004', unit:'ug/m³', alarmThreshold: '', alarmOpen:'' },
            {id:'1', deviceNo:'2021030803100001', sensorName:'噪声', sensor:'a34004', unit:'ug/m³', alarmThreshold: '', alarmOpen:'' },
        ]
        // that.total = response.data.total
        this.listLoading = false
      // })
    },
    // 删除规则
    deleteRule(row) {
      this.$confirm(
        '确定要删除该条报警规则吗？',
        '确认操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        // delToilet(row.id).then(response => {
        //   if (response.code === 200) {
        //     this.$message.success('删除成功')
        //     this.fetchData()
        //   }
        // })
      })
    },
    // 编辑规则
    edit(row){
      this.$refs.editAlarmRule.initDialog('update', row)
    },
    // 新增规则
    add(row){
      this.$refs.editAlarmRule.initDialog('create', row)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .edit_btns{
    .edit_btn{
      float:right;
      margin-left:5px;
    }
  }
</style>