<template>
  <div class="title">
    <el-form ref="queryFormRef" :model="state" :inline="true" @keyup.enter.native="queryList">
      <el-form-item label="数据日期" style="margin-bottom: 0px;">
        <el-config-provider :locale="locale">
          <el-date-picker v-model="queryParams.alarmTime" type="date" :default-time="queryParams.alarmTime"
            value-format="YYYY-MM-DD" size="small" style="max-width: 150px;" />
        </el-config-provider>
      </el-form-item>

      <el-form-item label="预警类型" style="margin-left: 10px;width:320px;margin-bottom: 0px;">
        <el-select v-model="queryParams.alarmType" style="width: 240px;" size="small" clearable>
          <el-option v-for="item in alarmtype" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 0px;">
        <el-button type="primary" class="button" @click="queryList">查询数据</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="state.tableData" border stripe style="margin-top: 15px;width: 100%"
      :height="tableHeight" highlight-current-row @current-change="handleCurrentRowChange" ref="my_table"
      :header-cell-style="{ background: '#606266', color: '#FFFFFF' }">
      <el-table-column fixed align="center" width="50" label="序号">
        <template #default="scope">
          <span style="font-weight: bold;font-size: 15px;">{{ (state.queryParams.page - 1) * state.queryParams.rows +
              (scope.$index + 1)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="stationName" label="遥测站信息" header-align="center" align="center" width="300">
      </el-table-column>
      <el-table-column prop="stationCode" label="遥测站代码" header-align="center" align="center" width="130">
      </el-table-column>
      <el-table-column prop="deviceSn" label="设备SN" header-align="center" align="center" width="130"></el-table-column>
      <el-table-column prop="alarmType" label="报警类型" header-align="center" align="center" width="195"></el-table-column>
      <el-table-column prop="alarmTime" label="预警日期" header-align="center" align="center" width="120"></el-table-column>
      <el-table-column fixed="right"></el-table-column>
    </el-table>

    <el-config-provider :locale="locale">
      <el-pagination v-model:currentPage="queryParams.page" v-model:page-size="queryParams.rows"
                :page-sizes="[10, 15, 20, 50, 100]" :small="state.small" :disabled="state.disabled"
                :default-page-size="queryParams.rows" :background="state.background"
                layout="total, sizes, prev, pager, next, jumper" :total="state.total"
                style="text-align: center; margin-top: 10px; height: 30px" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, toRef, ref, onMounted } from "vue";
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
import DeviceAlarmAction from "@/api/devicealarm";
import { AlarmQueryParam, AlarmModel } from '@/types';
import { PageResult } from "@/types/api/base";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import Moment from "moment";
import tool from "@/until/tool"

let locale = ref(zhCn);
const loading = ref(false)
const currentRow = ref();
const my_table = ref();

const userType = localStorage.getItem("UserType") || "";
const unitCode = localStorage.getItem("UnitCode") || "";
let pageSize = localStorage.getItem("PageSize") == null ? 10 as number : localStorage.getItem("PageSize") as unknown as number;

const state = reactive({
  tableData: [] as AlarmModel[],
  queryParams: { page: 1, rows: pageSize * 1 } as AlarmQueryParam,
  currentTabIndex: "0",
  total: 0,
  small: false,
  background: true,
  disabled: false,
}
);

const {
  queryParams,
  total,
} = toRefs(state);

const tableHeight = ref(document.documentElement.clientHeight - 180);

const handleCurrentRowChange = (val: AlarmModel | undefined) => {
  currentRow.value = val;
};

//预警烈性
const alarmtype = [
  {
    value: 1,
    label: '连续3天没有收到数据',
  },
  {
    value: 2,
    label: '当天没收到数据',
  },
  {
    value: 3,
    label: '当天不够三条,有16点',
  },
  {
    value: 4,
    label: '当天不够三条,没有16点',
  },
  {
    value: 5,
    label: '数据识别3个值不一致',
  },
  {
    value: 6,
    label: '设备工作时间超过30S',
  }
  ,
  {
    value: 7,
    label: '设备工作时间超过45S',
  }
  ,
  {
    value: 8,
    label: '设备工作时间超过60S',
  }
  ,
  {
    value: 9,
    label: '多个设备sn对应一个遥测站',
  },
  {
    value: 10,
    label: '遥测站台账SN不正确',
  },
  {
    value: 11,
    label: '电压低于3.5V',
  }
]

const handleSizeChange = (val: number) => {
  queryParams.value.rows = val;
  queryList();
  localStorage.setItem("PageSize", val.toString());
};

const handleCurrentChange = (val: number) => {
  queryParams.value.page = val;
  queryList();
  if (Object.keys(my_table).length > 0) { if (my_table.value != null) { (my_table.value as any).$refs.bodyWrapper.scrollTop = 0; } }
};

const queryList = () => {
  loading.value = true;
  if(userType!=='0'){
    state.queryParams.unitCode=unitCode;
  }
  
  DeviceAlarmAction.QuerylarmListByDate(state.queryParams).then(result => {
    if (result.status === 200) {
      const { res, flag, error } = result.data;
      if (flag != undefined && flag == 1) {
        const pageData = res as PageResult<AlarmModel[]>;
        state.tableData = pageData.list;
        state.total = pageData.total;
      } else {
        ElMessage.error(error);
      }
    }
  }).catch(error => {
    //请求失败时的操作     
    console.log(error);
  })
  loading.value = false;
};

onMounted(() => {
  let date = new Date();
  state.queryParams.alarmTime = Moment(new Date()).format("YYYY-MM-DD");
  if (date.getHours() < 20) {
    state.queryParams.alarmTime = Moment(new Date()).subtract(1, 'days').format("YYYY-MM-DD");
  }
  
  window.onresize = function () {
    tableHeight.value = document.documentElement.clientHeight - 190;
  };
  queryList();
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 30px;
}
</style>