<script setup lang="ts">
import { getMemberEvents } from '@/api/base'
const props = defineProps<{ event: any; user: any }>()

const metaEventList = ref([])
async function fetchMetaEventList() {
  const res = await getMemberEvents()
  metaEventList.value = res.data
}
onMounted(fetchMetaEventList)

const currentMetaEvent = computed<any>(() => {
  return metaEventList.value.find((item: any) => item.id === props.event.experiment_meta_event_id)
})

const fields = computed(() => {
  try {
    return JSON.parse(props.event.fields)
  } catch (error) {
    console.error(error)
    return {}
  }
})

const fieldList = computed(() => {
  return Object.keys(fields.value).map((id: string) => {
    const label = currentMetaEvent.value?.attributes?.find((item: any) => item.id === id)?.name || ''
    return { id, value: fields.value[id], label }
  })
})
</script>

<template>
  <el-dialog title="事件详情" width="500">
    <el-descriptions :column="2">
      <el-descriptions-item label="姓名:">{{ user.name }}</el-descriptions-item>
      <el-descriptions-item label="来源链接:">{{ event.connection_name }}</el-descriptions-item>
      <el-descriptions-item label="事件名称:" :span="2">{{ event.event_name }}</el-descriptions-item>
      <el-descriptions-item :label="item.label + ':'" :span="2" v-for="item in fieldList" :key="item.id">
        {{ item.value }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>
