<template>
  <div class="safeCom">
    <div class="safeCom_head">
      
      <i :class="['iconfont',iconfonts()]" style="font-size: 24px;margin-right:10px"></i>
      <div style="display:flex;justify-content: space-between;width:100%">
        <div class="safeCom_title">{{ props.title }}</div>
        <div style="font-size: 14px;position: relative;right: 35px;top: 15px;">共{{tableData.length}}条</div>
      </div>
      <div class="safeCom_fifter">
        <!-- <el-select
          v-model="state.stationId"
          clearable
          size="mini"
          style="width: 7vw; margin-right: 10px"
          placeholder="全部"
        >
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="state.rankVal"
          clearable
          size="mini"
          style="width: 7vw; margin-right: 10px"
          placeholder="全部"
        >
          <el-option
            v-for="item in state.rankList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" height="55vh">
      <el-table-column prop="lastUpdateTime" label="报警时间">
       <template #default="scope">
          {{ dayjs(scope.row.lastUpdateTime).format("MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        prop="shortStationName"
        label="场站"
        align="center"
      />
      <el-table-column prop="windturbineCode" v-if="props.category1 !== 'SYZ'" label="风机" />
      <el-table-column prop="alertText" label="报警信息" />
      <el-table-column prop="rank" label="级别" width="80px">
        <template #default="scope">
         <el-tag :type="tagType(scope.row.rank)"  size="small">{{ tableFilter(scope.row.rank) }}</el-tag> 
        </template>
      </el-table-column>
      <el-table-column prop="isOpened" label="状态" width="80px">
        <template #default="scope">
         <span :style="{color:scope.row.isOpened == 1?'#F56C6C':'#909399'}">{{ tableFilter(scope.row.isOpened) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted, reactive, computed } from "vue";
import {
  
} from "element-plus";
import dayjs from "dayjs";
import { alarm_snap ,alarm_snap_top} from "/@/api/api.js";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  title: {
    type: String,
    defaule: "defaule title",
  },
  category1: {
    type: String,
    defaule: "SYZ",
  },
});
const stationList = computed(() => store.state.stationList);
const state = reactive({
  
  dateVal: 1,
  //场站
  stationId: '',
  // stationId: computed(() => stationList.value[0]?.id),
  //级别
  rankList: [
    {
      label: "低级",
      value: 2,
    },
    {
      label: "中级",
      value: 3,
    },
    {
      label: "中高级",
      value: 4,
    },
    {
      label: "高级",
      value: 5,
    },
  ],
  rankVal: "",
});
const tableData = ref([]);
const timer = ref([]);
onMounted(async() => {
  getAlarm_snap_top()
  fearch();
});
onUnmounted(()=>{
  console.warn('onUnmounted,页面销毁定时任务');
  window.clearInterval(timer.value)
})
const fearch = () => {
  timer.value = window.setInterval(() => {
    setTimeout(() => {
      // getAlarm_snap();
      getAlarm_snap_top()
    }, 0);
  }, 5000);
};
const getAlarm_snap = async () => {
  const params = {
    stationid: state.stationId,
    windturbineid: "",
    category1: props.category1,
    category2: "",
    rank: state.rankVal,
    isopened: 1,
    keyword: "",
    starttime: formatTime(
      new Date(new Date() - state.dateVal * 60 * 60 * 1000)
    ),
    endtime: formatTime(new Date()),
  };
  const res = await alarm_snap(params);
  tableData.value = res;
};
const getAlarm_snap_top= async () => {
  const res = await alarm_snap_top({
    category1:props.category1,
    topnum:100
  });
  tableData.value = res;
  };
// 时间格式化
const formatTime = (val) => {
  return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
};
// 格式化
const obj = {
  0: "解除",
  1: "触发",
  2: "低级",
  3: "中级",
  4: "中高级",
  5: "高级",
};

const tableFilter = (val) => {
  return obj[val];
};
// 格式化
const tagTypeObj = {
  0: "success",
  1: "danger",
  2:'info',
  3:'info',
  4: "warning",
  5: "danger",
};

 const tagType= (val) => {
  return tagTypeObj[val];
};
const iconfontsObj ={
  'SYZ':'iconIOTtubiao_huabanfuben',
  'windturbine':'iconfengji',
  'custom':'iconzidingyi',
}
const iconfonts =()=>{
  return iconfontsObj[props.category1]
}
</script>

<style lang="scss" scoped>
.safeCom {
  width: 100%;
  height: 100%;
  .safeCom_head {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid rgb(221, 221, 221);
    .safeCom_title {
      font-size: 24px;
      text-align: center;
    }
    .safeCom_fifter {
      flex: 1;
    }
  }
}
</style>