<!-- 详情表格 -->
<script lang="ts" setup name="DetailDialog">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
const title = ref('')
const dialogVisible = ref<boolean>(false) // 弹窗显示
const list: any = ref([])
const columns: any = ref([])

/**
 * 解析特定格式的字符串为表格列配置数组
 * @param input - 输入字符串，格式为"key1=value1;;;key2=value2;;;key3=value3"
 * @returns 解析后的表格列配置数组
 */
interface TableColumn {
  text: string // 列标题文本
  value: string // 列数据字段名
  align: string // 列对齐方式
}

/**
 * 将特定格式的字符串解析为表格列配置数组
 * @param input 格式为"key1=value1;;;key2=value2;;;key3=value3"的字符串
 * @returns 包含TableColumn对象的数组
 */
function parseStringToTableColumns(input: string): TableColumn[] {
  // 提取所有键名并转换为表格列配置
  return input.split(';;;')
    .map((item) => {
      const [key] = item.split('=')
      return {
        text: key,
        value: key,
        align: 'center',
      }
    })
}

/**
 * 将特定格式的字符串解析为单对象数组
 * @param input 格式为"key1=value1;;;key2=value2;;;key3=value3"的字符串
 * @returns 包含单个对象的数组，对象属性由输入字符串的键值对决定
 */
function parseStringToSingleObjectArray(input: string): Array<{ id: string } & Record<string, string>> {
  const result: Record<string, string> = { id: '1' }
  input.split(';;;').forEach((item) => {
    const [key, value] = item.split('=')
    if (key && value) {
      result[key] = value
    }
    if (key && !value) {
      result[key] = '--'
    }
  })
  return [result as { id: string } & Record<string, string>]
}

// 弹窗初始化
const initDialog = (detailMessage: string) => {
  dialogVisible.value = true
  list.value = parseStringToSingleObjectArray(detailMessage)
  columns.value = parseStringToTableColumns(detailMessage)
}

const closeDialog = () => {
  dialogVisible.value = false
}

defineExpose({ initDialog })
// 关闭弹窗
const close = () => {
  dialogVisible.value = false
}
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="详情" width="65%" append-to-body class="container" @close="resetForm">
    <table-container title="日志详细信息列表">
      <!-- 查询结果Table显示 -->
      <normal-table
        :data="list"
        :columns="columns"
        :pagination="false"
      />
    </table-container>
    <template #footer>
      <div class="dialog-footer footer">
        <el-button @click="closeDialog">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.container {
  .isDetail {
    ::v-deep {
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
        content: "";
        display: none;
      }
    }
  }

  .center {
    display: flex;
    align-items: flex-end;
  }
}
</style>