<template>
    <el-dialog draggable v-model="dialogVisible" v-if="dialogVisible" :title="title" width="1000px" @close="emit('close')">
     <div class="mb10 flex ">
        <DatePicker ref="datePickerRef" ></DatePicker>
        <el-button type="primary" icon="el-icon-Search" @click="source">查询</el-button>
     </div>
       <div v-loading="loading">
        <vxe-table v-bind="defaultAttribute" height="400" :data="tableData">
            <vxe-column field="logsType" title="日志类型" width="150">
                <template #default="{ row }">
                    {{ fontdveoption.find((item: any) => item.id == row.logsType)?.name }}
                </template>
            </vxe-column>
            <vxe-column field="createBy" title="更改人员" width="150"></vxe-column>
            <vxe-column field="updateTime" title="更改时间" width="150"></vxe-column>
            <vxe-column field="terminalDescribe" title="描述"></vxe-column>
        </vxe-table>
        <el-pagination
            class="mt10"
            :currentPage="form.pageNum"
            :page-size="form.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            background
            :layout="'sizes,total, ->, prev, pager, next, jumper'"
            :total="total"
            @size-change="onTableSizeChange"
            @current-change="onTableCurrentChange"
        ></el-pagination>
       </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getList } from '@/api/device-boot/Business'
import { useDictData } from '@/stores/dictData'
import DatePicker from '@/components/form/datePicker/index.vue'
const emit = defineEmits(['close'])
const title = ref('')
const total = ref(0)
const datePickerRef = ref()
const dialogVisible = ref(false)
const tableData = ref([])
const dictData = useDictData()
const fontdveoption = dictData.getBasicData('Dev_Ops')
const form = reactive({
    id: '',
    pageNum: 1,
    pageSize: 10
})
const loading = ref(false)
const open = (e: any) => {
    title.value = e.name + '_日志'
    form.id = e.id

    dialogVisible.value = true
    setTimeout(() => {
        source()
    }, 500)
}
const source = () => {
    loading.value = true
    getList({
        ...form,
        searchBeginTime: datePickerRef.value.timeValue[0],
        searchEndTime: datePickerRef.value.timeValue[1]
    }).then(res => {
        total.value = res.data.total
        tableData.value = res.data.records
        loading.value = false
    })
}
// 分页
const onTableSizeChange = (val: number) => {
    form.pageSize = val
    source()
}

const onTableCurrentChange = (val: number) => {
    form.pageNum = val
    source()
}

const cancel = () => {
    dialogVisible.value = false
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.flex{
    display: flex;
    justify-content: space-between;
}
</style>
