<!--
 * @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 v-model="is_Show" title="历史报警记录" ref="" destroy-on-close>
      <el-table :data="tableData" v-loading="dialogLoading" size="large" max-height="600px" stripe>
        <el-table-column type="index" :index="indexMethod" 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="searchConfig.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </div>
      
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
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({
  type:props.type,
  total:props.total,
  pageSize:10,
  pageNum:1
})
let small=ref(false)
let disabled=ref(false)
let background=ref(false)
const emits = defineEmits(["update:dialogTableVisible",'getDialogdatafun']);
const indexMethod = (index: number) => {
  return index + 1
}
const is_Show = computed({
  get: () => props.dialogTableVisible,
  set: (val) => {
    emits("update:dialogTableVisible", val);
  },
})
const handleSizeChange = (val: number) => {
  searchConfig.pageSize=val
  emits("getDialogdatafun", searchConfig);
}
const handleCurrentChange = (val: number) => {
  searchConfig.pageNum=val
  emits("getDialogdatafun", searchConfig);
}
onMounted(() => {

  
})
</script>

<style scoped>
.pagination-class{
  margin-top: 10px;
}</style>
