<script setup>
import AppList from '@/components/base/AppList.vue'
import { getGenerateListFilter, getGenerateList } from '@/api/generateEvent'
const ViewEvent = defineAsyncComponent(() => import('@/components/ViewEvent.vue'))

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const filter = reactive({ students: [], connections: [], events: [] })
async function fetchListFilters() {
  const { data } = await getGenerateListFilter()
  Object.assign(filter, data)
}
onMounted(() => {
  fetchListFilters()
})

const students = computed(() => {
  return filter.students.map((item) => {
    return { ...item, name: `${item.name}/${item.mobile}` }
  })
})
// 列表配置
const listOptions = computed(() => {
  const userId = userStore.role.id == 1 ? userStore.user?.id : ''
  return {
    remote: {
      httpRequest: getGenerateList,
      params: { created_operator: userId, name: '', connection_id: '', experiment_meta_event_id: '', created_time_start: '', created_time_end: '' }
    },
    filters: [
      {
        type: 'select',
        prop: 'created_operator',
        placeholder: '请选择学生姓名',
        options: students.value,
        labelKey: 'name',
        valueKey: 'sso_id',
        disabled: !!userId
      },
      { type: 'input', prop: 'name', placeholder: '请输入用户姓名' },
      { type: 'select', prop: 'connection_id', placeholder: '请选择来源连接', options: filter.connections, labelKey: 'type_name', valueKey: 'id' },
      { type: 'select', prop: 'experiment_meta_event_id', placeholder: '请选择事件', options: filter.events, labelKey: 'name', valueKey: 'id' },
      { type: 'input', prop: 'created_time_start', slots: 'filter-start' },
      { type: 'input', prop: 'created_time_end', slots: 'filter-end' }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '连接', prop: 'connection_name' },
      { label: '事件名称', prop: 'event_name' },
      { label: '用户名称', prop: 'member.name' },
      { label: '手机号', prop: 'member.mobile' },
      { label: '事件发生时间', prop: 'created_time' },
      { label: '操作', slots: 'table-x', width: 220 }
    ]
  }
})

const viewEventVisible = ref(false)
const currentViewEvent = ref()
function handleViewEvent(item) {
  viewEventVisible.value = true
  currentViewEvent.value = item
}
</script>

<template>
  <el-dialog title="用户事件数据" width="1000px">
    <AppList v-bind="listOptions" ref="appList">
      <template #filter-start="{ params }">
        <el-date-picker v-model="params.created_time_start" type="datetime" placeholder="请选择事件发生起始时间" value-format="YYYY-MM-DD HH:mm:ss" />
      </template>
      <template #filter-end="{ params }">
        <el-date-picker v-model="params.created_time_end" type="datetime" placeholder="请选择事件发生截止时间" value-format="YYYY-MM-DD HH:mm:ss" />
      </template>
      <template #table-x="{ row }">
        <el-button type="primary" plain @click="handleViewEvent(row)">事件详情</el-button>
        <el-button type="primary" plain>
          <router-link target="_blank" :to="{ path: '/user/image', query: { user_id: row.member.id, experiment_id: row.experiment_id } }">用户详情</router-link>
        </el-button>
      </template>
    </AppList>
    <!-- 事件详情 -->
    <ViewEvent v-model="viewEventVisible" :event="currentViewEvent" :user="currentViewEvent.member" v-if="viewEventVisible && currentViewEvent"></ViewEvent>
  </el-dialog>
</template>
