<!--
 * @Description: 报警等级列表
 * @Author: 王晓颖
 * @Date: 2021-08-09 11:32:10
 -->
<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :fullscreen="false" append-to-body>
    <div style="margin-bottom: 12px;">
      <el-button size="small" icon="el-icon-plus" :disabled="list.length>=alarmLevelList.length" @click="addRow">新增</el-button>
    </div>
    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :pagination="false" :total="total" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" size="small">
      <template slot="columns">
        <el-table-column label="报警等级" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.alarmLevel" :disabled="!scope.row.edit" size="small">
              <el-option
                v-for="item in alarmLevelList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="报警阈值" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.percent" size="small" :disabled="!scope.row.edit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="报警开关" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.alarmOpen"
              active-text="开"
              inactive-value="关"
              :disabled="!scope.row.edit"
              size="small"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button v-show="!scope.row.edit" type="text" size="small" @click.stop="editRow(scope.row)">编辑</el-button>
            <el-button v-show="!scope.row.edit" type="text" size="small" @click.stop="deleteRow(scope.row)">删除</el-button>
            <el-button v-show="scope.row.edit" type="text" size="small" @click.stop="saveRow(scope.row)">保存</el-button>
          </template>
        </el-table-column>
      </template>
    </normal-table>
  </el-dialog>
</template>

<script>
  import { getAlarmLevelList } from '@/api/environment/alarmLevel'
  import { getDictByCode } from '@/api/system/dict'
  export default {
    name: "sensorLevel",
    data(){
      return {
        dialogFormVisible: false, // 对话框是否显示
        dialogTitle:'报警等级',
        listQuery: {
          keywords: '',
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          offset: 1,
          limit: 20
        }, // 筛选条件
        alarmLevelList:[], // 报警等级列表
        timeRange: [], // 时间范围
        list: [], // 列表数据
        total: 0, // 数据总数
        listLoading: true, // 列表加载动画
        tableOption: {
          head: {
            show: false, // 是否需要标题栏，
            text: '报警等级' // 标题名称
          },
          options: {
            needIndex: true, // 是否需要序号列
            border: false
          },
          toolsOption: {
            selectColumns: false, // 是否需要筛选列
            refresh: false // 是否需要刷新按钮
          }
        } // 表格属性
      }
    },
    created(){
      this.fetchAlarmLevelType()
    },
    methods: {
      // 初始化弹窗
      initDialog(row){
        this.dialogFormVisible = true
        this.sensor = row.sensor
        this.dialogTitle = row.sensorName +'报警等级设置'
        this.fetchData()
      },
      addRow(){
        if(this.list.length>=this.alarmLevelList.length){
          this.$message.warning('超出允许设置条数')
        }else{
          this.list.push({
            alarmLevel: '', percent: '', alarmOpen: true, edit: true
          })
        }
      },
      // 编辑行
      editRow(row){
        row.edit = true
      },
      // 删除行
      deleteRow(row){
        this.$confirm(
          '确定要删除该行设置吗？',
          '确认操作',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          // deleteAlarmLevel(row.id).then(response => {
          //   if (response.code === 200) {
              this.$message.success('删除成功')
              this.list.splice(this.list.findIndex(item=>row.id==item.id),1)
            // }
          // })
        })
      },
      //保存行数据
      saveRow(row){
        if(this.validateRow(row)){
          // 有id执行编辑操作
          if(row.id){
            //TODO: 更新报警等级
            // updateAlarmLevel(row).then(res=>{
            //
            // })
            this.$message.success('保存成功')
          }else{ // 执行新增操作
            //TODO：新增报警等级
            // addAlarmLevel(row).then(res=>{
            //
            // })
            this.$message.success('保存成功')
          }
          row.edit = false
        }
      },
      // 验证输入
      validateRow(row){
        if(!row.alarmLevel){
          this.$message.warning('请选择报警等级')
          return false
        }
        if(!row.percent){
          this.$message.warning('请选择报警阈值')
          return false
        }
        if(row.percent>120 || row.percent<=0){
          this.$message.warning('报警阈值不能小于等于0或大于120')
          return false
        }
        // 校验是否与其他项报警等级重复
        const findList = this.list.filter(item=>item.alarmLevel===row.alarmLevel)
        if(findList.length>1){
          this.$message.warning('报警等级重复')
          return false
        }
        return true
      },
      // 获取数据
      fetchData() {
        this.listLoading = true
        // getRealData().then(res =>{
        this.list = [
          { id:'1', alarmLevel: '1', percent: '80', alarmOpen: true, edit: false},
          { id:'2', alarmLevel: '2', percent: '60', alarmOpen: true, edit: false},
          { id:'3', alarmLevel: '3', percent: '50', alarmOpen: true, edit: false}
        ]
        this.total = 4
        this.listLoading = false
        // })
      },
      // 获取报警等级类别
      fetchAlarmLevelType() {
        getDictByCode('envAlarmLevel').then(response => {
          this.alarmLevelList = response.data
        })
      },
    }
  }
</script>

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

</style>