<template>
  <n-drawer display-directive="if" v-model:show="modelShow" :width="502" :placement="placement">
    <n-drawer-content :title="drawerTitle" closable>
      <n-space vertical>
        <n-data-table size="small" :columns="dimensions" :data="source" :pagination="paginationReactive" />
      </n-space>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { NDataTable,NDrawer, NDrawerContent, NSpace } from 'naive-ui'
import { dimensions } from '../config'
import type { sourceInterface } from '../config'
import dayjs from 'dayjs'
import { Placement } from 'naive-ui/es/drawer/src/DrawerBodyWrapper'

const placement = ref<Placement>('right')

const modelShow =ref(false)

const drawerTitle = ref('')

const source =ref<sourceInterface[]>([])

const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20],
      onChange: (page: number) => {
        paginationReactive.page = page
      },
      onUpdatePageSize: (pageSize: number) => {
        paginationReactive.pageSize = pageSize
        paginationReactive.page = 1
      }
    })

const setValue = (value: Recordable, attrs: Recordable[]) => {
  source.value = []
  try {
    if (!value) return
    const deviceLatestList = Object.keys(value).map((item:string) => {
      return {
        key: item,
        value: value[item][0]?.value,
        lastUpdateTime: dayjs( value[item][0]?.ts)?.format('YYYY-MM-DD HH:mm:ss')
      }
    })
    const list = deviceLatestList?.reduce((acc:sourceInterface[],curr: sourceInterface)=>{
      const byKeyFindName = attrs?.find(item => item.identifier === curr.key)?.name
      curr.key = byKeyFindName
      acc.push({...curr})
      return [...acc]
    },[])
    source.value = list.filter(item=>Boolean(item.key))
  }catch(e){
    console.log(e)
  }
}

const setDrawerTitle = (title:string) => drawerTitle.value = title

const openDrawer = () => modelShow.value = true

defineExpose({
  setValue,
  openDrawer,
  setDrawerTitle
})
</script>

<style lang="scss" scoped></style>