<template>
  <div class="share-code-log-container">
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="MAC">
          <el-input
            v-model="searchForm.mac_addr"
            placeholder="AA:BB:CC:DD:EE:FF"
            clearable
            style="width: 210px"
          />
        </el-form-item>
        <el-form-item label="分享码">
          <el-input
            v-model="searchForm.share_code"
            placeholder="5 位"
            clearable
            maxlength="5"
            style="width: 140px"
          />
        </el-form-item>
        <el-form-item label="动作">
          <el-select
            v-model="searchForm.action"
            placeholder="全部"
            clearable
            style="width: 120px"
          >
            <el-option label="导出" value="export" />
            <el-option label="导入" value="import" />
          </el-select>
        </el-form-item>
        <el-form-item label="IP">
          <el-input
            v-model="searchForm.ip_addr"
            placeholder="IPv4/IPv6"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="searchForm.timeRange"
            type="datetimerange"
            start-placeholder="开始"
            end-placeholder="结束"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DDTHH:mm:ss"
            :default-time="defaultTime"
            style="width: 360px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <div class="card-header">
        <span class="title">分享日志</span>
      </div>

      <div class="table-loading-host" v-loading="loading">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" min-width="70" />
        <el-table-column prop="mac_addr" label="MAC" min-width="160" show-overflow-tooltip />
        <el-table-column prop="share_code" label="分享码" min-width="90" />
        <el-table-column prop="action" label="动作" min-width="90">
          <template #default="{ row }">
            <el-tag v-if="row.action === 'export'" type="success" size="small">导出</el-tag>
            <el-tag v-else-if="row.action === 'import'" type="warning" size="small">导入</el-tag>
            <span v-else>{{ row.action || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ip_addr" label="IP" min-width="150" show-overflow-tooltip />
        <el-table-column prop="expire_at" label="到期时间" min-width="170">
          <template #default="{ row }">
            {{ formatDateTime(row.expire_at) }}
          </template>
        </el-table-column>
        <el-table-column prop="create_at" label="操作时间" min-width="170">
          <template #default="{ row }">
            {{ formatDateTime(row.create_at) }}
          </template>
        </el-table-column>
        <el-table-column label="EQ 快照" min-width="110">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleViewEq(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <el-dialog
      v-model="eqDialogVisible"
      :title="eqDialogTitle"
      width="780px"
      class="eq-dialog"
      @closed="resetEqDialog"
    >
      <div v-if="eqDialogData === null">
        <el-empty description="暂无数据" :image-size="80" />
      </div>
      <div v-else class="eq-dialog-body">
        <VueJsonPretty
          :data="eqDialogData"
          :deep="3"
          :show-length="true"
          :show-line-number="false"
          :show-icon="true"
          :show-select-controller="false"
          :editable="false"
        />
      </div>
      <template #footer>
        <el-button @click="eqDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
import { getShareCodeLogs } from '@/api/shareCodeLog'

const loading = ref(false)
const tableData = ref([])

const pagination = reactive({
  page: 1,
  pageSize: 50,
  total: 0
})

const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 1, 1, 23, 59, 59)
]

const searchForm = reactive({
  mac_addr: '',
  share_code: '',
  action: undefined,
  ip_addr: '',
  timeRange: null
})

const eqDialogVisible = ref(false)
const eqDialogTitle = ref('EQ 快照')
const eqDialogData = ref(null)

function resetEqDialog() {
  eqDialogTitle.value = 'EQ 快照'
  eqDialogData.value = null
}

function safeParseJson(value) {
  if (value === null || value === undefined) return null
  if (typeof value === 'object') return value
  if (typeof value === 'string') {
    try {
      return JSON.parse(value)
    } catch {
      return { _raw: value }
    }
  }
  return { value }
}

function handleViewEq(row) {
  eqDialogTitle.value = `${row.mac_addr || ''} · ${row.share_code || ''}`.trim()
  eqDialogData.value = safeParseJson(row.eq_data)
  eqDialogVisible.value = true
}

function formatDateTime(value) {
  if (!value) return '-'
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return value
  const pad = (n) => String(n).padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}

function buildQueryParams() {
  const params = {
    skip: (pagination.page - 1) * pagination.pageSize,
    limit: pagination.pageSize,
    mac_addr: searchForm.mac_addr || undefined,
    share_code: searchForm.share_code || undefined,
    action: searchForm.action || undefined,
    ip_addr: searchForm.ip_addr || undefined,
    sort_by: 'id',
    sort_order: 'desc'
  }

  if (Array.isArray(searchForm.timeRange) && searchForm.timeRange.length === 2) {
    params.start_at = searchForm.timeRange[0] || undefined
    params.end_at = searchForm.timeRange[1] || undefined
  }
  return params
}

async function loadData() {
  loading.value = true
  try {
    const res = await getShareCodeLogs(buildQueryParams())
    if (res.code === 1 && res.data) {
      tableData.value = res.data.items || []
      pagination.total = res.data.total || 0
    } else if (res.code === 2) {
      tableData.value = []
      pagination.total = 0
    }
  } catch (e) {
    console.error(e)
    ElMessage.error('加载失败')
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  pagination.page = 1
  loadData()
}

function handleReset() {
  searchForm.mac_addr = ''
  searchForm.share_code = ''
  searchForm.action = undefined
  searchForm.ip_addr = ''
  searchForm.timeRange = null
  pagination.page = 1
  loadData()
}

function handleSizeChange() {
  loadData()
}

function handlePageChange() {
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.share-code-log-container {
  height: 100%;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.table-card {
  min-height: 520px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #e2e8f0;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.eq-dialog-body {
  max-height: 64vh;
  overflow: auto;
}

.eq-dialog :deep(.vjs-tree) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #cbd5e1;
  background: transparent;
}

.eq-dialog :deep(.vjs-tree-node.is-highlight),
.eq-dialog :deep(.vjs-tree-node:hover) {
  background-color: rgba(51, 65, 85, 0.72);
  border-radius: 4px;
}

.eq-dialog :deep(.vjs-key) {
  color: #7dd3fc;
}

.eq-dialog :deep(.vjs-value-string) {
  color: #86efac;
}

.eq-dialog :deep(.vjs-value-number) {
  color: #fcd34d;
}

.eq-dialog :deep(.vjs-value-boolean) {
  color: #f9a8d4;
}

.eq-dialog :deep(.vjs-value-null) {
  color: #94a3b8;
}
</style>

