<template>
  <!-- 实时日志 -->
  <div class="alarmLogs">
    <n-tabs default-value="real" type="line" @update:value="alramVal" size="large">
      <n-tab-pane name="real" tab="实时日志">
        <AlarmReal />
      </n-tab-pane>
      <n-tab-pane name="history" tab="历史日志">
        <div class="searchBox">
          <n-space>
            <n-select
              v-model:value="searchValue1"
              :options="stationOptions"
              style="width: 200px"
              clearable
              filterable
              placeholder="请选择站点名称"
            />
            <n-date-picker v-model:value="timeRange" type="datetimerange" clearable />
            <n-button type="primary" @click="handleClick('search')">搜索</n-button>
          </n-space>
        </div>
        <div class="tableBox">
          <n-data-table
            ref="tableRef"
            :bordered="false"
            :max-height="700"
            striped
            :columns="columns"
            :loading="tableLoading"
            :data="tableData"
            :remote="true"
            :pagination="pagination"
          >
          </n-data-table>
        </div>
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import { getWarnLog, getStationame } from '@/services';
import { formatDate } from '@/utils/util';
import AlarmReal from './conponents/alarmLogsReal.vue';

export default {
  name: 'alarmLogs',
  components: {
    AlarmReal,
  },
  setup() {
    const allData = reactive({
      stationOptions: [],
      // 搜索
      searchValue1: null,
      timeRange: [
        new Date().getTime() - 24 * 7 * 60 * 60 * 1000,
        new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1),
      ],
      tableLoading: true,
      // 表格
      columns: [
        {
          title: '站点编码',
          key: 'siteNo',
          align: 'center',
        },
        {
          title: '所属项目',
          key: 'name',
          align: 'center',
        },
        {
          title: '站点名称',
          key: 'siteName',
          align: 'center',
        },
        {
          title: '因子名',
          key: 'factorsName',
          align: 'center',
        },
        {
          title: '警戒级别',
          key: 'warnType',
          align: 'center',
          render(row) {
            let value = '';
            switch (row.warnType) {
              case 1:
                value = '预警';
                break;
              case 2:
                value = '报警';
                break;
              case 3:
                value = '设备异常';
                break;
              case 4:
                value = '设备离线';
                break;
              case 5:
                value = '设备故障';
                break;
            }
            return value;
          },
        },
        {
          title: '实时监测值',
          key: 'warnValue',
          align: 'center',
        },
        {
          title: '判断类型',
          key: 'compareWayDesc',
          align: 'center',
        },
        {
          title: '报警阈值',
          key: 'warnConfigValue',
          align: 'center',
        },
        {
          title: '持续时间',
          key: 'durationTime',
          align: 'center',
        },
        {
          title: '观测时间',
          key: 'ttTime',
          align: 'center',
        },
      ],
      tableData: [],
    });

    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    //获取站点名称下拉框
    const GetStationName = async () => {
      let res = await getStationame();
      if (res && res.code == 1) {
        let data = res.data;
        data.forEach((item) => {
          let { stCode, stName } = item;
          allData.stationOptions.push({ value: stCode, label: stName });
        });
      }
    };
    // 获取表格数据
    const getTableData = async () => {
      allData.tableLoading = true;
      let times = allData.timeRange ? formatDate(allData.timeRange[0]) : null;
      let timee = allData.timeRange ? formatDate(allData.timeRange[1]) : null;
      let pramas = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: {
          endTime: timee,
          siteNo: allData.searchValue1,
          startTime: times,
        },
      };
      let res = await getWarnLog(pramas);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.tableData = datas.list || [];
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total;
      }
      allData.tableLoading = false;
    };
    const handleClick = (type, row) => {
      switch (type) {
        case 'search':
          getTableData();
          break;
      }
    };
    // tab点击切换
    async function alramVal(val) {
      if (val == 'history') {
        getTableData();
      }
    }
    onMounted(() => {
      GetStationName();
    });
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      getTableData,
      handleClick,
      alramVal,
      GetStationName,
    };
  },
};
</script>

<style lang="less" scoped>
.alarmLogs {
  .tableBox {
    margin-top: 10px;
  }
}
</style>