<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-07-01 10:05:17
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-11 14:04:58
 * @FilePath: /ps-fire-protection-web/src/components/XF/Box.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="xf-table" :style="{ left, top }">
    <div @click="close" class="close">
      <img class="" src="@/assets/images/closeBlack.svg" alt="" />
    </div>
    <el-table :data="alarmList"  height="300" style="width: 100%">
      <el-table-column label="设备编号" align="center" prop="number" width="150"/>
      <el-table-column label="设备状态" align="center" prop="report_status" :formatter="deviceStatusFormat"/>
      <el-table-column label="安装位置" align="center" prop="position" :show-overflow-tooltip="true"/>
      <el-table-column label="报警开始时间" align="center" prop="starttime" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.starttime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上报参数" align="center" prop="values" :show-overflow-tooltip="true"/>
      <el-table-column label="报警状态" align="center" prop="status" :formatter="statusFormat" />
    </el-table>

  </div>
</template>

<script>
  export default {
    // name: 'xfTable"',
      props: {
        left: {
          type: String,
          default: "20px",
        },
        top: {
          type: String,
          default: "-20px",
        },
        alarmList: {
          type: Array,
          default: () => [],
        },
        routerShow: {
          type: Boolean,
        },
      },
      components: {
      },
      watch: {
        // 因为悬浮球有可能出现无token情况，所以要根据这个属性来判断是否有token可以调接口的状态
        routerShow: {
          handler(val) {
            if (val) {
              this.getNumTextList();
            }
          },
          deep: true,
        },
      },
      data() {
        return {
          statusOptions: [],
          deviceStatus: []
        };
      },
      methods: {
        getNumTextList() {
          this.getDicts("t_gas_alarm_status").then(response => {
              this.statusOptions = response.data;
          });
          this.getDicts("t_device_status").then(response => {
                this.deviceStatus = response.data;
          });
        },
        close() {
          this.$parent.changeShow();
        },
        statusFormat(row, column) {
          return this.selectDictLabel(this.statusOptions, row.status);
        },
        deviceStatusFormat(row, column) {
          const deviceStatus = this.selectDictLabel(this.deviceStatus, row.report_status);
          return deviceStatus ? deviceStatus : "-";
        },
      },
  };
</script>
<style lang="scss" scoped>
.xf-table {
  position: relative;
  width: 650px;
  padding-top: 30px;
  box-shadow: 0px 2px 8px 1px rgb(0 0 0 / 10%);
  position: absolute;
  background: #fff;
  .close {
    position: absolute;
    right: 5px;
    top: 10px;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}
</style>
