<template>
  <ns-view-list-table v-bind="config" ref="mainRef">
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'alarmTitle'">
        <div style="color: #2778ff">{{ record.alarmTitle }}</div>
        {{ record.abnormalDescription }}
      </template>
      <template v-if="column.dataIndex === 'priority'">
        {{ record.priority ? record.priority.label : '' }}
      </template>
      <template v-if="column.dataIndex === 'alarmLogState'">
        {{ record.alarmLogState ? record.alarmLogState.label : '' }}
      </template>
    </template>
  </ns-view-list-table>
  <!-- 详情页面 -->
  <Look ref="look" />
  <!-- 状态页面 -->
  <Status ref="status" @logAdd="logAdd" />
</template>
<script lang="ts">
  import { notificationtableConfig } from './ts/config';
  import Look from './look.vue';
  import Status from './status.vue';
  import { ref } from 'vue';

  export default {
    name: 'EquipmentAlarmIndex',
    components: { Look, Status },

    setup() {
      const look = ref(null);
      const status = ref(null);
      const mainRef = ref(null);
      const config = notificationtableConfig(look, status);
      const logAdd = () => {
        mainRef.value?.nsTableRef.reload();
      };
      return {
        config,
        look,
        status,
        mainRef,
        logAdd,
      };
    },
  };
</script>
