<!--
 * @FilePath: \code\gitscreenFront\src\components\headerBox\dialog\headerDialog.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-06 09:23:12
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div>
    <el-dialog title="历史报警记录" v-model="is_Show" ref="" destroy-on-close >
      <div style="margin-bottom: 20px">
        <el-row :gutter="20">
          <el-col :span="15">
            <span style="margin-right: 10px; font-size: 18px;">日期：</span>
            <el-date-picker
              v-model="selectTime"
              type="datetimerange"
              :shortcuts="shortcuts"
              range-separator="至"
              format="YYYY/MM/DD HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
              style="font-size: 18px;" 
            />
          </el-col>
          <el-col :span="9">
            <span style="margin-right: 10px; font-size: 18px;" >类型：</span>
            <el-select v-model="searchConfig.alarmType" clearable placeholder="请选择报警类型" style="font-size: 18px;" size="large">
              <el-option
                v-for="item in alarmTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="18"> </el-col>
          <el-col :span="6">
            <el-button type="primary" plain @click="searchpartData"  size="large"
              >搜索</el-button
            >
            <el-button type="primary" plain @click="searchpartReset"  size="large"
              >重置</el-button
            >
          </el-col>

        </el-row>
      </div>

      <el-table
        :data="tableData"
        v-loading="dialogLoading"
        size="large"
        max-height="650px"
        stripe
        style="font-size: 18px;"
      >
        <el-table-column
          type="index"
          :index="(searchConfig.pageNum - 1) * searchConfig.pageSize + 1"
          label="序号"
          min-width="10px"
          header-align="center"
          align="center"
        />
        <el-table-column
          property="context"
          label="报警详情"
          header-align="center"
        />
      </el-table>
      <div class="pagination-class">
        <el-pagination
          v-model:current-page="searchConfig.pageNum"
          v-model:page-size="searchConfig.pageSize"
          :page-sizes="[5, 10, 50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="  prev, pager, next, jumper,sizes"
          :total="props.total"
          size="large"
          style="font-size: 18px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { gettime } from "@/utils/time";
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  dialogTableVisible: {
    type: Boolean,
    default: false,
  },
  dialogLoading: {
    type: Boolean,
    default: true,
  },
  type: {
    type: String,
    default: "",
  },
  total: {
    type: Number,
    default: 0,
  },
});
//总页数、每页数量、当前页
const searchConfig = reactive({
  alarmType:'',
  type: props.type,
  startTime: "",
  endTime: "",
  pageSize: 10,
  pageNum: 1,
});
const selectTime = ref("");
let small = ref(false);
let disabled = ref(false);
let background = ref(false);
//类型选项
const alarmTypeOptions = [
  {
    value: 'pm25',
    label: '粉尘pm2.5超标报警',
  },
  {
    value: 'pm10',
    label: '粉尘pm10超标报警',
  },
  {
    value: 'flame',
    label: '明火报警',
  },
  {
    value: 'TVOC',
    label: 'tvoc报警',
  },
  {
    value: 'CH2O',
    label: 'CH2O甲醛报警',
  },
  {
    value: 'smoke',
    label: '烟雾报警',
  },
  {
    value: 'methane',
    label: '燃气报警',
  },
  {
    value: 'pressure',
    label: '管道压力报警',
  },
  {
    value: 'noise',
    label: '噪音报警',
  },
  {
    value: 'huim',
    label: '湿度报警',
  },
  {
    value: 'temp',
    label: '温度报警',
  },
  {
    value: 'offline',
    label: '离线提醒',
  },
]
const emits = defineEmits(["update:dialogTableVisible", "getDialogdatafun"]);
const is_Show = computed({
  get: () => props.dialogTableVisible,
  set: (val) => {
    emits("update:dialogTableVisible", val);
  },
});
computed({
  get: () => props.type,
  set: (val) => {
    searchConfig.type = val;
  },
});
watch(()=>props.type,
(newVal, oldVal)=>{
  searchConfig.type=newVal
}, { immediate: true, deep: true })
watch(
  () => selectTime,
  (newVal, oldVal) => {
    //监听日期数据
    if (newVal.value) {
      searchConfig.startTime = gettime(newVal.value[0], 2);
      searchConfig.endTime = gettime(newVal.value[1], 2);
    } else {
      searchConfig.startTime = null;
      searchConfig.endTime = null;
    }
  },
  { immediate: true, deep: true }
);

const handleSizeChange = (val: number) => {
  searchConfig.pageSize = val;

  emits("getDialogdatafun", searchConfig);
};
const handleCurrentChange = (val: number) => {
  searchConfig.pageNum = val;
  emits("getDialogdatafun", searchConfig);
};

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
//搜索
function searchpartData() {
  emits("getDialogdatafun", searchConfig);
}
//重置
function searchpartReset(){
  searchConfig.alarmType=''
  selectTime.value=''
  //需要重置startTime、endTime，因监听重置有延迟
  searchConfig.startTime = null;
  searchConfig.endTime = null;
  emits("getDialogdatafun", searchConfig);
}
onMounted(() => {});
</script>

<style scoped>
.pagination-class {
  margin-top: 20px;
}
:deep(.el-dialog__title){
  font-size: 25px ; 
}
.el-row {
  margin-bottom: 20px;
}
</style>
