<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:'姓名',
          cardNumber:'卡号',
          departName:'部门',
          location:null,
          entryTime:null,
          reason:null,
          alarmTime:'报警时间',
          actionID:'动作',
          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>