<template>
  <ElDrawer
    v-model="dialogVisible"
    title="操作审计日志"
    direction="rtl"
    size="70%"
    :before-close="handleClose"
  >
    <OperationLogsCard :asset-identifier="identifier" :download-permission="downloadPermission" />
  </ElDrawer>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { ElDrawer } from 'element-plus'
  import OperationLogsCard from '@/views/asset-management/asset-information/components/OperationLogsCard.vue'

  interface Props {
    modelValue: boolean
    identifier?: string
    downloadPermission?: string
  }

  const props = defineProps<Props>()
  const emit = defineEmits<{
    'update:modelValue': [value: boolean]
  }>()

  const dialogVisible = ref(props.modelValue)

  watch(
    () => props.modelValue,
    (val) => {
      dialogVisible.value = val
    }
  )

  watch(dialogVisible, (val) => {
    emit('update:modelValue', val)
  })

  const handleClose = () => {
    dialogVisible.value = false
  }
</script>
