<script setup lang="ts">
import type { EventProp, ConnectionOptionProp } from '../types'
import { Plus } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import AppList from '@/components/base/AppList.vue'
import { getMetaEvent, getConnectionsList, deleteMetaEvent } from '../api'

const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
const ViewDialog = defineAsyncComponent(() => import('../components/ViewDialog.vue'))
const FieldDialog = defineAsyncComponent(() => import('../components/FieldDialog.vue'))

const appList = $ref<InstanceType<typeof AppList> | null>(null)

// 所属链接选项
let experimentConnectionOptions = $ref<ConnectionOptionProp[]>()
getConnectionsList().then(res => {
  experimentConnectionOptions = res.data
})

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getMetaEvent,
      params: { name: '', status: '', experiment_connection_id: '' }
    },
    filters: [
      { type: 'input', prop: 'name', placeholder: '请输入事件名称' },
      {
        type: 'select',
        prop: 'experiment_connection_id',
        placeholder: '请选择事件所属连接',
        options: experimentConnectionOptions,
        labelKey: 'type_name',
        valueKey: 'id'
      },
      {
        type: 'select',
        prop: 'status',
        placeholder: '请选择生效状态',
        options: [
          { label: '有效', value: '1' },
          { label: '失效', value: '0' }
        ]
      }
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '事件ID', prop: 'id' },
      { label: '事件英文名称', prop: 'english_name' },
      { label: '事件名称', prop: 'name' },
      { label: '所属连接', prop: 'connection_name' },
      { label: '属性字段数量', prop: 'attributes_count' },
      {
        label: '状态',
        prop: 'status_name',
        computed: (row: any) => {
          return row.row.status === '0'
            ? `<span style="color: rgb(170, 2, 49)">${row.row.status_name}</span>`
            : `<span style="color: #00ac27">${row.row.status_name}</span>`
        }
      },
      { label: '更新人', prop: 'updated_operator_name' },
      { label: '更新时间', prop: 'updated_time' },
      { label: '操作', slots: 'table-x', width: 300 }
    ]
  }
})

// 刷新
function handleRefresh() {
  appList?.refetch()
}

let formVisible = $ref(false)
let currentRow = $ref<EventProp>()

// 新建
function handleAdd() {
  currentRow = undefined
  formVisible = true
}

// 修改
function handleUpdate(row: EventProp) {
  currentRow = row
  formVisible = true
}

let viewVisible = $ref(false)
// 查看
function handleView(row: EventProp) {
  currentRow = row
  viewVisible = true
}

// 删除
function handleRemove(row: EventProp) {
  ElMessageBox.confirm('确定要删除该属性吗？', '提示').then(() => {
    deleteMetaEvent({ id: row.id }).then(() => {
      ElMessage({ message: '删除成功', type: 'success' })
      handleRefresh()
    })
  })
}

// 字段
let fieldVisible = $ref(false)
const handleField = function (row: EventProp) {
  currentRow = row
  fieldVisible = true
}
</script>

<template>
  <AppCard>
    <AppList v-bind="listOptions" ref="appList">
      <template #header-buttons>
        <el-space>
          <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        </el-space>
      </template>
      <template #table-x="{ row }">
        <el-button type="primary" plain @click="handleView(row)">查看</el-button>
        <el-button type="primary" plain @click="handleUpdate(row)" :disabled="row?.can_edit === '0'">编辑</el-button>
        <el-button type="primary" plain @click="handleRemove(row)" :disabled="row?.can_edit === '0'">删除</el-button>
        <el-button type="primary" plain @click="handleField(row)">字段</el-button>
      </template>
    </AppList>
  </AppCard>
  <!-- 新建/修改 -->
  <FormDialog
    v-model="formVisible"
    :data="currentRow"
    @update="handleRefresh"
    :option="experimentConnectionOptions || []"
    v-if="formVisible"
  />
  <!-- 查看 -->
  <ViewDialog v-model="viewVisible" :data="currentRow" v-if="viewVisible && currentRow" />
  <FieldDialog v-model="fieldVisible" :data="currentRow" v-if="fieldVisible && currentRow"></FieldDialog>
</template>
