<template>
    <div class="nav_detail">
        <Table
            ref="operationRef"
            :tableParams="tableParams"
            :btnRole="btnRole"
            :right-btn="[]"
            :is-checkbox="false"
        >
            <template #left-search>
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" class="nav_detail_search">
                    <el-form-item prop="beginTime">
                        <el-date-picker
                            v-model="rangeTime"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            start-placeholder="选择日期范围"
                            end-placeholder="选择日期范围"
                            @change="changeTime"
                        />
                    </el-form-item>
                </el-form>
            </template>
        </Table>
    </div>
</template>

<script setup lang="ts">
import { listOperationLog, OperationLogQuery, OperationLogVO } from '@/api/public';
import Table from '@/components/Table/index.vue'
import { tableTypes } from '@/components/Table/types'

const props = defineProps({
    resourceType: {
        type: String
    },
    resourceTypeId: {
        type: String
    },
    perPrefix: {
        type: String,
    }
})

const btnRole = ref([
    { type: 'export', hasPermi: `${ props.perPrefix }:detail:tab_czrz_dc` }
])

const tableParams = reactive<tableTypes<OperationLogQuery, OperationLogVO>>({
	tableColumn: [
		{ show: true, label: '操作时间', prop: 'operationTime', sortable: true },
		{ show: true, label: '操作人员', prop: 'ownerByName' },
		{ show: true, label: '操作类型', prop: 'operationType', render: ({ column }: { column: OperationLogVO }) => {
            return column.operationType == 1 ? '新增' : column.operationType == 2 ? '编辑' : '删除'
        } },
		{ show: true, label: '字段名', prop: 'swaggerTitle' },
		{ show: true, label: '旧字段值', prop: 'oldValue', sortable: true },
        { show: true, label: '新字段值', prop: 'newValue', sortable: true }
	],
	queryParams: {
        resourceType: props.resourceType,
        resourceTypeId: props.resourceTypeId,
        beginTime: undefined,
        endTime: undefined
	},
	listFn: listOperationLog,
    exportCode: 'EXPORT_OPERATIONLOG_EXCEL',
    commonQueryOrderBy: 'operationTime'
})

const { queryParams } = toRefs(tableParams);

const rangeTime = ref()
const changeTime = (value: string[] | null) => {
    queryParams.value.beginTime = value ? value[0] : ''
    queryParams.value.endTime = value ? value[1] : ''
    handleQuery()
}

const operationRef = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    operationRef.value.getData()
}
</script>
