<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="item in navName" :label="`${item.dictLabel}`" :name="item.dictValue" :key="item.dictCode">
        <el-table v-loading="loading" :data="ALARMDATAList" height="370">
          <el-table-column v-if="labelName.perName" :label="labelName.perName" align="center" prop="perName" />
          <el-table-column v-if="labelName.cardNumber" :label="labelName.cardNumber" align="center" prop="cardNumber" />
          <el-table-column v-if="labelName.departName" :label="labelName.departName" align="center" prop="departName" />
          <el-table-column v-if="labelName.stationId" :label="labelName.stationId" align="center" prop="stationId" />
          <el-table-column
            v-if="labelName.stationName"
            :label="labelName.stationName"
            align="center"
            prop="stationName"
          />
          <el-table-column v-if="labelName.actionID" :label="labelName.actionID" align="center" prop="actionID" />
          <el-table-column v-if="labelName.location" :label="labelName.location" align="center" prop="location" />
          <el-table-column v-if="labelName.areaName" :label="labelName.areaName" align="center" prop="areaName" />
          <el-table-column v-if="labelName.entryTime" :label="labelName.entryTime" align="center" prop="entryTime" />
          <el-table-column v-if="labelName.reason" :label="labelName.reason" align="center" prop="reason" />
          <el-table-column v-if="labelName.alarmTime" :label="labelName.alarmTime" align="center" prop="alarmTime" />
          <el-table-column
            v-if="labelName.overCapacityCount"
            :label="labelName.overCapacityCount"
            align="center"
            prop="overCapacityCount"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { listPerRealAlarm } from '@/api/tyler/perReal'
import { listData } from '@/api/system/dict/data'
// import { personAlarmDataEdit } from "@/api/underPosition/personAlarm";
// import {  getALARMDATA,updateALARMDATA } from "@/api/underPosition/areaAlarm";
// import { listDept } from "@/api/system/dept";

export default {
  name: 'myname',
  dicts: ['per_alarm_type'],
  components: {},
  props: [],
  data() {
    return {
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      //查看人员
      openPerson: false,
      loading: false,
      activeName: '1',
      navName: [],
      ONLINEDATAList: [],
      // 矿山区域监测报警数据表格数据
      ALARMDATAList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [{ required: true, message: '唯一标识符不能为空', trigger: 'blur' }],
      },
      personData: [],
      labelName: {
        perName: '姓名',
        cardNumber: '卡号',
        departName: '部门',
        location: '所在位置',
        entryTime: '入井时间',
        alarmTime: '报警时间',
      },
    }
  },
  watch: {},
  created() {
    this.$nextTick(function () {
      this.getTagname()
    })
  },
  mounted() {
    this.$nextTick(function () {
      this.getList(this.activeName)
      // this.listRList('1')
    })
  },
  methods: {
    getList(alarmType) {
      listPerRealAlarm({ alarmType }).then(res => {
        this.ALARMDATAList = res.rows
      })
    },
    getTagname() {
      listData({ dictType: 'per_alarm_type' }).then(res => {
        this.navName = res.rows
      })
    },
    handleClick(tab, event) {
      console.log(tab, 'handleClick')
      // this.ONLINEDATAList = [];
      this.activeName = tab.paneName
      this.getList(tab.paneName)
      if (tab.paneName == 1) {
        this.labelName = {
          perName: '姓名',
          cardNumber: '卡号',
          departName: '部门',
          location: '所在位置',
          entryTime: '入井时间',
          reason: null,
          alarmTime: '报警时间',
          actionID: null,
          overCapacityCount: null,
          areaName: null,
          stationId: null,
          stationName: null,
        }
      } else if (tab.paneName == 2) {
        this.labelName = {
          perName: null,
          cardNumber: null,
          departName: null,
          location: null,
          entryTime: null,
          reason: null,
          alarmTime: '报警时间',
          actionID: null,
          overCapacityCount: '超员人数',
          areaName: '区域名称',
          stationId: null,
          stationName: null,
        }
      } else if (tab.paneName == 3) {
        this.labelName = {
          perName: null,
          cardNumber: null,
          departName: null,
          location: '安装位置',
          entryTime: null,
          reason: '原因',
          alarmTime: '报警时间',
          overCapacityCount: null,
          actionID: null,
          areaName: null,
          stationId: '分站编号',
          stationName: '分站名称',
        }
      } else if (tab.paneName == 4) {
        this.labelName = {
          perName: '姓名',
          cardNumber: '卡号',
          departName: '部门',
          location: '分站位置',
          entryTime: null,
          reason: null,
          alarmTime: '报警时间',
          overCapacityCount: null,
          actionID: null,
          stationId: '分站编号',
          stationName: null,
          areaName: '限制区名称',
        }
      } else if (tab.paneName == 5) {
        this.labelName = {
          perName: '姓名',
          cardNumber: '卡号',
          departName: '部门',
          location: null,
          entryTime: null,
          reason: null,
          alarmTime: '报警时间',
          overCapacityCount: null,
          actionID: null,
          stationId: null,
          stationName: null,
          areaName: '未到达区域名称',
        }
      } else if (tab.paneName == 6) {
        this.labelName = {
          perName: '姓名',
          cardNumber: '卡号',
          departName: '部门',
          location: '报警位置',
          entryTime: null,
          reason: null,
          alarmTime: '报警时间',
          overCapacityCount: null,
          actionID: null,
          stationId: null,
          stationName: null,
          areaName: null,
        }
      }
    },
    /**查看人员*/
    handleViewPerson(row) {
      getALARMDATA(row.regionId).then(res => {
        this.openPerson = true
        this.personData = res.data
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        alarmClearTime: null,
        relieveDuration: null,
      }
      this.resetForm('form')
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.form.id = row.id
      this.open = true
      this.title = '处理报警数据'
    },
    /** 提交按钮 */
    submitForm() {
      let that = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null && Number(this.activeName) < 5) {
            personAlarmDataEdit(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.listRList(that.activeName)
            })
          } else if (this.form.id != null && Number(this.activeName) > 4) {
            updateALARMDATA(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.listRList(that.activeName)
            })
          } else {
            this.open = false
            // addONLINEDATA(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #e8f2fb;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #e8f2fb;
  border-bottom: 2px solid #0b6bd2;
}
</style>