/* 告警区 */
<template>
  <gy-card
    title="告警区"
    area-style="alarm"
    circle-style="green"
    content-style="25"
  >
    <div style="padding-left: 5px; padding-right: 5px">
      <el-table
        :data="values"
        height="219px"
        :header-cell-style="{
          background: 'Black',
          color: 'rgb(220,220,220)',
          padding: '4px',
          fontSize: '14px',
          'border-bottom': 'solid 1px black',
        }"
        :cell-style="{
          background: '#1e1e1e',
          color: 'rgb(220,220,220)',
          padding: '3px',
          fontSize: '12px',
        }"
        @row-dblclick="itemDblclick"
      >
        <el-table-column
          prop="lastUpdateTime"
          align="center"
          label="时间"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="alertText"
          align="center"
          label="描述"
          width="380"
        >
        </el-table-column>
        <el-table-column prop="isSelected" align="center" label="确认">
          <template v-slot="scope">
            <!-- <el-checkbox v-model="scope.row.isSelected" @click="itemChecked(scope.row)"></el-checkbox> -->
            <input
              type="checkbox"
              v-model="scope.row.isSelected"
              @click="itemChecked(scope.row)"
            />
          </template>
          <!-- <el-checkbox v-model="isSelected"></el-checkbox> -->
          <!-- <input type="checkbox"/> -->
        </el-table-column>
      </el-table>
    </div>
  </gy-card>
  <WindturbineDetailPages
    v-model="dialogVisible"
    :windturbine="currentWindturbine"
  ></WindturbineDetailPages>
</template>

<script>
import MessageBridge from "../../assets/script/MessageBridge";
import WindturbineDetailPages from "../area/windturbine/WindturbineDetailPages.vue";
import BackgroundData from "../../assets/script/BackgroundData";
import axios from "axios";
import { config } from "../../config";

export default {
  name: "AlarmArea",
  components: {
    WindturbineDetailPages,
  },
  created: function () {
    this.initData();
  },
  props: {},
  data() {
    return {

      values: new Array(),
      dialogVisible:false,
      currentWindturbine: {},
    };
  },
  methods: {
    initData() {
      var mb = MessageBridge.getInstance();
      var vs = [{ key: "/topic/fault-popup", action: this.faultMessage }];
      mb.register(vs);
    },
    faultMessage(msg) {
      var val = JSON.parse(msg);
      var sleected = {};
      this.values.forEach((it) => {
        if (it.isSelected) {
          sleected[it.id] = 0;
        }
      });
      this.values = new Array();
      for (var v in val) {
        var vl = val[v];
        if (vl.stationId != "QS_FDC" && vl.category1 == "FJ") {
          vl.alertText = vl.windturbineName + "-" + vl.alertText;
        }
        if (sleected[vl.id] == 0 && BackgroundData.getInstance().LoginUser) {
          vl.isSelected = true;
        }
        this.values.push(vl);
      }
      console.log(val);
    },
    /* 行双击 */
    itemDblclick(row) {
      if (row.category1 != "FJ") return;
      this.dialogVisible = true;
      this.currentWindturbine = row;
    },
    /* 报警确认 */
    itemChecked(row) {
      if (row.isSelected == true) {
        row.isSelected = false;
        return;
      }
      var bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "确认报警需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
        });
        row.isSelected = false;
        return;
      }
      row.isSelected = true;
      this.confirm(row);
      console.log(row);
    },
    confirm(item) {
      var url = `http://${config.calcUrl}/alarm/confirm?snapID=${item.snapIDString}&faultID=${item.idString}&userName=${BackgroundData.getInstance().LoginUser.name}`;
      axios
        .get(url)
        .then((msg) => {
          var mms = msg.data > 0 ? "报警确认成功！" : "报警确认出现错误!";
          var tp = msg.data > 0 ? "success" : "error";
          this.$notify({
            title: "报警",
            message: mms,
            type: tp,
            position: "bottom-right",
            offset: 60,
          });
        })
        .catch((err) => {
          this.$notify({
            title: "报警",
            message: `报警确认出现错误：${err.message}，请重试`,
            type: "error",
            position: "bottom-right",
            offset: 60,
          });
        });
    },
  },
};
</script>
<style scoped>
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px;
  height: 0px;
  background-color: black;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #292929;
  border-radius: 6px;
}
:deep(.el-table td, .el-table th) {
  border-bottom: 2px solid black;
}
tr {
  line-height: 1.5;
  background: #1e1e1e;
  margin-bottom: 2px;
  border-radius: 5px;
}
/* .ToolBar {
  position: absolute;
  right: 12px;
  width: 586px;
  text-align: center;
  z-index: 2;
  font-size: 14px;
  height: 28px;
  margin: 5px;
  background: #1e1e1e;
} */
.table-main {
  font-size: 14px;
  width: 600px;
  text-align: center;
  background: #000000;
  margin: 5px;
  border-collapse: separate;
  border-spacing: 0px 5px;
}
</style>
