<template>
  <div class='app-container'>
    <!-- 返回start -->
    <div class='siteTitle'>
      <el-button class='goBack' @click='goBack'>返回</el-button>
      站点【上海新时达电气股份有限公司】{{alarmTit==1?'一级告警':''}}
    </div>
    <!-- 返回end -->

    <!-- 表格start -->
    <el-table
      :data='tableData'
      border
      stripe
      :header-cell-style='headClass'
      :cell-style='cellStyle'
    >
      <el-table-column fixed prop='happenTime' label='发生时间' width=''>
      </el-table-column>
      <el-table-column prop='alarmDes' label='告警描述' width=''>
      </el-table-column>
      <el-table-column prop='deviceName' label='设备' width=''>
      </el-table-column>
      <el-table-column prop='alarmType' label='告警类型' width=''> </el-table-column>
      <el-table-column prop='check' label='详情' width=''> 

          <template #default="scope">
            <span   @click="addItem()"
            >{{ scope.row.check }}</span>
          </template>
    </el-table-column>
      <el-table-column prop='eddl' label='状态' width=''>
        <template #default="scope">
          <span :style="{'color': scope.row.eddl=='已确认-admin'?'#8DCF6E':scope.row.eddl=='未确认'?'#FF747B':'#5c88fa'}"
          >{{ scope.row.eddl }}</span>
          </template>
         </el-table-column>
   
    </el-table>
    <!-- 表格end -->

     <!-- 分页start -->
    <div class="paginationBlock">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 分页end -->

     <!--弹框组件开始-----------------------start-->
    <dialog-component
      v-if="showDialog"
      ref="dialogComponent"
      :dialog-title="dialogTitle"
      :item-info="tableItem"
      @closeDialog="closeDialog"
    ></dialog-component>
    <!--弹框组件开始-----------------------end-->

  </div>
</template>

<script>
import DialogComponent from "./dialogComponent";
export default {
  // name: 'Dashboard',
  // computed: {
  //   ...mapGetters(['name']),
  // },
 components: { DialogComponent },
  data() {
    return {
      showDialog: false,

      input: '请输入发生时间',
      tableData: [
        {
          happenTime: '2021-09-14 14:23:21',
          alarmDes: '【母线带电】SEO状态变为ON',
          deviceName: '电压测试',
          alarmType: '故障',
          check: '查看',
          eddl: '自动恢复',
        },
        {
          happenTime: '2021-09-14 14:23:21',
          alarmDes: '【母线带电】SEO状态变为ON',
          deviceName: '小会议室测试151',
          alarmType: '故障',
          check: '查看',
          eddl: '已确认-admin',
        },
        {
          happenTime: '2021-09-14 14:23:21',
          alarmDes: '【母线带电】SEO状态变为ON',
          deviceName: '电压测试',
          alarmType: 'spjcsdb1',
          check: '查看',
          eddl: '未确认',
        },
        {
          happenTime: '2021-09-14 14:23:21',
          alarmDes: '【母线带电】SEO状态变为ON',
          deviceName: '小会议室测试151',
          alarmType: '故障',
          check: '查看',
          eddl: '自动恢复',
        },
      ],
    };
  },
  computed:{
    alarmTit:function(){
       return this.$route.query.type
      // if(this.$route.query.id==1){
      //   alert(1)
      //   return '一级告警'
      // }
      
      
    }

  },
  methods: {

    // 查看操作
    checkItem() {
      this.tableItem = {
        id: "",
        stationName: "",
        stationCode: "",
        stationAddress: "",
        siteList: [],
        done: "",
        guaZai: "",
      };
      this.dialogTitle = "告警详情";
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs["dialogComponent"].showDialog = true;
      });
    },

    goBack() {
      this.$router.replace('/alarmManage/index');
    },
    // 表头样式设置
    headClass() {
      return 'background:#FAFAFA;';
    },

    //自定义列样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex)
      if (columnIndex === 4) {
        return `color:#1187FF;cursor:pointer`;
      } else {
        return '';
      }
    },
    //查看
     handleClick(row) {
         alert('查看对应站点（页面跳转）')
        console.log(row);
      },

    // 添加操作
    addItem() {
      this.tableItem = {
        id: '',
        happenTime: '',
        alarmDes: '',
        deviceName: '',
        siteList: [],
        done: '',
        guaZai: '',
      };
      this.dialogTitle = '告警详情';
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs['dialogComponent'].showDialog = true;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
